@ng-nest/ui 17.0.11 → 18.0.0

package/fesm2022/ng-nest-ui-tree-file.mjs

@@ -1,16 +1,15 @@
 import * as i0 from '@angular/core';
-import { Component, Input, inject, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XDataConvert, XInputBoolean, XWithConfig, XInputNumber, XConfigService, XIsEmpty } from '@ng-nest/ui/core';
-import { XTreeProperty, XTreeComponent } from '@ng-nest/ui/tree';
+import { input, model, Component, signal, inject, computed, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { XPropertyFunction, XToBoolean, XToCssPixelValue, XToNumber, XComputedStyle, XToCssPx, XIsEmpty } from '@ng-nest/ui/core';
 import { HttpClient } from '@angular/common/http';
 import { XCrumbComponent } from '@ng-nest/ui/crumb';
 import { delay, finalize } from 'rxjs/operators';
 import { XHighlightComponent } from '@ng-nest/ui/highlight';
-import { NgClass } from '@angular/common';
+import { DOCUMENT, NgClass } from '@angular/common';
 import { XIconComponent } from '@ng-nest/ui/icon';
 import { XLinkComponent } from '@ng-nest/ui/link';
 import { XLoadingComponent } from '@ng-nest/ui/loading';
+import { XTreeComponent } from '@ng-nest/ui/tree';
 
 /**
  * TreeFile
@@ -18,90 +17,81 @@ import { XLoadingComponent } from '@ng-nest/ui/loading';
  * @decorator component
  */
 const XTreeFilePrefix = 'x-tree-file';
-const X_CONFIG_NAME = 'treeFile';
+const X_TREE_FILE_CONFIG_NAME = 'treeFile';
 /**
  * TreeFile Property
  */
-class XTreeFileProperty extends XTreeProperty {
+class XTreeFileProperty extends XPropertyFunction(X_TREE_FILE_CONFIG_NAME) {
     constructor() {
         super(...arguments);
         /**
          * @zh_CN 节点数据
          * @en_US Node data
          */
-        this.data = [];
+        this.data = input([]);
         /**
          * @zh_CN 文件绝对路径地址前缀，为空表示取当前运行的地址
          * @en_US File absolute path address prefix, empty means to take the address of the current operation
          */
-        this.domain = '';
+        this.domain = input('');
         /**
          * @zh_CN 切换状态
          * @en_US Switch state
          */
-        this.toggle = true;
+        this.toggle = model(true);
         /**
          * @zh_CN 显示切换按钮
          * @en_US Show toggle button
          */
-        this.showToggle = true;
+        this.showToggle = input(true, { transform: XToBoolean });
         /**
          * @zh_CN 显示树，为 true 的时候隐藏切换按钮
          * @en_US Show the tree, hide the toggle button when true
          */
-        this.showTree = true;
+        this.showTree = input(true, { transform: XToBoolean });
         /**
          * @zh_CN 显示面包屑
          * @en_US Show breadcrumbs
          */
-        this.showCrumb = true;
+        this.showCrumb = input(true, { transform: XToBoolean });
+        /**
+         * @zh_CN 最大高度
+         * @en_US Maximum height
+         */
+        this.maxHeight = input(this.config?.maxHeight ?? '37.5rem', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 单位间距，这个与层级的乘积算出节点的左边距
+         * @en_US Unit spacing, the product of this and the level calculates the left margin of the node
+         */
+        this.spacing = input(this.config?.spacing ?? '1rem', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 当前激活的节点 Id, 当 multiple 为 true 时，值为数组（默认是 Id 数组，objectArray 为 true，对象数组）
+         * @en_US Currently active node Id. When Multiple is true, the value is the Id array
+         */
+        this.activatedId = model();
+        /**
+         * @zh_CN 展开的节点
+         * @en_US Expanded node
+         */
+        this.expanded = input([]);
+        /**
+         * @zh_CN 展开所有节点
+         * @en_US Expand all nodes
+         */
+        this.expandedAll = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 默认展开的层级
+         * @en_US Default expanded level
+         */
+        this.expandedLevel = input(-1, { transform: XToNumber });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTreeFileProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XTreeFileProperty, selector: "x-tree-file-property", inputs: { data: "data", domain: "domain", toggle: "toggle", showToggle: "showToggle", showTree: "showTree", showCrumb: "showCrumb", maxHeight: "maxHeight", spacing: "spacing" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeFileProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XTreeFileProperty, selector: "x-tree-file-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, domain: { classPropertyName: "domain", publicName: "domain", isSignal: true, isRequired: false, transformFunction: null }, toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, showTree: { classPropertyName: "showTree", publicName: "showTree", isSignal: true, isRequired: false, transformFunction: null }, showCrumb: { classPropertyName: "showCrumb", publicName: "showCrumb", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, activatedId: { classPropertyName: "activatedId", publicName: "activatedId", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, expandedAll: { classPropertyName: "expandedAll", publicName: "expandedAll", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggleChange", activatedId: "activatedIdChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XDataConvert()
-], XTreeFileProperty.prototype, "data", void 0);
-__decorate([
-    XInputBoolean()
-], XTreeFileProperty.prototype, "toggle", void 0);
-__decorate([
-    XInputBoolean()
-], XTreeFileProperty.prototype, "showToggle", void 0);
-__decorate([
-    XInputBoolean()
-], XTreeFileProperty.prototype, "showTree", void 0);
-__decorate([
-    XInputBoolean()
-], XTreeFileProperty.prototype, "showCrumb", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 37.5),
-    XInputNumber()
-], XTreeFileProperty.prototype, "maxHeight", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 1),
-    XInputNumber()
-], XTreeFileProperty.prototype, "spacing", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTreeFileProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeFileProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTreeFilePrefix}-property`, template: '' }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], domain: [{
-                type: Input
-            }], toggle: [{
-                type: Input
-            }], showToggle: [{
-                type: Input
-            }], showTree: [{
-                type: Input
-            }], showCrumb: [{
-                type: Input
-            }], maxHeight: [{
-                type: Input
-            }], spacing: [{
-                type: Input
-            }] } });
+        }] });
 /**
  * @zh_CN 支持显示的图片格式
  * @en_US Supported picture format
@@ -111,66 +101,59 @@ const XTreeFileImgs = ['webp', 'png', 'jpg', 'gif', 'jpeg', 'ico'];
 class XTreeFileComponent extends XTreeFileProperty {
     constructor() {
         super(...arguments);
-        this.loading = false;
+        this.activatedNode = signal(null);
+        this.loading = signal(false);
         this.timeout = 200;
-        this.cdr = inject(ChangeDetectorRef);
+        this.document = inject(DOCUMENT);
+        this.fontSize = computed(() => parseFloat(XComputedStyle(this.document.documentElement, 'font-size')));
+        this.codeHeight = computed(() => {
+            return XToCssPx(this.maxHeight(), this.fontSize()) - (this.showCrumb() ? 1.5 : 0) * this.fontSize();
+        });
+        this.crumbData = computed(() => {
+            return this.activatedNode()?.crumbData;
+        });
+        this.highlightLines = computed(() => {
+            return this.activatedNode()?.highlightLines;
+        });
         this.http = inject(HttpClient, { optional: true });
-        this.configService = inject(XConfigService);
-    }
-    get catalogHeight() {
-        return Number(this.maxHeight);
-    }
-    get codeHeight() {
-        return Number(this.maxHeight) - (Boolean(this.showCrumb) ? 1.5 : 0);
-    }
-    get getCrumbData() {
-        return this.activatedNode?.crumbData;
-    }
-    get getHighlightLines() {
-        return this.activatedNode?.highlightLines;
     }
     ngOnInit() {
         if (!this.http) {
             throw new Error(`${XTreeFilePrefix}: Not found 'HttpClient', You can import 'HttpClientModule' in your root module.`);
         }
-        if (!this.showTree && this.activatedId) {
-            this.catalogChange(this.data.find((x) => x.id == this.activatedId));
+        if (!this.showTree() && this.activatedId()) {
+            this.catalogChange(this.data().find((x) => x.id == this.activatedId()));
         }
     }
     catalogChange(node) {
-        if (!node?.leaf && this.showTree)
+        if (!node?.leaf && this.showTree())
             return;
         if (node.url && !node.contentLoaded) {
             this.time = new Date().getTime();
-            this.loading = true;
-            this.cdr.detectChanges();
-            this.activatedNode = node;
+            this.loading.set(true);
             this.setNode(node);
-            node.url = node.url?.indexOf(this.domain) === 0 ? node.url : `${this.domain}/${node.url}`;
+            this.activatedNode.set(node);
+            node.url = node.url?.indexOf(this.domain()) === 0 ? node.url : `${this.domain()}/${node.url}`;
             switch (node.fileType) {
                 case 'code':
                     this.http
                         .get(node.url, { responseType: 'text' })
                         .pipe(delay(new Date().getTime() - this.time > this.timeout ? 0 : this.timeout - new Date().getTime() + this.time), finalize(() => {
-                        this.loading = false;
-                        this.cdr.detectChanges();
+                        this.loading.set(false);
                     }))
                         .subscribe((x) => {
                         node.content = x;
                         node.contentLoaded = true;
-                        this.loading = false;
-                        this.cdr.detectChanges();
+                        this.loading.set(false);
                     });
                     break;
                 case 'img':
-                    this.cdr.detectChanges();
                     break;
             }
         }
         else {
-            this.activatedNode = node;
-            this.setNode(this.activatedNode);
-            this.cdr.detectChanges();
+            this.activatedNode.set(node);
+            this.setNode(this.activatedNode());
         }
     }
     setNode(node) {
@@ -185,15 +168,14 @@ class XTreeFileComponent extends XTreeFileProperty {
         }
     }
     imgOnload() {
-        this.loading = false;
-        this.cdr.detectChanges();
+        this.loading.set(false);
     }
     setCurmbData(node) {
         let crumbData = [{ id: node.id, label: node.label }];
         const getParent = (child) => {
             if (XIsEmpty(child.pid))
                 return;
-            const parent = this.data.find((x) => x.id === child.pid);
+            const parent = this.data().find((x) => x.id === child.pid);
             if (!XIsEmpty(parent)) {
                 crumbData = [{ id: parent.id, label: parent.label }, ...crumbData];
                 getParent(parent);
@@ -203,13 +185,12 @@ class XTreeFileComponent extends XTreeFileProperty {
         return crumbData;
     }
     menuToggle() {
-        this.toggle = !this.toggle;
-        this.cdr.detectChanges();
+        this.toggle.update((x) => !x);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTreeFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XTreeFileComponent, isStandalone: true, selector: "x-tree-file", usesInheritance: true, ngImport: i0, template: "<div #treeFile class=\"x-tree-file\" [ngClass]=\"classMap\" [class.x-tree-file-toggle]=\"toggle\">\r\n  @if (showTree) {\r\n    <div class=\"x-tree-file-catalog\" [style.max-height.rem]=\"catalogHeight\">\r\n      <x-tree\r\n        [data]=\"data\"\r\n        (activatedChange)=\"catalogChange($event)\"\r\n        nodeOpen\r\n        [expandedAll]=\"expandedAll\"\r\n        [expandedLevel]=\"expandedLevel\"\r\n        [expanded]=\"expanded\"\r\n        [spacing]=\"spacing\"\r\n        [activatedId]=\"activatedId\"\r\n      ></x-tree>\r\n    </div>\r\n  }\r\n  <div class=\"x-tree-file-body\" [x-loading]=\"loading\">\r\n    @if (showCrumb) {\r\n      <div class=\"x-tree-file-crumb\">\r\n        @if (showToggle && showTree) {\r\n          <x-link icon=\"fto-menu\" (click)=\"menuToggle()\"></x-link>\r\n        }\r\n        <x-crumb [data]=\"getCrumbData\" [separator]=\"separatorTpl\"></x-crumb>\r\n        <ng-template #separatorTpl>\r\n          <x-icon type=\"fto-chevron-right\"></x-icon>\r\n        </ng-template>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"x-tree-file-content\" [style.max-height.rem]=\"codeHeight\">\r\n      @switch (activatedNode?.fileType) {\r\n        @case ('img') {\r\n          <div class=\"x-tree-file-img\"><img [src]=\"activatedNode?.url\" (load)=\"imgOnload()\" /></div>\r\n        }\r\n        @case ('code') {\r\n          <x-highlight\r\n            [type]=\"activatedNode?.type\"\r\n            [data]=\"activatedNode?.content\"\r\n            [highlightLines]=\"getHighlightLines\"\r\n          ></x-highlight>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".x-tree-file{margin:0;padding:0;display:flex;background-color:var(--x-background);border-radius:var(--x-border-radius);border:var(--x-border-width) var(--x-border-style) var(--x-border);color:var(--x-text)}.x-tree-file-catalog{width:0;overflow:auto;opacity:0;font-size:.8125rem;transition:var(--x-animation-duration-slow)}.x-tree-file-catalog .x-tree{padding:.5rem}.x-tree-file-catalog .x-tree-node-content{height:1.375rem}.x-tree-file-catalog .x-tree-node-content:hover,.x-tree-file-catalog .x-tree-node-content.x-activated{background-color:var(--x-border)}.x-tree-file-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.x-tree-file-crumb{background-color:var(--x-background);display:flex}.x-tree-file-crumb>x-link{line-height:1.5rem;height:1.5rem;transition:var(--x-animation-duration-base)}.x-tree-file-crumb>x-link>a{padding:0 .5rem}.x-tree-file-crumb>x-crumb{flex:1}.x-tree-file-crumb>x-crumb>.x-crumb{padding:0 .5rem;color:var(--x-text-300)}.x-tree-file-crumb>x-crumb>.x-crumb .x-crumb-separator{margin:0 .125rem}.x-tree-file-content{flex:1;overflow:auto;transition:var(--x-animation-duration-slow);display:flex;min-height:3rem}.x-tree-file-content>x-highlight{border:none}.x-tree-file-content>x-highlight>pre{overflow:inherit}.x-tree-file-content>.x-tree-file-img{margin:auto;padding:1.5rem;display:flex;align-items:center}.x-tree-file-content>.x-tree-file-img>img{max-width:100%;height:auto;margin:auto;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);border-radius:var(--x-border-radius);background-color:var(--x-background-a100)}.x-tree-file-toggle>.x-tree-file-catalog{width:16rem;opacity:1;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XTreeComponent, selector: "x-tree" }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "component", type: XCrumbComponent, selector: "x-crumb" }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XLoadingComponent, selector: "x-loading, [x-loading]" }, { kind: "component", type: XHighlightComponent, selector: "x-highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XTreeFileComponent, isStandalone: true, selector: "x-tree-file", usesInheritance: true, ngImport: i0, template: "<div #treeFile class=\"x-tree-file\" [class.x-tree-file-toggle]=\"toggle()\">\r\n  @if (showTree()) {\r\n    <div class=\"x-tree-file-catalog\" [style.max-height]=\"maxHeight()\">\r\n      <x-tree\r\n        [data]=\"data()\"\r\n        (activatedChange)=\"catalogChange($event)\"\r\n        nodeOpen\r\n        [expandedAll]=\"expandedAll()\"\r\n        [expandedLevel]=\"expandedLevel()\"\r\n        [expanded]=\"expanded()\"\r\n        [spacing]=\"spacing()\"\r\n        [(activatedId)]=\"activatedId\"\r\n      ></x-tree>\r\n    </div>\r\n  }\r\n  <div class=\"x-tree-file-body\" [x-loading]=\"loading()\">\r\n    @if (showCrumb()) {\r\n      <div class=\"x-tree-file-crumb\">\r\n        @if (showToggle() && showTree()) {\r\n          <x-link icon=\"fto-menu\" (click)=\"menuToggle()\"></x-link>\r\n        }\r\n        <x-crumb [data]=\"crumbData()\" [separator]=\"separatorTpl\"></x-crumb>\r\n        <ng-template #separatorTpl>\r\n          <x-icon type=\"fto-chevron-right\"></x-icon>\r\n        </ng-template>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"x-tree-file-content\" [style.max-height.px]=\"codeHeight()\">\r\n      @switch (activatedNode()?.fileType) {\r\n        @case ('img') {\r\n          <div class=\"x-tree-file-img\"><img [src]=\"activatedNode()?.url\" (load)=\"imgOnload()\" /></div>\r\n        }\r\n        @case ('code') {\r\n          <x-highlight\r\n            [type]=\"activatedNode()?.type\"\r\n            [data]=\"activatedNode()?.content\"\r\n            [highlightLines]=\"highlightLines()\"\r\n          ></x-highlight>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".x-tree-file{margin:0;padding:0;display:flex;background-color:var(--x-background);border-radius:var(--x-border-radius);border:var(--x-border-width) var(--x-border-style) var(--x-border);color:var(--x-text)}.x-tree-file-catalog{width:0;overflow:auto;opacity:0;font-size:.8125rem;transition:var(--x-animation-duration-slow)}.x-tree-file-catalog .x-tree{padding:.5rem}.x-tree-file-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.x-tree-file-crumb{background-color:var(--x-background);border-top-left-radius:var(--x-border-radius);border-top-right-radius:var(--x-border-radius);display:flex}.x-tree-file-crumb>x-link{line-height:1.75rem;height:1.75rem;transition:var(--x-animation-duration-base)}.x-tree-file-crumb>x-link>a{padding:0 .5rem}.x-tree-file-crumb>x-crumb{flex:1}.x-tree-file-crumb>x-crumb>.x-crumb{padding:0 .5rem;color:var(--x-text-300)}.x-tree-file-crumb>x-crumb>.x-crumb .x-crumb-separator{margin:0 .125rem}.x-tree-file-content{flex:1;overflow:auto;transition:var(--x-animation-duration-slow);display:flex;min-height:3rem}.x-tree-file-content>x-highlight{border:none}.x-tree-file-content>x-highlight>pre{overflow:inherit}.x-tree-file-content>.x-tree-file-img{margin:auto;padding:1.5rem;display:flex;align-items:center}.x-tree-file-content>.x-tree-file-img>img{max-width:100%;height:auto;margin:auto;box-shadow:var(--x-box-shadow);border-radius:var(--x-border-radius);background-color:var(--x-background-a100)}.x-tree-file-toggle>.x-tree-file-catalog{width:16rem;opacity:1;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}\n"], dependencies: [{ kind: "component", type: XTreeComponent, selector: "x-tree" }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "component", type: XCrumbComponent, selector: "x-crumb" }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XLoadingComponent, selector: "x-loading, [x-loading]" }, { kind: "component", type: XHighlightComponent, selector: "x-highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTreeFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeFileComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTreeFilePrefix}`, standalone: true, imports: [
                         NgClass,
@@ -219,15 +200,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         XIconComponent,
                         XLoadingComponent,
                         XHighlightComponent
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #treeFile class=\"x-tree-file\" [ngClass]=\"classMap\" [class.x-tree-file-toggle]=\"toggle\">\r\n  @if (showTree) {\r\n    <div class=\"x-tree-file-catalog\" [style.max-height.rem]=\"catalogHeight\">\r\n      <x-tree\r\n        [data]=\"data\"\r\n        (activatedChange)=\"catalogChange($event)\"\r\n        nodeOpen\r\n        [expandedAll]=\"expandedAll\"\r\n        [expandedLevel]=\"expandedLevel\"\r\n        [expanded]=\"expanded\"\r\n        [spacing]=\"spacing\"\r\n        [activatedId]=\"activatedId\"\r\n      ></x-tree>\r\n    </div>\r\n  }\r\n  <div class=\"x-tree-file-body\" [x-loading]=\"loading\">\r\n    @if (showCrumb) {\r\n      <div class=\"x-tree-file-crumb\">\r\n        @if (showToggle && showTree) {\r\n          <x-link icon=\"fto-menu\" (click)=\"menuToggle()\"></x-link>\r\n        }\r\n        <x-crumb [data]=\"getCrumbData\" [separator]=\"separatorTpl\"></x-crumb>\r\n        <ng-template #separatorTpl>\r\n          <x-icon type=\"fto-chevron-right\"></x-icon>\r\n        </ng-template>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"x-tree-file-content\" [style.max-height.rem]=\"codeHeight\">\r\n      @switch (activatedNode?.fileType) {\r\n        @case ('img') {\r\n          <div class=\"x-tree-file-img\"><img [src]=\"activatedNode?.url\" (load)=\"imgOnload()\" /></div>\r\n        }\r\n        @case ('code') {\r\n          <x-highlight\r\n            [type]=\"activatedNode?.type\"\r\n            [data]=\"activatedNode?.content\"\r\n            [highlightLines]=\"getHighlightLines\"\r\n          ></x-highlight>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".x-tree-file{margin:0;padding:0;display:flex;background-color:var(--x-background);border-radius:var(--x-border-radius);border:var(--x-border-width) var(--x-border-style) var(--x-border);color:var(--x-text)}.x-tree-file-catalog{width:0;overflow:auto;opacity:0;font-size:.8125rem;transition:var(--x-animation-duration-slow)}.x-tree-file-catalog .x-tree{padding:.5rem}.x-tree-file-catalog .x-tree-node-content{height:1.375rem}.x-tree-file-catalog .x-tree-node-content:hover,.x-tree-file-catalog .x-tree-node-content.x-activated{background-color:var(--x-border)}.x-tree-file-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.x-tree-file-crumb{background-color:var(--x-background);display:flex}.x-tree-file-crumb>x-link{line-height:1.5rem;height:1.5rem;transition:var(--x-animation-duration-base)}.x-tree-file-crumb>x-link>a{padding:0 .5rem}.x-tree-file-crumb>x-crumb{flex:1}.x-tree-file-crumb>x-crumb>.x-crumb{padding:0 .5rem;color:var(--x-text-300)}.x-tree-file-crumb>x-crumb>.x-crumb .x-crumb-separator{margin:0 .125rem}.x-tree-file-content{flex:1;overflow:auto;transition:var(--x-animation-duration-slow);display:flex;min-height:3rem}.x-tree-file-content>x-highlight{border:none}.x-tree-file-content>x-highlight>pre{overflow:inherit}.x-tree-file-content>.x-tree-file-img{margin:auto;padding:1.5rem;display:flex;align-items:center}.x-tree-file-content>.x-tree-file-img>img{max-width:100%;height:auto;margin:auto;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);border-radius:var(--x-border-radius);background-color:var(--x-background-a100)}.x-tree-file-toggle>.x-tree-file-catalog{width:16rem;opacity:1;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #treeFile class=\"x-tree-file\" [class.x-tree-file-toggle]=\"toggle()\">\r\n  @if (showTree()) {\r\n    <div class=\"x-tree-file-catalog\" [style.max-height]=\"maxHeight()\">\r\n      <x-tree\r\n        [data]=\"data()\"\r\n        (activatedChange)=\"catalogChange($event)\"\r\n        nodeOpen\r\n        [expandedAll]=\"expandedAll()\"\r\n        [expandedLevel]=\"expandedLevel()\"\r\n        [expanded]=\"expanded()\"\r\n        [spacing]=\"spacing()\"\r\n        [(activatedId)]=\"activatedId\"\r\n      ></x-tree>\r\n    </div>\r\n  }\r\n  <div class=\"x-tree-file-body\" [x-loading]=\"loading()\">\r\n    @if (showCrumb()) {\r\n      <div class=\"x-tree-file-crumb\">\r\n        @if (showToggle() && showTree()) {\r\n          <x-link icon=\"fto-menu\" (click)=\"menuToggle()\"></x-link>\r\n        }\r\n        <x-crumb [data]=\"crumbData()\" [separator]=\"separatorTpl\"></x-crumb>\r\n        <ng-template #separatorTpl>\r\n          <x-icon type=\"fto-chevron-right\"></x-icon>\r\n        </ng-template>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"x-tree-file-content\" [style.max-height.px]=\"codeHeight()\">\r\n      @switch (activatedNode()?.fileType) {\r\n        @case ('img') {\r\n          <div class=\"x-tree-file-img\"><img [src]=\"activatedNode()?.url\" (load)=\"imgOnload()\" /></div>\r\n        }\r\n        @case ('code') {\r\n          <x-highlight\r\n            [type]=\"activatedNode()?.type\"\r\n            [data]=\"activatedNode()?.content\"\r\n            [highlightLines]=\"highlightLines()\"\r\n          ></x-highlight>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".x-tree-file{margin:0;padding:0;display:flex;background-color:var(--x-background);border-radius:var(--x-border-radius);border:var(--x-border-width) var(--x-border-style) var(--x-border);color:var(--x-text)}.x-tree-file-catalog{width:0;overflow:auto;opacity:0;font-size:.8125rem;transition:var(--x-animation-duration-slow)}.x-tree-file-catalog .x-tree{padding:.5rem}.x-tree-file-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.x-tree-file-crumb{background-color:var(--x-background);border-top-left-radius:var(--x-border-radius);border-top-right-radius:var(--x-border-radius);display:flex}.x-tree-file-crumb>x-link{line-height:1.75rem;height:1.75rem;transition:var(--x-animation-duration-base)}.x-tree-file-crumb>x-link>a{padding:0 .5rem}.x-tree-file-crumb>x-crumb{flex:1}.x-tree-file-crumb>x-crumb>.x-crumb{padding:0 .5rem;color:var(--x-text-300)}.x-tree-file-crumb>x-crumb>.x-crumb .x-crumb-separator{margin:0 .125rem}.x-tree-file-content{flex:1;overflow:auto;transition:var(--x-animation-duration-slow);display:flex;min-height:3rem}.x-tree-file-content>x-highlight{border:none}.x-tree-file-content>x-highlight>pre{overflow:inherit}.x-tree-file-content>.x-tree-file-img{margin:auto;padding:1.5rem;display:flex;align-items:center}.x-tree-file-content>.x-tree-file-img>img{max-width:100%;height:auto;margin:auto;box-shadow:var(--x-box-shadow);border-radius:var(--x-border-radius);background-color:var(--x-background-a100)}.x-tree-file-toggle>.x-tree-file-catalog{width:16rem;opacity:1;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}\n"] }]
         }] });
 
 class XTreeFileModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTreeFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XTreeFileModule, imports: [XTreeFileComponent], exports: [XTreeFileComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTreeFileModule, imports: [XTreeFileComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XTreeFileModule, imports: [XTreeFileComponent], exports: [XTreeFileComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeFileModule, imports: [XTreeFileComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTreeFileModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeFileModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XTreeFileComponent],

package/fesm2022/ng-nest-ui-tree-file.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-tree-file.mjs","sources":["../../../../lib/ng-nest/ui/tree-file/tree-file.property.ts","../../../../lib/ng-nest/ui/tree-file/tree-file.component.ts","../../../../lib/ng-nest/ui/tree-file/tree-file.component.html","../../../../lib/ng-nest/ui/tree-file/tree-file.module.ts","../../../../lib/ng-nest/ui/tree-file/ng-nest-ui-tree-file.ts"],"sourcesContent":["import { XDataConvert, XData, XInputBoolean, XBoolean, XInputNumber, XNumber, XWithConfig } from '@ng-nest/ui/core';\r\nimport { Component, Input } from '@angular/core';\r\nimport { XTreeNode, XTreeProperty } from '@ng-nest/ui/tree';\r\nimport { XCrumbNode } from '@ng-nest/ui/crumb';\r\nimport { XHighlightLines } from '@ng-nest/ui/highlight';\r\n\r\n/**\r\n * TreeFile\r\n * @selector x-tree-file\r\n * @decorator component\r\n */\r\nexport const XTreeFilePrefix = 'x-tree-file';\r\nconst X_CONFIG_NAME = 'treeFile';\r\n\r\n/**\r\n * TreeFile Property\r\n */\r\n@Component({ selector: `${XTreeFilePrefix}-property`, template: '' })\r\nexport class XTreeFileProperty extends XTreeProperty {\r\n  /**\r\n   * @zh_CN 节点数据\r\n   * @en_US Node data\r\n   */\r\n  @Input() @XDataConvert() override data: XData<XTreeFileNode> = [];\r\n  /**\r\n   * @zh_CN 文件绝对路径地址前缀，为空表示取当前运行的地址\r\n   * @en_US File absolute path address prefix, empty means to take the address of the current operation\r\n   */\r\n  @Input() domain: string = '';\r\n  /**\r\n   * @zh_CN 切换状态\r\n   * @en_US Switch state\r\n   */\r\n  @Input() @XInputBoolean() toggle: XBoolean = true;\r\n  /**\r\n   * @zh_CN 显示切换按钮\r\n   * @en_US Show toggle button\r\n   */\r\n  @Input() @XInputBoolean() showToggle: XBoolean = true;\r\n  /**\r\n   * @zh_CN 显示树，为 true 的时候隐藏切换按钮\r\n   * @en_US Show the tree, hide the toggle button when true\r\n   */\r\n  @Input() @XInputBoolean() showTree: XBoolean = true;\r\n  /**\r\n   * @zh_CN 显示面包屑\r\n   * @en_US Show breadcrumbs\r\n   */\r\n  @Input() @XInputBoolean() showCrumb: XBoolean = true;\r\n  /**\r\n   * @zh_CN 最大高度，单位 rem\r\n   * @en_US Maximum height, unit rem\r\n   */\r\n  @Input() @XWithConfig<XNumber>(X_CONFIG_NAME, 37.5) @XInputNumber() maxHeight?: XNumber;\r\n  /**\r\n   * @zh_CN 单位间距，这个与层级的乘积算出节点的左边距，单位 rem\r\n   * @en_US Unit spacing, the product of this and the level calculates the left margin of the node, the unit is rem\r\n   */\r\n  @Input() @XWithConfig<XNumber>(X_CONFIG_NAME, 1) @XInputNumber() override spacing?: XNumber;\r\n}\r\n\r\n/**\r\n * @zh_CN TreeFile 数据对象\r\n * @en_US TreeFile data object\r\n */\r\nexport interface XTreeFileNode extends XTreeNode {\r\n  /**\r\n   * @zh_CN 子节点\r\n   * @en_US Child node\r\n   */\r\n  children?: XTreeFileNode[];\r\n  /**\r\n   * @zh_CN 文件内容\r\n   * @en_US Document content\r\n   */\r\n  content?: string;\r\n  /**\r\n   * @zh_CN 文件类型\r\n   * @en_US File type\r\n   */\r\n  type?: string;\r\n  /**\r\n   * @zh_CN 文件分类\r\n   * @en_US File classification\r\n   */\r\n  fileType?: XTreeFileType;\r\n  /**\r\n   * @zh_CN 文件地址，配置了地址将从 url 中加载文件内容\r\n   * @en_US File address, the configured address will load the file content from url\r\n   */\r\n  url?: string;\r\n  /**\r\n   * @zh_CN 文件的面包屑数据\r\n   * @en_US Breadcrumb data\r\n   */\r\n  crumbData?: XCrumbNode[];\r\n  /**\r\n   * @zh_CN 文件内容已经加载过\r\n   * @en_US File content has been loaded\r\n   */\r\n  contentLoaded?: boolean;\r\n  /**\r\n   * @zh_CN 行高亮着色\r\n   * @en_US Line highlight coloring\r\n   */\r\n  highlightLines?: XHighlightLines;\r\n}\r\n\r\n/**\r\n * @zh_CN 文件分类\r\n * @en_US File classification\r\n */\r\nexport type XTreeFileType = 'code' | 'img';\r\n\r\n/**\r\n * @zh_CN 支持显示的图片格式\r\n * @en_US Supported picture format\r\n */\r\nexport const XTreeFileImgs = ['webp', 'png', 'jpg', 'gif', 'jpeg', 'ico'];\r\n","import { Component, ViewEncapsulation, ChangeDetectorRef, ChangeDetectionStrategy, inject } from '@angular/core';\r\nimport { XTreeFilePrefix, XTreeFileProperty, XTreeFileNode, XTreeFileImgs } from './tree-file.property';\r\nimport { HttpClient } from '@angular/common/http';\r\nimport { XIsEmpty, XConfigService } from '@ng-nest/ui/core';\r\nimport { XCrumbComponent, XCrumbNode } from '@ng-nest/ui/crumb';\r\nimport { delay, finalize } from 'rxjs/operators';\r\nimport { XHighlightComponent, XHighlightLines } from '@ng-nest/ui/highlight';\r\nimport { NgClass } from '@angular/common';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XLinkComponent } from '@ng-nest/ui/link';\r\nimport { XLoadingComponent } from '@ng-nest/ui/loading';\r\nimport { XTreeComponent } from '@ng-nest/ui/tree';\r\n\r\n@Component({\r\n  selector: `${XTreeFilePrefix}`,\r\n  standalone: true,\r\n  imports: [\r\n    NgClass,\r\n    XTreeComponent,\r\n    XLinkComponent,\r\n    XCrumbComponent,\r\n    XIconComponent,\r\n    XLoadingComponent,\r\n    XHighlightComponent\r\n  ],\r\n  templateUrl: './tree-file.component.html',\r\n  styleUrls: ['./tree-file.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XTreeFileComponent extends XTreeFileProperty {\r\n  activatedNode?: XTreeFileNode;\r\n  loading: boolean = false;\r\n  time!: number;\r\n  timeout: number = 200;\r\n\r\n  get catalogHeight() {\r\n    return Number(this.maxHeight);\r\n  }\r\n\r\n  get codeHeight() {\r\n    return Number(this.maxHeight) - (Boolean(this.showCrumb) ? 1.5 : 0);\r\n  }\r\n\r\n  get getCrumbData() {\r\n    return this.activatedNode?.crumbData as XCrumbNode[];\r\n  }\r\n\r\n  get getHighlightLines() {\r\n    return this.activatedNode?.highlightLines as XHighlightLines;\r\n  }\r\n\r\n  private cdr = inject(ChangeDetectorRef);\r\n  private http = inject(HttpClient, { optional: true })!;\r\n  configService = inject(XConfigService);\r\n\r\n  ngOnInit() {\r\n    if (!this.http) {\r\n      throw new Error(\r\n        `${XTreeFilePrefix}: Not found 'HttpClient', You can import 'HttpClientModule' in your root module.`\r\n      );\r\n    }\r\n    if (!this.showTree && this.activatedId) {\r\n      this.catalogChange((this.data as XTreeFileNode[]).find((x) => x.id == this.activatedId) as XTreeFileNode);\r\n    }\r\n  }\r\n\r\n  catalogChange(node: XTreeFileNode) {\r\n    if (!node?.leaf && this.showTree) return;\r\n    if (node.url && !node.contentLoaded) {\r\n      this.time = new Date().getTime();\r\n      this.loading = true;\r\n      this.cdr.detectChanges();\r\n      this.activatedNode = node;\r\n      this.setNode(node);\r\n      node.url = node.url?.indexOf(this.domain) === 0 ? node.url : `${this.domain}/${node.url}`;\r\n      switch (node.fileType) {\r\n        case 'code':\r\n          this.http\r\n            .get(node.url, { responseType: 'text' })\r\n            .pipe(\r\n              delay(\r\n                new Date().getTime() - this.time > this.timeout ? 0 : this.timeout - new Date().getTime() + this.time\r\n              ),\r\n              finalize(() => {\r\n                this.loading = false;\r\n                this.cdr.detectChanges();\r\n              })\r\n            )\r\n            .subscribe((x) => {\r\n              node.content = x;\r\n              node.contentLoaded = true;\r\n              this.loading = false;\r\n              this.cdr.detectChanges();\r\n            });\r\n          break;\r\n        case 'img':\r\n          this.cdr.detectChanges();\r\n          break;\r\n      }\r\n    } else {\r\n      this.activatedNode = node;\r\n      this.setNode(this.activatedNode);\r\n      this.cdr.detectChanges();\r\n    }\r\n  }\r\n\r\n  setNode(node: XTreeFileNode) {\r\n    if (!node.type) {\r\n      node.type = 'bash';\r\n    }\r\n    if (!node.fileType) {\r\n      node.fileType = XTreeFileImgs.indexOf((node.type as string).toLowerCase()) !== -1 ? 'img' : 'code';\r\n    }\r\n    if (!node.crumbData) {\r\n      node.crumbData = this.setCurmbData(node);\r\n    }\r\n  }\r\n\r\n  imgOnload() {\r\n    this.loading = false;\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  setCurmbData(node: XTreeFileNode) {\r\n    let crumbData: XCrumbNode[] = [{ id: node.id, label: node.label }];\r\n    const getParent = (child: XTreeFileNode) => {\r\n      if (XIsEmpty(child.pid)) return;\r\n      const parent = (this.data as XTreeFileNode[]).find((x) => x.id === child.pid) as XTreeFileNode;\r\n      if (!XIsEmpty(parent)) {\r\n        crumbData = [{ id: parent.id, label: parent.label }, ...crumbData];\r\n        getParent(parent);\r\n      }\r\n    };\r\n    getParent(node);\r\n\r\n    return crumbData;\r\n  }\r\n\r\n  menuToggle() {\r\n    this.toggle = !this.toggle;\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n","<div #treeFile class=\"x-tree-file\" [ngClass]=\"classMap\" [class.x-tree-file-toggle]=\"toggle\">\r\n  @if (showTree) {\r\n    <div class=\"x-tree-file-catalog\" [style.max-height.rem]=\"catalogHeight\">\r\n      <x-tree\r\n        [data]=\"data\"\r\n        (activatedChange)=\"catalogChange($event)\"\r\n        nodeOpen\r\n        [expandedAll]=\"expandedAll\"\r\n        [expandedLevel]=\"expandedLevel\"\r\n        [expanded]=\"expanded\"\r\n        [spacing]=\"spacing\"\r\n        [activatedId]=\"activatedId\"\r\n      ></x-tree>\r\n    </div>\r\n  }\r\n  <div class=\"x-tree-file-body\" [x-loading]=\"loading\">\r\n    @if (showCrumb) {\r\n      <div class=\"x-tree-file-crumb\">\r\n        @if (showToggle && showTree) {\r\n          <x-link icon=\"fto-menu\" (click)=\"menuToggle()\"></x-link>\r\n        }\r\n        <x-crumb [data]=\"getCrumbData\" [separator]=\"separatorTpl\"></x-crumb>\r\n        <ng-template #separatorTpl>\r\n          <x-icon type=\"fto-chevron-right\"></x-icon>\r\n        </ng-template>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"x-tree-file-content\" [style.max-height.rem]=\"codeHeight\">\r\n      @switch (activatedNode?.fileType) {\r\n        @case ('img') {\r\n          <div class=\"x-tree-file-img\"><img [src]=\"activatedNode?.url\" (load)=\"imgOnload()\" /></div>\r\n        }\r\n        @case ('code') {\r\n          <x-highlight\r\n            [type]=\"activatedNode?.type\"\r\n            [data]=\"activatedNode?.content\"\r\n            [highlightLines]=\"getHighlightLines\"\r\n          ></x-highlight>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XTreeFileComponent } from './tree-file.component';\r\n\r\n@NgModule({\r\n  exports: [XTreeFileComponent],\r\n  imports: [XTreeFileComponent]\r\n})\r\nexport class XTreeFileModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-nest-ui-tree-file.mjs","sources":["../../../../lib/ng-nest/ui/tree-file/tree-file.property.ts","../../../../lib/ng-nest/ui/tree-file/tree-file.component.ts","../../../../lib/ng-nest/ui/tree-file/tree-file.component.html","../../../../lib/ng-nest/ui/tree-file/tree-file.module.ts","../../../../lib/ng-nest/ui/tree-file/ng-nest-ui-tree-file.ts"],"sourcesContent":["import { XPropertyFunction, XToBoolean, XToCssPixelValue, XToNumber } from '@ng-nest/ui/core';\r\nimport { Component, input, model } from '@angular/core';\r\nimport { XTreeNode } from '@ng-nest/ui/tree';\r\nimport { XCrumbNode } from '@ng-nest/ui/crumb';\r\nimport { XHighlightLines } from '@ng-nest/ui/highlight';\r\nimport type { XData, XBoolean, XNumber } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * TreeFile\r\n * @selector x-tree-file\r\n * @decorator component\r\n */\r\nexport const XTreeFilePrefix = 'x-tree-file';\r\nconst X_TREE_FILE_CONFIG_NAME = 'treeFile';\r\n\r\n/**\r\n * TreeFile Property\r\n */\r\n@Component({ selector: `${XTreeFilePrefix}-property`, template: '' })\r\nexport class XTreeFileProperty extends XPropertyFunction(X_TREE_FILE_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 节点数据\r\n   * @en_US Node data\r\n   */\r\n  readonly data = input<XData<XTreeFileNode>>([]);\r\n  /**\r\n   * @zh_CN 文件绝对路径地址前缀，为空表示取当前运行的地址\r\n   * @en_US File absolute path address prefix, empty means to take the address of the current operation\r\n   */\r\n  readonly domain = input<string>('');\r\n  /**\r\n   * @zh_CN 切换状态\r\n   * @en_US Switch state\r\n   */\r\n  readonly toggle = model<boolean>(true);\r\n  /**\r\n   * @zh_CN 显示切换按钮\r\n   * @en_US Show toggle button\r\n   */\r\n  readonly showToggle = input<boolean, XBoolean>(true, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 显示树，为 true 的时候隐藏切换按钮\r\n   * @en_US Show the tree, hide the toggle button when true\r\n   */\r\n  readonly showTree = input<boolean, XBoolean>(true, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 显示面包屑\r\n   * @en_US Show breadcrumbs\r\n   */\r\n  readonly showCrumb = input<boolean, XBoolean>(true, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 最大高度\r\n   * @en_US Maximum height\r\n   */\r\n  readonly maxHeight = input<string, XNumber>(this.config?.maxHeight ?? '37.5rem', { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN 单位间距，这个与层级的乘积算出节点的左边距\r\n   * @en_US Unit spacing, the product of this and the level calculates the left margin of the node\r\n   */\r\n  readonly spacing = input<string, XNumber>(this.config?.spacing ?? '1rem', { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN 当前激活的节点 Id, 当 multiple 为 true 时，值为数组（默认是 Id 数组，objectArray 为 true，对象数组）\r\n   * @en_US Currently active node Id. When Multiple is true, the value is the Id array\r\n   */\r\n  readonly activatedId = model<any>();\r\n  /**\r\n   * @zh_CN 展开的节点\r\n   * @en_US Expanded node\r\n   */\r\n  readonly expanded = input<any[]>([]);\r\n  /**\r\n   * @zh_CN 展开所有节点\r\n   * @en_US Expand all nodes\r\n   */\r\n  readonly expandedAll = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 默认展开的层级\r\n   * @en_US Default expanded level\r\n   */\r\n  readonly expandedLevel = input<number, XNumber>(-1, { transform: XToNumber });\r\n}\r\n\r\n/**\r\n * @zh_CN TreeFile 数据对象\r\n * @en_US TreeFile data object\r\n */\r\nexport interface XTreeFileNode extends XTreeNode {\r\n  /**\r\n   * @zh_CN 子节点\r\n   * @en_US Child node\r\n   */\r\n  children?: XTreeFileNode[];\r\n  /**\r\n   * @zh_CN 文件内容\r\n   * @en_US Document content\r\n   */\r\n  content?: string;\r\n  /**\r\n   * @zh_CN 文件类型\r\n   * @en_US File type\r\n   */\r\n  type?: string;\r\n  /**\r\n   * @zh_CN 文件分类\r\n   * @en_US File classification\r\n   */\r\n  fileType?: XTreeFileType;\r\n  /**\r\n   * @zh_CN 文件地址，配置了地址将从 url 中加载文件内容\r\n   * @en_US File address, the configured address will load the file content from url\r\n   */\r\n  url?: string;\r\n  /**\r\n   * @zh_CN 文件的面包屑数据\r\n   * @en_US Breadcrumb data\r\n   */\r\n  crumbData?: XCrumbNode[];\r\n  /**\r\n   * @zh_CN 文件内容已经加载过\r\n   * @en_US File content has been loaded\r\n   */\r\n  contentLoaded?: boolean;\r\n  /**\r\n   * @zh_CN 行高亮着色\r\n   * @en_US Line highlight coloring\r\n   */\r\n  highlightLines?: XHighlightLines;\r\n}\r\n\r\n/**\r\n * @zh_CN 文件分类\r\n * @en_US File classification\r\n */\r\nexport type XTreeFileType = 'code' | 'img';\r\n\r\n/**\r\n * @zh_CN 支持显示的图片格式\r\n * @en_US Supported picture format\r\n */\r\nexport const XTreeFileImgs = ['webp', 'png', 'jpg', 'gif', 'jpeg', 'ico'];\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, inject, computed, signal } from '@angular/core';\r\nimport { XTreeFilePrefix, XTreeFileProperty, XTreeFileNode, XTreeFileImgs } from './tree-file.property';\r\nimport { HttpClient } from '@angular/common/http';\r\nimport { XIsEmpty, XComputedStyle, XToCssPx } from '@ng-nest/ui/core';\r\nimport { XCrumbComponent, XCrumbNode } from '@ng-nest/ui/crumb';\r\nimport { delay, finalize } from 'rxjs/operators';\r\nimport { XHighlightComponent, XHighlightLines } from '@ng-nest/ui/highlight';\r\nimport { DOCUMENT, NgClass } from '@angular/common';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XLinkComponent } from '@ng-nest/ui/link';\r\nimport { XLoadingComponent } from '@ng-nest/ui/loading';\r\nimport { XTreeComponent } from '@ng-nest/ui/tree';\r\n\r\n@Component({\r\n  selector: `${XTreeFilePrefix}`,\r\n  standalone: true,\r\n  imports: [\r\n    NgClass,\r\n    XTreeComponent,\r\n    XLinkComponent,\r\n    XCrumbComponent,\r\n    XIconComponent,\r\n    XLoadingComponent,\r\n    XHighlightComponent\r\n  ],\r\n  templateUrl: './tree-file.component.html',\r\n  styleUrls: ['./tree-file.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XTreeFileComponent extends XTreeFileProperty {\r\n  activatedNode = signal<XTreeFileNode | null>(null);\r\n  loading = signal(false);\r\n  time!: number;\r\n  timeout: number = 200;\r\n  private document = inject(DOCUMENT);\r\n  private fontSize = computed(() => parseFloat(XComputedStyle(this.document.documentElement, 'font-size')));\r\n\r\n  codeHeight = computed(() => {\r\n    return XToCssPx(this.maxHeight(), this.fontSize()) - (this.showCrumb() ? 1.5 : 0) * this.fontSize();\r\n  });\r\n\r\n  crumbData = computed(() => {\r\n    return this.activatedNode()?.crumbData as XCrumbNode[];\r\n  });\r\n\r\n  highlightLines = computed(() => {\r\n    return this.activatedNode()?.highlightLines as XHighlightLines;\r\n  });\r\n\r\n  private http = inject(HttpClient, { optional: true })!;\r\n\r\n  ngOnInit() {\r\n    if (!this.http) {\r\n      throw new Error(\r\n        `${XTreeFilePrefix}: Not found 'HttpClient', You can import 'HttpClientModule' in your root module.`\r\n      );\r\n    }\r\n    if (!this.showTree() && this.activatedId()) {\r\n      this.catalogChange((this.data() as XTreeFileNode[]).find((x) => x.id == this.activatedId()) as XTreeFileNode);\r\n    }\r\n  }\r\n\r\n  catalogChange(node: XTreeFileNode) {\r\n    if (!node?.leaf && this.showTree()) return;\r\n    if (node.url && !node.contentLoaded) {\r\n      this.time = new Date().getTime();\r\n      this.loading.set(true);\r\n      this.setNode(node);\r\n      this.activatedNode.set(node);\r\n      node.url = node.url?.indexOf(this.domain()) === 0 ? node.url : `${this.domain()}/${node.url}`;\r\n\r\n      switch (node.fileType) {\r\n        case 'code':\r\n          this.http\r\n            .get(node.url, { responseType: 'text' })\r\n            .pipe(\r\n              delay(\r\n                new Date().getTime() - this.time > this.timeout ? 0 : this.timeout - new Date().getTime() + this.time\r\n              ),\r\n              finalize(() => {\r\n                this.loading.set(false);\r\n              })\r\n            )\r\n            .subscribe((x) => {\r\n              node.content = x;\r\n              node.contentLoaded = true;\r\n              this.loading.set(false);\r\n            });\r\n          break;\r\n        case 'img':\r\n          break;\r\n      }\r\n    } else {\r\n      this.activatedNode.set(node);\r\n      this.setNode(this.activatedNode()!);\r\n    }\r\n  }\r\n\r\n  setNode(node: XTreeFileNode) {\r\n    if (!node.type) {\r\n      node.type = 'bash';\r\n    }\r\n    if (!node.fileType) {\r\n      node.fileType = XTreeFileImgs.indexOf((node.type as string).toLowerCase()) !== -1 ? 'img' : 'code';\r\n    }\r\n    if (!node.crumbData) {\r\n      node.crumbData = this.setCurmbData(node);\r\n    }\r\n  }\r\n\r\n  imgOnload() {\r\n    this.loading.set(false);\r\n  }\r\n\r\n  setCurmbData(node: XTreeFileNode) {\r\n    let crumbData: XCrumbNode[] = [{ id: node.id, label: node.label }];\r\n    const getParent = (child: XTreeFileNode) => {\r\n      if (XIsEmpty(child.pid)) return;\r\n      const parent = (this.data() as XTreeFileNode[]).find((x) => x.id === child.pid) as XTreeFileNode;\r\n      if (!XIsEmpty(parent)) {\r\n        crumbData = [{ id: parent.id, label: parent.label }, ...crumbData];\r\n        getParent(parent);\r\n      }\r\n    };\r\n    getParent(node);\r\n\r\n    return crumbData;\r\n  }\r\n\r\n  menuToggle() {\r\n    this.toggle.update((x) => !x);\r\n  }\r\n}\r\n","<div #treeFile class=\"x-tree-file\" [class.x-tree-file-toggle]=\"toggle()\">\r\n  @if (showTree()) {\r\n    <div class=\"x-tree-file-catalog\" [style.max-height]=\"maxHeight()\">\r\n      <x-tree\r\n        [data]=\"data()\"\r\n        (activatedChange)=\"catalogChange($event)\"\r\n        nodeOpen\r\n        [expandedAll]=\"expandedAll()\"\r\n        [expandedLevel]=\"expandedLevel()\"\r\n        [expanded]=\"expanded()\"\r\n        [spacing]=\"spacing()\"\r\n        [(activatedId)]=\"activatedId\"\r\n      ></x-tree>\r\n    </div>\r\n  }\r\n  <div class=\"x-tree-file-body\" [x-loading]=\"loading()\">\r\n    @if (showCrumb()) {\r\n      <div class=\"x-tree-file-crumb\">\r\n        @if (showToggle() && showTree()) {\r\n          <x-link icon=\"fto-menu\" (click)=\"menuToggle()\"></x-link>\r\n        }\r\n        <x-crumb [data]=\"crumbData()\" [separator]=\"separatorTpl\"></x-crumb>\r\n        <ng-template #separatorTpl>\r\n          <x-icon type=\"fto-chevron-right\"></x-icon>\r\n        </ng-template>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"x-tree-file-content\" [style.max-height.px]=\"codeHeight()\">\r\n      @switch (activatedNode()?.fileType) {\r\n        @case ('img') {\r\n          <div class=\"x-tree-file-img\"><img [src]=\"activatedNode()?.url\" (load)=\"imgOnload()\" /></div>\r\n        }\r\n        @case ('code') {\r\n          <x-highlight\r\n            [type]=\"activatedNode()?.type\"\r\n            [data]=\"activatedNode()?.content\"\r\n            [highlightLines]=\"highlightLines()\"\r\n          ></x-highlight>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XTreeFileComponent } from './tree-file.component';\r\n\r\n@NgModule({\r\n  exports: [XTreeFileComponent],\r\n  imports: [XTreeFileComponent]\r\n})\r\nexport class XTreeFileModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}