@planeasyinc/le-angular 0.0.24 → 0.0.26

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, Injectable, computed, effect, untracked, Directive, input, ChangeDetectionStrategy, Component, output, forwardRef, ViewContainerRef, Injector, Renderer2, ElementRef, DestroyRef, viewChild } from '@angular/core';
+import { InjectionToken, inject, signal, Injectable, computed, effect, untracked, Directive, input, Pipe, ChangeDetectionStrategy, Component, output, forwardRef, ViewContainerRef, Injector, Renderer2, ElementRef, DestroyRef, viewChild } from '@angular/core';
 import { HttpContextToken, HttpClient, HttpContext, HttpRequest, HttpEventType } from '@angular/common/http';
-import { map, filter, distinctUntilChanged, Subject, takeUntil, BehaviorSubject, firstValueFrom, of, tap, catchError, switchMap, from, concatMap, finalize, fromEvent, startWith } from 'rxjs';
+import { map, Subject, firstValueFrom, distinctUntilChanged, takeUntil, BehaviorSubject, of, filter, tap, catchError, switchMap, from, concatMap, finalize, fromEvent, startWith } from 'rxjs';
 import { decodeJwt, UrlFragmentBuilder, normalizeConfig } from '@planeasyinc/le-core';
-import { Location, UpperCasePipe, JsonPipe, DatePipe, ViewportScroller } from '@angular/common';
+import { Location, NgTemplateOutlet, UpperCasePipe, JsonPipe, DatePipe, ViewportScroller } from '@angular/common';
 import { CdkDrag } from '@angular/cdk/drag-drop';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -138,10 +138,13 @@ class LEApiService {
         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 });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEApiService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEApiService, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
 
 class LeNavigationService {
@@ -197,17 +200,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
-class LEDataService {
+class LeApiConfigService {
     apiService = inject(LEApiService);
-    leNavigationService = inject(LeNavigationService);
     _config = signal(null);
+    _externalViewChange = new Subject();
+    config = this._config.asReadonly();
+    externalViewChange = this._externalViewChange.asObservable();
+    async requestConfig() {
+        try {
+            const config = await firstValueFrom(this.apiService.getConfig());
+            const normalizedConfig = normalizeConfig({ type: 'section', ...config });
+            this._config.set(normalizedConfig);
+            return normalizedConfig;
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    setView(node) {
+        this._externalViewChange.next(node);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeApiConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeApiConfigService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeApiConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class LeViewService {
+    leNavigationService = inject(LeNavigationService);
+    configService = inject(LeApiConfigService);
     _view = signal(null);
     _parentPath = signal([]);
     _customCss = signal(null);
     view = this._view.asReadonly();
     parentPath = this._parentPath.asReadonly();
-    config = this._config.asReadonly();
     customCss = this._customCss.asReadonly();
+    init(node) {
+        const initialView = this.getInitialView(node);
+        this._customCss.set(node.custom_css);
+        this._parentPath.set(initialView.path);
+        this.setView(initialView.node);
+    }
     registerEffects() {
         effect(() => {
             const node = this.leNavigationService.node();
@@ -228,39 +265,13 @@ class LEDataService {
             this.leNavigationService.navigate(node);
         }
     }
-    requestConfig(force) {
-        if (this._config() && !force) {
-            return;
-        }
-        this.apiService.getConfig().subscribe({
-            next: (config) => {
-                const normalizedConfig = normalizeConfig({ type: 'section', ...config });
-                this._config.set(normalizedConfig);
-                this._customCss.set(config.custom_css);
-                const initialView = this.getInitialView(normalizedConfig);
-                this.setView(initialView.node);
-                this._parentPath.set(initialView.path);
-            },
-            error: (err) => {
-                console.error(err);
-            },
-        });
-    }
-    request(method, url, body) {
-        return this.apiService
-            .request(method, url, body)
-            .pipe(filter((event) => HttpEventType.Response === event.type));
-    }
-    getObjectByClassName(className) {
-        return this.apiService.getObject(className);
-    }
     navigateByNodeId(id) {
         const node = this.getNodeById(id);
         if (node) {
             this.setView(node);
         }
     }
-    getNodeById(id, node = this._config()) {
+    getNodeById(id, node = this.configService.config()) {
         if (!node)
             return null;
         if (node.id === id) {
@@ -292,10 +303,10 @@ class LEDataService {
         }
         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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeViewService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEDataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeViewService, decorators: [{
             type: Injectable
         }] });
 
@@ -407,6 +418,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 
+class IsParentMenuPipe {
+    transform(node) {
+        return node.type === 'section' && node.isParentMenu;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: IsParentMenuPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: IsParentMenuPipe, isStandalone: true, name: "isParentMenu" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: IsParentMenuPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isParentMenu',
+                }]
+        }] });
+
 const close = {
     name: 'close',
     viewBox: '0 -960 960 960',
@@ -447,12 +472,22 @@ const info = {
     ],
 };
 
+const download$1 = {
+    name: 'download',
+    viewBox: '0 -960 960 960',
+    content: [
+        'M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z',
+    ],
+};
+// <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
+
 const ICONS_MAP = {
     chevron: chevron,
     'arrow-down': arrowDown,
     sort: sort,
     close: close,
-    info: info
+    info: info,
+    download: download$1,
 };
 
 class LeIconComponent {
@@ -573,11 +608,19 @@ class SidebarComponent {
         element.style.transform = 'none';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidebarComponent, isStandalone: true, selector: "le-sidebar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<div leDrawerContainer>\n  <aside leDrawer [opened]=\"isDrawerOpen()\" [width]=\"width()\" [hideOnClose]=\"isSmallScreen()\">\n    <h3 class=\"le-sidebar-title\">\n      <button\n        class=\"le-sidebar-toggle\"\n        (click)=\"onDrawerToggleClick($event)\"\n        (keydown.enter)=\"onDrawerToggleClick($event)\"\n      >\n        @if (isDrawerOpen()) {\n          {{ config().title }}\n        }\n\n        <le-icon name=\"chevron\"></le-icon>\n      </button>\n    </h3>\n\n    @if (isDrawerOpen()) {\n      <menu>\n        @for (item of menu(); track item) {\n          @if (isSection(item)) {\n            <a\n              class=\"le-menu-item\"\n              tabindex=\"0\"\n              [class.le-menu-item--expanded]=\"expanded().has(item)\"\n              (click)=\"toggleExpanded($event, item)\"\n              (keydown.enter)=\"toggleExpanded($event, item)\"\n            >\n              <div class=\"le-menu-title\">\n                {{ item.title }}\n              </div>\n\n              <le-icon class=\"le-menu-chevron\" name=\"chevron\"></le-icon>\n            </a>\n\n            <div class=\"le-menu-group\" [class.le-menu-group--expanded]=\"expanded().has(item)\">\n              @for (child of item.children; track child) {\n                @if (isSection(child)) {\n                  <a\n                    class=\"le-menu-item\"\n                    [tabindex]=\"expanded().has(item) ? 0 : -1\"\n                    [class.le-menu-item--expanded]=\"expanded().has(child)\"\n                    (click)=\"toggleExpanded($event, child)\"\n                    (keydown.enter)=\"toggleExpanded($event, child)\"\n                  >\n                    <div class=\"le-menu-title\">\n                      {{ child.title }}\n                    </div>\n\n                    <le-icon class=\"le-menu-chevron\" name=\"chevron\"></le-icon>\n                  </a>\n\n                  <div class=\"le-menu-group\" [class.le-menu-group--expanded]=\"expanded().has(child)\">\n                    @for (grandchild of child.children; track grandchild) {\n                      <a\n                        [tabindex]=\"expanded().has(child) ? 0 : -1\"\n                        class=\"le-menu-item\"\n                        [class.le-menu-item--selected]=\"view().id === grandchild.id\"\n                        (click)=\"onSidebarItemClick($event, grandchild)\"\n                        (keydown.enter)=\"onSidebarItemClick($event, grandchild)\"\n                      >\n                        <div class=\"le-menu-title\">\n                          {{ grandchild.title }}\n                        </div>\n                      </a>\n                    }\n                  </div>\n                } @else {\n                  <a\n                    [tabindex]=\"expanded().has(item) ? 0 : -1\"\n                    class=\"le-menu-item\"\n                    [class.le-menu-item--selected]=\"view().id === child.id\"\n                    (click)=\"onSidebarItemClick($event, child)\"\n                    (keydown.enter)=\"onSidebarItemClick($event, child)\"\n                  >\n                    <div class=\"le-menu-title\">\n                      {{ child.title }}\n                    </div>\n                  </a>\n                }\n              }\n            </div>\n          } @else {\n            <a\n              tabindex=\"0\"\n              class=\"le-menu-item\"\n              [class.le-menu-item--selected]=\"view().id === item.id\"\n              (click)=\"onSidebarItemClick($event, item)\"\n              (keydown.enter)=\"onSidebarItemClick($event, item)\"\n            >\n              <div class=\"le-menu-title\">\n                {{ item.title }}\n              </div>\n            </a>\n          }\n        }\n      </menu>\n\n      <div class=\"le-drawer-resizer\" cdkDrag (cdkDragMoved)=\"onDragMoved($event)\">\n        <span class=\"le-drag-icon\">\u283F</span>\n      </div>\n    }\n  </aside>\n\n  <main leDrawerContent>\n    <ng-content></ng-content>\n  </main>\n</div>\n", dependencies: [{ kind: "directive", type: DrawerContentDirective, selector: "[leDrawerContent]" }, { kind: "directive", type: DrawerContainerDirective, selector: "[leDrawerContainer]" }, { kind: "directive", type: LeDrawerDirective, selector: "[leDrawer]", inputs: ["opened", "width", "hideOnClose", "type"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }] });
+    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 (item | isParentMenu) {\n            <ng-container *ngTemplateOutlet=\"navParentTemplate; context: { node: item }\"></ng-container>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"navChildTemplate; context: { node: item }\"></ng-container>\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\n<ng-template #navParentTemplate let-node=\"node\" let-parent=\"parent\">\n  <a\n    class=\"le-menu-item\"\n    [tabindex]=\"!!parent && (expanded().has(parent) ? 0 : -1) || 0\"\n    [class.le-menu-item--expanded]=\"expanded().has(node)\"\n    (click)=\"toggleExpanded($event, node)\"\n    (keydown.enter)=\"toggleExpanded($event, node)\"\n  >\n    <div class=\"le-menu-title\">\n      {{ node.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(node)\">\n    @for (child of node.children; track child) {\n      @if (child | isParentMenu) {\n        <ng-container *ngTemplateOutlet=\"navParentTemplate; context: { node: child, parent: node }\"></ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"navChildTemplate; context: { node: child, parent: node }\"></ng-container>\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #navChildTemplate let-node=\"node\" let-parent=\"parent\">\n  <a\n    [tabindex]=\"!!parent && (expanded().has(parent) ? 0 : -1) || 0\"\n    class=\"le-menu-item\"\n    [class.le-menu-item--selected]=\"view().id === node.id\"\n    (click)=\"onSidebarItemClick($event, node)\"\n    (keydown.enter)=\"onSidebarItemClick($event, node)\"\n  >\n    <div class=\"le-menu-title\">\n      {{ node.title }}\n    </div>\n  </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: DrawerContentDirective, selector: "[leDrawerContent]" }, { kind: "directive", type: DrawerContainerDirective, selector: "[leDrawerContainer]" }, { kind: "directive", type: LeDrawerDirective, selector: "[leDrawer]", inputs: ["opened", "width", "hideOnClose", "type"] }, { kind: "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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IsParentMenuPipe, name: "isParentMenu" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'le-sidebar', imports: [DrawerContentDirective, DrawerContainerDirective, LeDrawerDirective, CdkDrag, LeIconComponent], template: "<div leDrawerContainer>\n  <aside leDrawer [opened]=\"isDrawerOpen()\" [width]=\"width()\" [hideOnClose]=\"isSmallScreen()\">\n    <h3 class=\"le-sidebar-title\">\n      <button\n        class=\"le-sidebar-toggle\"\n        (click)=\"onDrawerToggleClick($event)\"\n        (keydown.enter)=\"onDrawerToggleClick($event)\"\n      >\n        @if (isDrawerOpen()) {\n          {{ config().title }}\n        }\n\n        <le-icon name=\"chevron\"></le-icon>\n      </button>\n    </h3>\n\n    @if (isDrawerOpen()) {\n      <menu>\n        @for (item of menu(); track item) {\n          @if (isSection(item)) {\n            <a\n              class=\"le-menu-item\"\n              tabindex=\"0\"\n              [class.le-menu-item--expanded]=\"expanded().has(item)\"\n              (click)=\"toggleExpanded($event, item)\"\n              (keydown.enter)=\"toggleExpanded($event, item)\"\n            >\n              <div class=\"le-menu-title\">\n                {{ item.title }}\n              </div>\n\n              <le-icon class=\"le-menu-chevron\" name=\"chevron\"></le-icon>\n            </a>\n\n            <div class=\"le-menu-group\" [class.le-menu-group--expanded]=\"expanded().has(item)\">\n              @for (child of item.children; track child) {\n                @if (isSection(child)) {\n                  <a\n                    class=\"le-menu-item\"\n                    [tabindex]=\"expanded().has(item) ? 0 : -1\"\n                    [class.le-menu-item--expanded]=\"expanded().has(child)\"\n                    (click)=\"toggleExpanded($event, child)\"\n                    (keydown.enter)=\"toggleExpanded($event, child)\"\n                  >\n                    <div class=\"le-menu-title\">\n                      {{ child.title }}\n                    </div>\n\n                    <le-icon class=\"le-menu-chevron\" name=\"chevron\"></le-icon>\n                  </a>\n\n                  <div class=\"le-menu-group\" [class.le-menu-group--expanded]=\"expanded().has(child)\">\n                    @for (grandchild of child.children; track grandchild) {\n                      <a\n                        [tabindex]=\"expanded().has(child) ? 0 : -1\"\n                        class=\"le-menu-item\"\n                        [class.le-menu-item--selected]=\"view().id === grandchild.id\"\n                        (click)=\"onSidebarItemClick($event, grandchild)\"\n                        (keydown.enter)=\"onSidebarItemClick($event, grandchild)\"\n                      >\n                        <div class=\"le-menu-title\">\n                          {{ grandchild.title }}\n                        </div>\n                      </a>\n                    }\n                  </div>\n                } @else {\n                  <a\n                    [tabindex]=\"expanded().has(item) ? 0 : -1\"\n                    class=\"le-menu-item\"\n                    [class.le-menu-item--selected]=\"view().id === child.id\"\n                    (click)=\"onSidebarItemClick($event, child)\"\n                    (keydown.enter)=\"onSidebarItemClick($event, child)\"\n                  >\n                    <div class=\"le-menu-title\">\n                      {{ child.title }}\n                    </div>\n                  </a>\n                }\n              }\n            </div>\n          } @else {\n            <a\n              tabindex=\"0\"\n              class=\"le-menu-item\"\n              [class.le-menu-item--selected]=\"view().id === item.id\"\n              (click)=\"onSidebarItemClick($event, item)\"\n              (keydown.enter)=\"onSidebarItemClick($event, item)\"\n            >\n              <div class=\"le-menu-title\">\n                {{ item.title }}\n              </div>\n            </a>\n          }\n        }\n      </menu>\n\n      <div class=\"le-drawer-resizer\" cdkDrag (cdkDragMoved)=\"onDragMoved($event)\">\n        <span class=\"le-drag-icon\">\u283F</span>\n      </div>\n    }\n  </aside>\n\n  <main leDrawerContent>\n    <ng-content></ng-content>\n  </main>\n</div>\n" }]
+            args: [{ selector: 'le-sidebar', imports: [
+                        DrawerContentDirective,
+                        DrawerContainerDirective,
+                        LeDrawerDirective,
+                        CdkDrag,
+                        LeIconComponent,
+                        NgTemplateOutlet,
+                        IsParentMenuPipe,
+                    ], 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 (item | isParentMenu) {\n            <ng-container *ngTemplateOutlet=\"navParentTemplate; context: { node: item }\"></ng-container>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"navChildTemplate; context: { node: item }\"></ng-container>\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\n<ng-template #navParentTemplate let-node=\"node\" let-parent=\"parent\">\n  <a\n    class=\"le-menu-item\"\n    [tabindex]=\"!!parent && (expanded().has(parent) ? 0 : -1) || 0\"\n    [class.le-menu-item--expanded]=\"expanded().has(node)\"\n    (click)=\"toggleExpanded($event, node)\"\n    (keydown.enter)=\"toggleExpanded($event, node)\"\n  >\n    <div class=\"le-menu-title\">\n      {{ node.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(node)\">\n    @for (child of node.children; track child) {\n      @if (child | isParentMenu) {\n        <ng-container *ngTemplateOutlet=\"navParentTemplate; context: { node: child, parent: node }\"></ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"navChildTemplate; context: { node: child, parent: node }\"></ng-container>\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #navChildTemplate let-node=\"node\" let-parent=\"parent\">\n  <a\n    [tabindex]=\"!!parent && (expanded().has(parent) ? 0 : -1) || 0\"\n    class=\"le-menu-item\"\n    [class.le-menu-item--selected]=\"view().id === node.id\"\n    (click)=\"onSidebarItemClick($event, node)\"\n    (keydown.enter)=\"onSidebarItemClick($event, node)\"\n  >\n    <div class=\"le-menu-title\">\n      {{ node.title }}\n    </div>\n  </a>\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 class ChartViewComponent {
@@ -653,10 +696,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-tree [dataSource]=\"source()\" [treeControl]=\"treeControl\">\n  <!-- Tree node template for leaf nodes -->\n  <cdk-nested-tree-node *cdkTreeNodeDef=\"let node\" class=\"le-tree-node\">\n    <div class=\"le-tree-row\">\n      <b>{{node.label | uppercase}}</b>: &nbsp;&nbsp;&nbsp; {{node.value}}\n    </div>\n  </cdk-nested-tree-node>\n\n  <!-- Tree node template for expandable nodes -->\n  <cdk-nested-tree-node *cdkTreeNodeDef=\"let node; when: hasChild\" class=\"le-tree-node\">\n\n    <a class=\"le-tree-row\" [class.le-tree-row--expanded]=\"treeControl.isExpanded(node)\" [attr.aria-label]=\"'Toggle ' + node.label\" cdkTreeNodeToggle>\n      <b>{{node.label | uppercase}}</b>:\n\n      <le-icon class=\"le-tree-chevron\" name=\"chevron\"></le-icon>\n    </a>\n\n    <div [class.le-tree-invisible]=\"!treeControl.isExpanded(node)\">\n      <ng-container cdkTreeNodeOutlet></ng-container>\n    </div>\n  </cdk-nested-tree-node>\n</cdk-tree>\n" }]
         }] });
 
-class StringTemplate {
+class BaseTemplate {
     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 });
+    attribute = input.required();
+    metadata = input.required();
+    clicked = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BaseTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: BaseTemplate, isStandalone: true, inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, attribute: { classPropertyName: "attribute", publicName: "attribute", isSignal: true, isRequired: true, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BaseTemplate, decorators: [{
+            type: Directive
+        }] });
+
+class StringTemplate extends BaseTemplate {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: StringTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: StringTemplate, isStandalone: true, selector: "ng-component", usesInheritance: true, 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,
@@ -665,11 +719,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 
-class ReferenceTemplate {
-    data = input.required();
-    attribute = input.required();
-    metadata = input.required();
-    clicked = output();
+class ReferenceTemplate extends BaseTemplate {
     reference = computed(() => {
         const ref = this.data()?.ref;
         return {
@@ -680,7 +730,10 @@ class ReferenceTemplate {
     onClick(event) {
         event.preventDefault();
         event.stopImmediatePropagation();
-        this.clicked.emit(this.data());
+        this.clicked.emit({
+            type: 'reference',
+            data: this.data(),
+        });
     }
     generateText(ref) {
         if (ref) {
@@ -695,8 +748,8 @@ class ReferenceTemplate {
             return ref?.address ? `${href}?address=${ref.address}` : href;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ReferenceTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ReferenceTemplate, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, attribute: { classPropertyName: "attribute", publicName: "attribute", isSignal: true, isRequired: true, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ReferenceTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ReferenceTemplate, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <span class="le-table-template le-template-reference">
       @if (reference(); as reference) {
         @if (reference.href) {
@@ -737,10 +790,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 
-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">{{
+class JSONTemplate extends BaseTemplate {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: JSONTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: JSONTemplate, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<pre class="le-table-template le-template-json">{{
     data() ? (data() | json) : '–'
   }}</pre>`, isInline: true, dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }] });
 }
@@ -754,15 +806,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 
+class FileTemplate extends BaseTemplate {
+    onClick(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.clicked.emit({
+            type: 'file',
+            data: this.data(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FileTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: FileTemplate, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <span class="le-table-template le-template-file">
+      @if (data()) {
+        <a [attr.aria-label]="'Download'" (click)="onClick($event)">
+          <le-icon size="16" class="le-icon-download" name="download"></le-icon>
+          Download
+        </a>
+      } @else {
+        No file attached
+      }
+    </span>
+  `, isInline: true, dependencies: [{ kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FileTemplate, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [LeIconComponent],
+                    template: `
+    <span class="le-table-template le-template-file">
+      @if (data()) {
+        <a [attr.aria-label]="'Download'" (click)="onClick($event)">
+          <le-icon size="16" class="le-icon-download" name="download"></le-icon>
+          Download
+        </a>
+      } @else {
+        No file attached
+      }
+    </span>
+  `,
+                }]
+        }] });
+
 const TABLE_SELL_TEMPLATE_NAMES = {
     StringTemplate: 'StringTemplate',
     ReferenceTemplate: 'ReferenceTemplate',
     JsonTemplate: 'JsonTemplate',
+    FileTemplate: 'FileTemplate',
 };
 const TABLE_CELL_TEMPLATES = {
     StringTemplate: StringTemplate,
     ReferenceTemplate: ReferenceTemplate,
     JsonTemplate: JSONTemplate,
+    FileTemplate: FileTemplate,
 };
 
 class TableViewCellDirective {
@@ -789,18 +886,16 @@ class TableViewCellDirective {
                 }
                 this.componentRef = this.vcr.createComponent(component);
                 this.componentRef?.setInput('data', data);
-                if (type === 'ReferenceTemplate') {
-                    if (column) {
-                        this.componentRef?.setInput('attribute', column);
-                    }
-                    if (metadata) {
-                        this.componentRef?.setInput('metadata', metadata);
-                    }
-                    const sub = (this.componentRef?.instance).clicked.subscribe(data => {
-                        this.clicked.emit(data);
-                    });
-                    this.componentRef?.onDestroy(() => sub.unsubscribe());
+                if (column) {
+                    this.componentRef?.setInput('attribute', column);
                 }
+                if (metadata) {
+                    this.componentRef?.setInput('metadata', metadata);
+                }
+                const sub = (this.componentRef?.instance).clicked.subscribe(data => {
+                    this.clicked.emit(data);
+                });
+                this.componentRef?.onDestroy(() => sub.unsubscribe());
             });
         });
     }
@@ -831,12 +926,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         }] });
 
 class SidePanelComponent {
-    dataService = inject(LEDataService);
+    viewService = inject(LeViewService);
     _selectedTab = signal(0);
     data = input.required();
     config = input();
     event = output();
-    node = this.dataService.view;
+    node = this.viewService.view;
     tabs = computed(() => {
         const data = this.data();
         return data.tabs.length ? data.tabs : undefined;
@@ -850,7 +945,7 @@ class SidePanelComponent {
             const data = this.data();
             untracked(() => {
                 if (data.node) {
-                    this.dataService.setView(data.node, true);
+                    this.viewService.setView(data.node, true);
                 }
             });
         });
@@ -862,7 +957,7 @@ class SidePanelComponent {
         this._selectedTab.set(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidePanelComponent, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, host: { properties: { "style.width": "\"100%\"", "style.overflow": "\"auto\"", "style.padding": "\"0 16px\"" } }, providers: [LEDataService, LEFiltersService], ngImport: i0, template: "@if (node(); as node) {\n  <le-node [node]=\"node\" [config]=\"data()?.config\" (event)=\"onEvent($event)\"></le-node>\n}\n\n@if (tabs(); as tabs) {\n  <div class=\"le-tabs-nav\">\n    @for (tab of tabs; track tab.type; let idx = $index) {\n      <button\n        class=\"le-button le-button-flat le-button--success\"\n        [attr.aria-label]=\"'Select ' + tab.type\"\n        [class.le-button--success]=\"selectedTabIndex() === idx\"\n        (click)=\"onTabClick(idx)\"\n      >\n        {{ tab.label }}\n      </button>\n    }\n    <span class=\"spacer\"></span>\n\n    <button\n      aria-label=\"Close side panel\"\n      class=\"le-button le-button-flat\"\n      (click)=\"event.emit({ type: 'close' })\"\n    >Close</button>\n  </div>\n}\n\n@if (selectedTab(); as selectedTab) {\n  <div class=\"le-tabs-content\">\n    @switch (selectedTab.type) {\n      @case ('tree') {\n        <le-tree-view [data]=\"selectedTab.data\"></le-tree-view>\n      }\n      @case ('table') {\n        <le-node\n          [node]=\"selectedTab.data\"\n          [config]=\"data()?.config\"\n          (event)=\"onEvent($event)\"\n        ></le-node>\n      }\n      @case ('block') {\n        <le-block-view\n          [data]=\"selectedTab.data\"\n          [columns]=\"selectedTab.columns\"\n          (event)=\"onEvent($event)\"\n        ></le-block-view>\n      }\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"], outputs: ["event"] }, { kind: "component", type: i0.forwardRef(() => TreeViewComponent), selector: "le-tree-view", inputs: ["data"] }, { kind: "component", type: i0.forwardRef(() => BlockViewComponent), selector: "le-block-view", inputs: ["data", "columns"], outputs: ["event"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidePanelComponent, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, host: { properties: { "style.width": "\"100%\"", "style.overflow": "\"auto\"", "style.padding": "\"0 16px\"" } }, providers: [LeViewService, LEFiltersService], ngImport: i0, template: "@if (node(); as node) {\n  <le-node [node]=\"node\" [config]=\"data()?.config\" (event)=\"onEvent($event)\"></le-node>\n}\n\n@if (tabs(); as tabs) {\n  <div class=\"le-tabs-nav\">\n    @for (tab of tabs; track tab.type; let idx = $index) {\n      <button\n        class=\"le-button le-button-flat le-button--success\"\n        [attr.aria-label]=\"'Select ' + tab.type\"\n        [class.le-button--success]=\"selectedTabIndex() === idx\"\n        (click)=\"onTabClick(idx)\"\n      >\n        {{ tab.label }}\n      </button>\n    }\n    <span class=\"spacer\"></span>\n\n    <button\n      aria-label=\"Close side panel\"\n      class=\"le-button le-button-flat\"\n      (click)=\"event.emit({ type: 'close' })\"\n    >Close</button>\n  </div>\n}\n\n@if (selectedTab(); as selectedTab) {\n  <div class=\"le-tabs-content\">\n    @switch (selectedTab.type) {\n      @case ('tree') {\n        <le-tree-view [data]=\"selectedTab.data\"></le-tree-view>\n      }\n      @case ('table') {\n        <le-node\n          [node]=\"selectedTab.data\"\n          [config]=\"data()?.config\"\n          (event)=\"onEvent($event)\"\n        ></le-node>\n      }\n      @case ('block') {\n        <le-block-view\n          [data]=\"selectedTab.data\"\n          [columns]=\"selectedTab.columns\"\n          (event)=\"onEvent($event)\"\n        ></le-block-view>\n      }\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"], outputs: ["event"] }, { kind: "component", type: i0.forwardRef(() => TreeViewComponent), selector: "le-tree-view", inputs: ["data"] }, { kind: "component", type: i0.forwardRef(() => BlockViewComponent), selector: "le-block-view", inputs: ["data", "columns"], outputs: ["event"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidePanelComponent, decorators: [{
             type: Component,
@@ -870,7 +965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '[style.width]': '"100%"',
                         '[style.overflow]': '"auto"',
                         '[style.padding]': '"0 16px"',
-                    }, imports: [forwardRef(() => NodeComponent), TreeViewComponent, BlockViewComponent], providers: [LEDataService, LEFiltersService], template: "@if (node(); as node) {\n  <le-node [node]=\"node\" [config]=\"data()?.config\" (event)=\"onEvent($event)\"></le-node>\n}\n\n@if (tabs(); as tabs) {\n  <div class=\"le-tabs-nav\">\n    @for (tab of tabs; track tab.type; let idx = $index) {\n      <button\n        class=\"le-button le-button-flat le-button--success\"\n        [attr.aria-label]=\"'Select ' + tab.type\"\n        [class.le-button--success]=\"selectedTabIndex() === idx\"\n        (click)=\"onTabClick(idx)\"\n      >\n        {{ tab.label }}\n      </button>\n    }\n    <span class=\"spacer\"></span>\n\n    <button\n      aria-label=\"Close side panel\"\n      class=\"le-button le-button-flat\"\n      (click)=\"event.emit({ type: 'close' })\"\n    >Close</button>\n  </div>\n}\n\n@if (selectedTab(); as selectedTab) {\n  <div class=\"le-tabs-content\">\n    @switch (selectedTab.type) {\n      @case ('tree') {\n        <le-tree-view [data]=\"selectedTab.data\"></le-tree-view>\n      }\n      @case ('table') {\n        <le-node\n          [node]=\"selectedTab.data\"\n          [config]=\"data()?.config\"\n          (event)=\"onEvent($event)\"\n        ></le-node>\n      }\n      @case ('block') {\n        <le-block-view\n          [data]=\"selectedTab.data\"\n          [columns]=\"selectedTab.columns\"\n          (event)=\"onEvent($event)\"\n        ></le-block-view>\n      }\n    }\n  </div>\n}\n" }]
+                    }, imports: [forwardRef(() => NodeComponent), TreeViewComponent, BlockViewComponent], providers: [LeViewService, LEFiltersService], template: "@if (node(); as node) {\n  <le-node [node]=\"node\" [config]=\"data()?.config\" (event)=\"onEvent($event)\"></le-node>\n}\n\n@if (tabs(); as tabs) {\n  <div class=\"le-tabs-nav\">\n    @for (tab of tabs; track tab.type; let idx = $index) {\n      <button\n        class=\"le-button le-button-flat le-button--success\"\n        [attr.aria-label]=\"'Select ' + tab.type\"\n        [class.le-button--success]=\"selectedTabIndex() === idx\"\n        (click)=\"onTabClick(idx)\"\n      >\n        {{ tab.label }}\n      </button>\n    }\n    <span class=\"spacer\"></span>\n\n    <button\n      aria-label=\"Close side panel\"\n      class=\"le-button le-button-flat\"\n      (click)=\"event.emit({ type: 'close' })\"\n    >Close</button>\n  </div>\n}\n\n@if (selectedTab(); as selectedTab) {\n  <div class=\"le-tabs-content\">\n    @switch (selectedTab.type) {\n      @case ('tree') {\n        <le-tree-view [data]=\"selectedTab.data\"></le-tree-view>\n      }\n      @case ('table') {\n        <le-node\n          [node]=\"selectedTab.data\"\n          [config]=\"data()?.config\"\n          (event)=\"onEvent($event)\"\n        ></le-node>\n      }\n      @case ('block') {\n        <le-block-view\n          [data]=\"selectedTab.data\"\n          [columns]=\"selectedTab.columns\"\n          (event)=\"onEvent($event)\"\n        ></le-block-view>\n      }\n    }\n  </div>\n}\n" }]
         }], ctorParameters: () => [] });
 
 const positionMap = {
@@ -1224,9 +1319,18 @@ const buildQueryString = (params) => {
     return query.filter((item) => !!item).join('&');
 };
 
+const download = (url) => {
+    const a = document.createElement('a');
+    a.style.display = 'none';
+    a.href = url;
+    document.body.appendChild(a);
+    a.click();
+    window.URL.revokeObjectURL(url);
+};
+
 class TableViewComponent {
     apiService = inject(LEApiService);
-    dataService = inject(LEDataService);
+    viewService = inject(LeViewService);
     filtersService = inject(LEFiltersService);
     sidePanelService = inject(LeSidePanelService);
     injector = inject(Injector);
@@ -1359,16 +1463,42 @@ class TableViewComponent {
         });
     }
     onCellClicked(data) {
-        const path = `${data.ref.resource}%23${data.ref.class_name}%3A${data.ref.class_version}%3A${data.ref.object_id}%3A${data.ref.object_version}`;
+        if (data.type === 'reference') {
+            this.processReferenceClick(data.data);
+        }
+        else if (data.type === 'file') {
+            this.processFileClick(data.data);
+        }
+    }
+    processReferenceClick(data) {
+        const address = this.getAddressFromRef(data.ref);
         this.setView({
-            id: path,
+            id: address,
             type: 'form',
             controlSource: {
                 kind: 'object',
-                entity: path,
+                entity: address,
             },
         });
     }
+    processFileClick(data) {
+        console.log('processFileClick', data);
+        const ref = data.ref || data;
+        if (ref && 'resource' in ref) {
+            const address = this.getAddressFromRef(ref);
+            this.apiService.getObjectByAddress(address, {}).subscribe({
+                next: (res) => {
+                    download(res.rows[0].data);
+                },
+            });
+        }
+        else if (typeof ref === 'string') {
+            download(ref);
+        }
+    }
+    getAddressFromRef(ref) {
+        return `${ref.resource}%23${ref.class_name}%3A${ref.class_version}%3A${ref.object_id}%3A${ref.object_version}`;
+    }
     processRowClickAction(action, row) {
         const { type, node } = action;
         const clone = JSON.parse(JSON.stringify(node));
@@ -1421,7 +1551,7 @@ class TableViewComponent {
         }
     }
     setView(node) {
-        this.dataService.setView(node, !!this.config()?.skipLocationChange);
+        this.viewService.setView(node, !!this.config()?.skipLocationChange);
     }
     setPagination(pagination) {
         this._pageSize.set(pagination?.pageSize ?? 0);
@@ -2145,10 +2275,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 
+const isHttpResponse = (event) => {
+    return event.type === HttpEventType.Response;
+};
+
 let ID = 100_000_000;
 class FormViewComponent {
     apiService = inject(LEApiService);
-    dataService = inject(LEDataService);
+    viewService = inject(LeViewService);
     attachmentService = inject(FormViewAttachmentService);
     viewportScroller = inject(ViewportScroller);
     toastService = inject(LeToastService);
@@ -2180,9 +2314,9 @@ class FormViewComponent {
             if (!action.async) {
                 this._isLoading.set(true);
             }
-            return this.dataService
+            return this.apiService
                 .request(action.method, action.url, body)
-                .pipe(tap((response) => {
+                .pipe(filter(isHttpResponse), tap((response) => {
                 if (action.onSuccess && response.ok) {
                     this.processActionList(action.onSuccess, response.body);
                 }
@@ -2200,6 +2334,28 @@ class FormViewComponent {
                 }
                 return of(null);
             }));
+            // return this.dataService
+            //   .request<ActionResponse, Record<string, any> | string>(action.method, action.url, body)
+            //   .pipe(
+            //     tap((response) => {
+            //       if (action.onSuccess && response.ok) {
+            //         this.processActionList(action.onSuccess, response.body);
+            //       } else if (action.onError && !response.ok) {
+            //         this.processActionList(action.onError);
+            //       } else {
+            //         this._isLoading.set(false);
+            //       }
+            //       this.event.emit({ type: 'refresh' });
+            //       this.event.emit({ type: 'close' });
+            //     }),
+            //     map(() => null),
+            //     catchError(() => {
+            //       if (action.onError) {
+            //         this.processActionList(action.onError);
+            //       }
+            //       return of(null);
+            //     }),
+            //   );
         },
         update_form: (action) => {
             const node = this.mapUpdateFormActionToFormNode(action.control_source);
@@ -2252,7 +2408,7 @@ class FormViewComponent {
             return of(null);
         },
         navigate_to_section: (action) => {
-            this.dataService.navigateByNodeId(action.section_id);
+            this.viewService.navigateByNodeId(action.section_id);
             return of(null);
         },
         align_values: (action) => {
@@ -2289,7 +2445,7 @@ class FormViewComponent {
         const engine = this._engine();
         const sections = this._sections();
         const topLevelControls = this._topLevelControls();
-        const customCss = this.dataService.customCss() ?? '';
+        const customCss = this.viewService.customCss() ?? '';
         if (!engine || !sections)
             return null;
         return {
@@ -2326,7 +2482,7 @@ class FormViewComponent {
         this._topLevelControls.set(form.controls ?? []);
         const resolvers = {
             attachment: (value) => this.attachmentService.resolve(value),
-            objectLatest: (className) => firstValueFrom(this.dataService.getObjectByClassName(className)),
+            objectLatest: (className) => firstValueFrom(this.apiService.getObject(className)),
         };
         this._engine.set(createEngine(form, {}, resolvers));
         this.checkDelayedActions();
@@ -2343,7 +2499,7 @@ class FormViewComponent {
         });
     }
     setView(node) {
-        this.dataService.setView(node, !!this.config()?.skipLocationChange);
+        this.viewService.setView(node, !!this.config()?.skipLocationChange);
     }
     processAction(action, response) {
         return this._actionHandlers[action.type](action, response);
@@ -2707,11 +2863,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 
 class LeContainerComponent {
     auth = inject(LEAuthService);
-    dataService = inject(LEDataService);
+    viewService = inject(LeViewService);
+    configService = inject(LeApiConfigService);
     sidebar = viewChild(SidebarComponent);
     data = computed(() => {
-        const config = this.dataService.config();
-        const view = this.dataService.view();
+        const config = this.configService.config();
+        const view = this.viewService.view();
         if (!config || !view)
             return null;
         return {
@@ -2722,10 +2879,18 @@ class LeContainerComponent {
     constructor() {
         this.listenAuthState();
         this.listenPageInit();
-        this.dataService.registerEffects();
+        this.listenExternalViewChange();
+        this.viewService.registerEffects();
     }
     onSelectionChange(view) {
-        this.dataService.setView(view);
+        this.viewService.setView(view);
+    }
+    listenExternalViewChange() {
+        this.configService.externalViewChange.pipe(takeUntilDestroyed()).subscribe({
+            next: (data) => {
+                this.viewService.setView(data);
+            },
+        });
     }
     listenAuthState() {
         effect(() => {
@@ -2733,14 +2898,18 @@ class LeContainerComponent {
             const isGuest = this.auth.isGuest();
             if (!token && !isGuest)
                 return;
-            untracked(() => {
-                this.dataService.requestConfig();
+            untracked(async () => {
+                const config = await this.configService.requestConfig();
+                if (!config) {
+                    return;
+                }
+                this.viewService.init(config);
             });
         });
     }
     listenPageInit() {
         effect(() => {
-            const path = this.dataService.parentPath();
+            const path = this.viewService.parentPath();
             const sidebar = this.sidebar();
             if (!(path.length && sidebar))
                 return;
@@ -2752,11 +2921,11 @@ class LeContainerComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LeContainerComponent, isStandalone: true, selector: "le-container", providers: [LEDataService, LEApiService, LEFiltersService, LeNavigationService], viewQueries: [{ propertyName: "sidebar", first: true, predicate: SidebarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (data(); as data) {\n  <le-sidebar\n    [config]=\"data.config\"\n    [view]=\"data.view\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <le-filters>\n      <le-node [node]=\"data.view\"></le-node>\n    </le-filters>\n  </le-sidebar>\n}\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "le-sidebar", inputs: ["config", "view"], outputs: ["selectionChange"] }, { kind: "component", type: NodeComponent, selector: "le-node", inputs: ["node", "config"], outputs: ["event"] }, { kind: "component", type: FiltersComponent, selector: "le-filters" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LeContainerComponent, isStandalone: true, selector: "le-container", providers: [LeViewService, LEApiService, LEFiltersService, LeNavigationService], viewQueries: [{ propertyName: "sidebar", first: true, predicate: SidebarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (data(); as data) {\n  <le-sidebar\n    [config]=\"data.config\"\n    [view]=\"data.view\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <le-filters>\n      <le-node [node]=\"data.view\"></le-node>\n    </le-filters>\n  </le-sidebar>\n}\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "le-sidebar", inputs: ["config", "view"], outputs: ["selectionChange"] }, { kind: "component", type: NodeComponent, selector: "le-node", inputs: ["node", "config"], outputs: ["event"] }, { kind: "component", type: FiltersComponent, selector: "le-filters" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'le-container', imports: [SidebarComponent, NodeComponent, FiltersComponent], providers: [LEDataService, LEApiService, LEFiltersService, LeNavigationService], template: "@if (data(); as data) {\n  <le-sidebar\n    [config]=\"data.config\"\n    [view]=\"data.view\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <le-filters>\n      <le-node [node]=\"data.view\"></le-node>\n    </le-filters>\n  </le-sidebar>\n}\n" }]
+            args: [{ selector: 'le-container', imports: [SidebarComponent, NodeComponent, FiltersComponent], providers: [LeViewService, LEApiService, LEFiltersService, LeNavigationService], template: "@if (data(); as data) {\n  <le-sidebar\n    [config]=\"data.config\"\n    [view]=\"data.view\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <le-filters>\n      <le-node [node]=\"data.view\"></le-node>\n    </le-filters>\n  </le-sidebar>\n}\n" }]
         }], ctorParameters: () => [] });
 
 const provideConfig = (config) => {
@@ -2791,5 +2960,5 @@ const LEAuthInterceptor = (req, next) => {
  * Generated bundle index. Do not edit.
  */
 
-export { CONFIG_TOKEN, LEAuthInterceptor, LEAuthService, CONFIG_TOKEN as LE_CONFIG_TOKEN, LE_REQUEST_CONTEXT_TOKEN, LeContainerComponent, LeToastService, provideConfig };
+export { CONFIG_TOKEN, IsParentMenuPipe, LEAuthInterceptor, LEAuthService, CONFIG_TOKEN as LE_CONFIG_TOKEN, LE_REQUEST_CONTEXT_TOKEN, LeApiConfigService, LeContainerComponent, LeToastService, provideConfig, provideConfig as provideEngineConfig };
 //# sourceMappingURL=planeasyinc-le-angular.mjs.map