@dignite-ng/expand.file-explorer 3.0.0-rc.8 → 3.0.1

package/fesm2022/dignite-ng-expand.file-explorer.mjs

@@ -1,28 +1,40 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, EventEmitter, ViewChild, Output, inject, NgModule, ChangeDetectorRef } from '@angular/core';
+import { Pipe, Input, Component, EventEmitter, ViewChild, Output, Injectable, inject, NgModule, ChangeDetectorRef } from '@angular/core';
 import * as i3 from '@abp/ng.core';
 import { ListService, LIST_QUERY_DEBOUNCE_TIME, ConfigStateService, EnvironmentService, CoreModule } from '@abp/ng.core';
 import * as i2$1 from '@abp/ng.theme.shared';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import * as i1 from '@angular/forms';
-import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i8 from '@ng-bootstrap/ng-bootstrap';
+import * as i1$1 from '@angular/forms';
+import { Validators, FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i9 from 'ng-zorro-antd/tree';
 import { NzTreeModule } from 'ng-zorro-antd/tree';
 import * as i3$1 from '@ngx-validate/core';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
-import * as i1$1 from '@angular/router';
+import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i2 from '@angular/common';
+import * as i2 from '@dignite-ng/expand.core';
+import { ValidatorsService } from '@dignite-ng/expand.core';
+import * as i5 from '@angular/common';
+import * as i3$2 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i6 from '@swimlane/ngx-datatable';
 import { SelectionType } from '@swimlane/ngx-datatable';
-import { of } from 'rxjs';
+import { tap, map, of, finalize } from 'rxjs';
+import * as i8 from '@abp/ng.components/tree';
+import { TreeModule } from '@abp/ng.components/tree';
 
-class FileApiService {
-    constructor() { }
+/**
+ * 转换文件大小单位 输入k
+ * @description 用于转换文件大小单位 输入k
+ * @returns {string} 文件大小单位 输入k
+ */
+class FormatFileSizePipe {
+    transform(value, ...args) {
+        return this.get(value);
+    }
     /**转换文件大小单位 输入k */
-    formatFileSize(bytes) {
+    get(bytes) {
         const units = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
         let size = bytes;
         let unitIndex = 0;
@@ -34,56 +46,16 @@ class FileApiService {
         size = size.toFixed(1);
         return `${size} ${units[unitIndex]}`;
     }
-    /**获取图片的本地连接 */
-    getImageLacolBase64Url(file) {
-        return new Promise((resolve, rejects) => {
-            const reader = new FileReader();
-            reader.readAsDataURL(file);
-            reader.onload = (e) => {
-                resolve(e.target.result);
-            };
-            reader.onerror = error => rejects(error);
-        });
-    }
-    /**
-      * 深拷贝--方法
-      * $api.deepClone()  */
-    deepClone(obj) {
-        if (typeof obj !== 'object' || obj === null)
-            return obj;
-        const result = Array.isArray(obj) ? [] : {};
-        for (let key in obj) {
-            if (obj.hasOwnProperty(key)) {
-                if (typeof obj[key] === 'object' && obj[key] !== null) {
-                    if (obj[key] instanceof Date) {
-                        result[key] = new Date(obj[key].getTime());
-                    }
-                    else if (obj[key] instanceof RegExp) {
-                        result[key] = new RegExp(obj[key]);
-                    }
-                    else if (obj[key] instanceof File) {
-                        result[key] = obj[key];
-                    }
-                    else {
-                        result[key] = this.deepClone(obj[key]);
-                    }
-                }
-                else {
-                    result[key] = obj[key];
-                }
-            }
-        }
-        return result;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileApiService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FormatFileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: FormatFileSizePipe, isStandalone: true, name: "formatFileSize" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileApiService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FormatFileSizePipe, decorators: [{
+            type: Pipe,
             args: [{
-                    providedIn: 'root'
+                    name: 'formatFileSize',
+                    standalone: true
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 let ImageTypeOption = [{
         label: '',
@@ -233,13 +205,13 @@ class FilePreviewComponent {
             return this.rotate = 0;
         this.rotate += 90;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FilePreviewComponent, deps: [{ token: i8.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FilePreviewComponent, selector: "fe-file-preview", inputs: { width: "width", src: "src", preview: "preview", type: "type", name: "name", className: "className" }, ngImport: i0, template: "<div class=\"image_box\"  [style]=\"{width:width,maxWidth:'100%'}\">\n    <div class=\"img_box\" [class]=\"className\" *ngIf=\"isImage\">\n        <img [src]=\"src\"  />\n        <div class=\"option_box\" *ngIf=\"preview\">\n            <i class=\"fa fa-eye \" (click.stop)=\"OpenPreviewImage(content)\"></i>\n        </div>\n    </div>\n    <a [href]=\"src\" [download]=\"name\" target>\n        <i class=\"fa fa-file-audio-o fs-1\" *ngIf=\"isAudio\"></i>\n        <i class=\"fa fa-file-video-o fs-1\" *ngIf=\"isVideo\"></i>\n        <ng-container *ngIf=\"!(isImage||isAudio||isVideo)\">\n            <ng-container *ngFor=\"let item of _ImageTypeOption; let i=index\">\n                <i class=\"fs-1\" [ngClass]=\"item.icon\" *ngIf=\"item.type===type\"></i>\n            </ng-container>\n        </ng-container>\n    </a>\n</div>\n\n<ng-template #content let-modal>\n    <div class=\"modal-header\">\n        <div class=\"d-flex justify-content-end w-100 fs-3\">\n            <i class=\"mx-2 fa  fa fa-repeat\" aria-hidden=\"true\" title=\"\u53F3\u65CB\u8F6C\" role=\"button\" (click)=\"RotateRight()\"></i>\n            <i class=\"mx-2 fa  fa-search-minus\" aria-hidden=\"true\" title=\"\u7F29\u5C0F\" role=\"button\" (click)=\"zoomOut()\"></i>\n            <i class=\"mx-2 fa  fa-search-plus\" aria-hidden=\"true\" title=\"\u653E\u5927\" role=\"button\" (click)=\"zoomIn()\"></i>\n            <i class=\"mx-2 fa  fa-times\" aria-hidden=\"true\" role=\"button\" (click)=\"modal.dismiss('Cross click')\"></i>\n        </div>\n    </div> \n    <div class=\"modal-body d-flex justify-content-center align-items-center \">\n        <img width=\"400\" class=\"modal-body-preview\"  [src]=\"src\" [style.transform]=\"'scale('+zoom/10+') rotate('+rotate+'deg)'\"   >\n    </div>\n</ng-template>", styles: [".image_box{text-align:center;position:relative}.image_box img{width:100%}.image_box .img_box:hover .option_box{display:flex}.image_box .option_box{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000040;align-items:center;justify-content:center;display:none;transition:all .2s linear}.image_box .option_box i{cursor:pointer;font-size:18px;color:#fff}.modal-body-preview{transition:all .2s}::ng-deep .dignite-preview .modal-content{background-color:transparent;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FilePreviewComponent, deps: [{ token: i1.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FilePreviewComponent, selector: "fe-file-preview", inputs: { width: "width", src: "src", preview: "preview", type: "type", name: "name", className: "className" }, ngImport: i0, template: "<div class=\"image_box\"  [style]=\"{width:width,maxWidth:'100%'}\">\n    <div class=\"img_box\" [class]=\"className\" *ngIf=\"isImage\">\n        <img [src]=\"src\"  />\n        <div class=\"option_box\" *ngIf=\"preview\">\n            <i class=\"fa fa-eye \" (click.stop)=\"OpenPreviewImage(content)\"></i>\n        </div>\n    </div>\n    <a [href]=\"src\" [download]=\"name\" target>\n        <i class=\"fa fa-file-audio-o fs-1\" *ngIf=\"isAudio\"></i>\n        <i class=\"fa fa-file-video-o fs-1\" *ngIf=\"isVideo\"></i>\n        <ng-container *ngIf=\"!(isImage||isAudio||isVideo)\">\n            <ng-container *ngFor=\"let item of _ImageTypeOption; let i=index\">\n                <i class=\"fs-1\" [ngClass]=\"item.icon\" *ngIf=\"item.type===type\"></i>\n            </ng-container>\n        </ng-container>\n    </a>\n</div>\n\n<ng-template #content let-modal>\n    <div class=\"modal-header\">\n        <div class=\"d-flex justify-content-end w-100 fs-3\">\n            <i class=\"mx-2 fa  fa fa-repeat\" aria-hidden=\"true\" title=\"\u53F3\u65CB\u8F6C\" role=\"button\" (click)=\"RotateRight()\"></i>\n            <i class=\"mx-2 fa  fa-search-minus\" aria-hidden=\"true\" title=\"\u7F29\u5C0F\" role=\"button\" (click)=\"zoomOut()\"></i>\n            <i class=\"mx-2 fa  fa-search-plus\" aria-hidden=\"true\" title=\"\u653E\u5927\" role=\"button\" (click)=\"zoomIn()\"></i>\n            <i class=\"mx-2 fa  fa-times\" aria-hidden=\"true\" role=\"button\" (click)=\"modal.dismiss('Cross click')\"></i>\n        </div>\n    </div> \n    <div class=\"modal-body d-flex justify-content-center align-items-center \">\n        <img width=\"400\" class=\"modal-body-preview\"  [src]=\"src\" [style.transform]=\"'scale('+zoom/10+') rotate('+rotate+'deg)'\"   >\n    </div>\n</ng-template>", styles: [".image_box{text-align:center;position:relative}.image_box img{width:100%}.image_box .img_box:hover .option_box{display:flex}.image_box .option_box{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000040;align-items:center;justify-content:center;display:none;transition:all .2s linear}.image_box .option_box i{cursor:pointer;font-size:18px;color:#fff}.modal-body-preview{transition:all .2s}::ng-deep .dignite-preview .modal-content{background-color:transparent;color:#fff}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FilePreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fe-file-preview', template: "<div class=\"image_box\"  [style]=\"{width:width,maxWidth:'100%'}\">\n    <div class=\"img_box\" [class]=\"className\" *ngIf=\"isImage\">\n        <img [src]=\"src\"  />\n        <div class=\"option_box\" *ngIf=\"preview\">\n            <i class=\"fa fa-eye \" (click.stop)=\"OpenPreviewImage(content)\"></i>\n        </div>\n    </div>\n    <a [href]=\"src\" [download]=\"name\" target>\n        <i class=\"fa fa-file-audio-o fs-1\" *ngIf=\"isAudio\"></i>\n        <i class=\"fa fa-file-video-o fs-1\" *ngIf=\"isVideo\"></i>\n        <ng-container *ngIf=\"!(isImage||isAudio||isVideo)\">\n            <ng-container *ngFor=\"let item of _ImageTypeOption; let i=index\">\n                <i class=\"fs-1\" [ngClass]=\"item.icon\" *ngIf=\"item.type===type\"></i>\n            </ng-container>\n        </ng-container>\n    </a>\n</div>\n\n<ng-template #content let-modal>\n    <div class=\"modal-header\">\n        <div class=\"d-flex justify-content-end w-100 fs-3\">\n            <i class=\"mx-2 fa  fa fa-repeat\" aria-hidden=\"true\" title=\"\u53F3\u65CB\u8F6C\" role=\"button\" (click)=\"RotateRight()\"></i>\n            <i class=\"mx-2 fa  fa-search-minus\" aria-hidden=\"true\" title=\"\u7F29\u5C0F\" role=\"button\" (click)=\"zoomOut()\"></i>\n            <i class=\"mx-2 fa  fa-search-plus\" aria-hidden=\"true\" title=\"\u653E\u5927\" role=\"button\" (click)=\"zoomIn()\"></i>\n            <i class=\"mx-2 fa  fa-times\" aria-hidden=\"true\" role=\"button\" (click)=\"modal.dismiss('Cross click')\"></i>\n        </div>\n    </div> \n    <div class=\"modal-body d-flex justify-content-center align-items-center \">\n        <img width=\"400\" class=\"modal-body-preview\"  [src]=\"src\" [style.transform]=\"'scale('+zoom/10+') rotate('+rotate+'deg)'\"   >\n    </div>\n</ng-template>", styles: [".image_box{text-align:center;position:relative}.image_box img{width:100%}.image_box .img_box:hover .option_box{display:flex}.image_box .option_box{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000040;align-items:center;justify-content:center;display:none;transition:all .2s linear}.image_box .option_box i{cursor:pointer;font-size:18px;color:#fff}.modal-body-preview{transition:all .2s}::ng-deep .dignite-preview .modal-content{background-color:transparent;color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: i8.NgbModal }], propDecorators: { width: [{
+        }], ctorParameters: () => [{ type: i1.NgbModal }], propDecorators: { width: [{
                 type: Input
             }], src: [{
                 type: Input
@@ -253,9 +225,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                 type: Input
             }] } });
 
+/* eslint-disable @angular-eslint/component-selector */
 class FileEditComponent {
-    constructor(_FileApiService) {
-        this._FileApiService = _FileApiService;
+    constructor(_FormatFileSizePipe, _GetImageLacolBase64urlService) {
+        this._FormatFileSizePipe = _FormatFileSizePipe;
+        this._GetImageLacolBase64urlService = _GetImageLacolBase64urlService;
         /**是否多选 */
         this._multiple = true;
         /**文件数据--已上传的数据 */
@@ -264,7 +238,7 @@ class FileEditComponent {
         this.fileDataChange = new EventEmitter();
         /**文件大小限制
          * @param 1mb
-        */
+         */
         this.sizeLimit = 1048576;
         /**文件表格数据 */
         this.filesTableData = [];
@@ -273,7 +247,7 @@ class FileEditComponent {
     }
     set multiple(v) {
         this._multiple = v;
-        if (v) { }
+        // if (v) { }
     }
     set fileData(v) {
         this._fileData = v;
@@ -286,15 +260,16 @@ class FileEditComponent {
     }
     /**获取文件信息改变 */
     async getFileChange(event) {
-        let files = new Array(...event.target.files);
+        const files = new Array(...event.target.files);
         /**需要等待setfileSizeUnits执行完后在执行其他方法--需要完善 */
         await this.waitFileToAddTable(files);
         this.fileHandling();
     }
     /**等待将文件数据加入到文件表格数据中 */
     waitFileToAddTable(files) {
-        return new Promise(async (resolve, rejects) => {
-            this.filesTableData.push(...await this.setfileSizeUnits(files));
+        // eslint-disable-next-line no-async-promise-executor
+        return new Promise(async (resolve) => {
+            this.filesTableData.push(...(await this.setfileSizeUnits(files)));
             resolve(true);
         });
     }
@@ -308,32 +283,36 @@ class FileEditComponent {
     }
     /**文件处理-调用回调函数 */
     fileHandling() {
-        let theFilesToBeUploaded = this.filesTableData.filter(el => !el.id);
+        const theFilesToBeUploaded = this.filesTableData.filter(el => !el.id);
         //判断图片大小是否超过限制-用于判断表单是否允许提交
-        let isSubmit = !this.filesTableData.some(el => el.size > this.sizeLimit);
-        this.fileDataChange.emit({ theFilesToBeUploaded, deleteTheUploadedFiles: this.deleteTheUploadedFiles, isSubmit });
+        const isSubmit = !this.filesTableData.some(el => el.size > this.sizeLimit);
+        this.fileDataChange.emit({
+            theFilesToBeUploaded,
+            deleteTheUploadedFiles: this.deleteTheUploadedFiles,
+            isSubmit,
+        });
     }
     /**设置值文件大小单位/ */
     async setfileSizeUnits(files) {
-        return new Promise((resolve, rejects) => {
-            let formattedFiles = [];
+        return new Promise((resolve) => {
+            const formattedFiles = [];
             files.forEach(async (file) => {
-                file.fileSize = this._FileApiService.formatFileSize(file.size);
+                file.fileSize = this._FormatFileSizePipe.transform(file.size);
                 formattedFiles.push(file);
                 //设置选择图片的本地url
                 if (!file.src)
-                    file.src = await this._FileApiService.getImageLacolBase64Url(file);
+                    file.src = await this._GetImageLacolBase64urlService.get(file);
             });
             resolve(files);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileEditComponent, deps: [{ token: FileApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileEditComponent, selector: "fe-file-edit", inputs: { multiple: "multiple", fileData: "fileData", limit: "limit" }, outputs: { fileDataChange: "fileDataChange" }, viewQueries: [{ propertyName: "fileEdit", first: true, predicate: ["fileEdit"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"input-group mb-3\">\n    <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" (change)=\"getFileChange($event)\">\n</div>\n\n<table class=\"table\" *ngIf=\"filesTableData.length>0\">\n    <thead>\n        <tr>\n            <th scope=\"col\"></th>\n            <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n            <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n            <th scope=\"col\"></th>\n        </tr>\n    </thead>\n    <tbody>\n        <ng-container *ngFor=\"let item of filesTableData;let i =index\">\n            <tr>\n                <td>\n                    <fe-file-preview [width]=\"'80px'\" [src]=\"item.src\" [name]=\"item.name\" [type]=\"item.type\" [preview]=\"true\"></fe-file-preview>\n                </td>\n                <th scope=\"row\">\n                    <div>{{item.name}}</div>\n                    <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n                        {{'FileExplorer::ExceedsMaximumSize' |\n                        abpLocalization:_FileApiService.formatFileSize(sizeLimit)}}</div>\n                </th>\n                <td>{{item.fileSize}}</td>\n                <td>\n                    <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n                        <i class=\"fas fa-trash p-2\"></i>\n                    </button>\n                </td>\n            </tr>\n        </ng-container>\n    </tbody>\n</table>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name", "className"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileEditComponent, deps: [{ token: FormatFileSizePipe }, { token: i2.GetImageLacolBase64urlService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileEditComponent, selector: "fe-file-edit", inputs: { multiple: "multiple", fileData: "fileData", limit: "limit" }, outputs: { fileDataChange: "fileDataChange" }, viewQueries: [{ propertyName: "fileEdit", first: true, predicate: ["fileEdit"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"input-group mb-3\">\n    <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" (change)=\"getFileChange($event)\">\n</div>\n\n<table class=\"table\" *ngIf=\"filesTableData.length>0\">\n    <thead>\n        <tr>\n            <th scope=\"col\"></th>\n            <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n            <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n            <th scope=\"col\"></th>\n        </tr>\n    </thead>\n    <tbody>\n        <ng-container *ngFor=\"let item of filesTableData;let i =index\">\n            <tr>\n                <td>\n                    <fe-file-preview [width]=\"'80px'\" [src]=\"item.src\" [name]=\"item.name\" [type]=\"item.type\" [preview]=\"true\"></fe-file-preview>\n                </td>\n                <th scope=\"row\">\n                    <div>{{item.name}}</div>\n                    <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n                        {{'FileExplorer::ExceedsMaximumSize' |\n                        abpLocalization:(sizeLimit|formatFileSize)}}</div>\n                </th>\n                <td>{{item.fileSize}}</td>\n                <td>\n                    <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n                        <i class=\"fas fa-trash p-2\"></i>\n                    </button>\n                </td>\n            </tr>\n        </ng-container>\n    </tbody>\n</table>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name", "className"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: FormatFileSizePipe, name: "formatFileSize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fe-file-edit', template: "<div class=\"input-group mb-3\">\n    <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" (change)=\"getFileChange($event)\">\n</div>\n\n<table class=\"table\" *ngIf=\"filesTableData.length>0\">\n    <thead>\n        <tr>\n            <th scope=\"col\"></th>\n            <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n            <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n            <th scope=\"col\"></th>\n        </tr>\n    </thead>\n    <tbody>\n        <ng-container *ngFor=\"let item of filesTableData;let i =index\">\n            <tr>\n                <td>\n                    <fe-file-preview [width]=\"'80px'\" [src]=\"item.src\" [name]=\"item.name\" [type]=\"item.type\" [preview]=\"true\"></fe-file-preview>\n                </td>\n                <th scope=\"row\">\n                    <div>{{item.name}}</div>\n                    <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n                        {{'FileExplorer::ExceedsMaximumSize' |\n                        abpLocalization:_FileApiService.formatFileSize(sizeLimit)}}</div>\n                </th>\n                <td>{{item.fileSize}}</td>\n                <td>\n                    <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n                        <i class=\"fas fa-trash p-2\"></i>\n                    </button>\n                </td>\n            </tr>\n        </ng-container>\n    </tbody>\n</table>" }]
-        }], ctorParameters: () => [{ type: FileApiService }], propDecorators: { multiple: [{
+            args: [{ selector: 'fe-file-edit', template: "<div class=\"input-group mb-3\">\n    <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" (change)=\"getFileChange($event)\">\n</div>\n\n<table class=\"table\" *ngIf=\"filesTableData.length>0\">\n    <thead>\n        <tr>\n            <th scope=\"col\"></th>\n            <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n            <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n            <th scope=\"col\"></th>\n        </tr>\n    </thead>\n    <tbody>\n        <ng-container *ngFor=\"let item of filesTableData;let i =index\">\n            <tr>\n                <td>\n                    <fe-file-preview [width]=\"'80px'\" [src]=\"item.src\" [name]=\"item.name\" [type]=\"item.type\" [preview]=\"true\"></fe-file-preview>\n                </td>\n                <th scope=\"row\">\n                    <div>{{item.name}}</div>\n                    <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n                        {{'FileExplorer::ExceedsMaximumSize' |\n                        abpLocalization:(sizeLimit|formatFileSize)}}</div>\n                </th>\n                <td>{{item.fileSize}}</td>\n                <td>\n                    <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n                        <i class=\"fas fa-trash p-2\"></i>\n                    </button>\n                </td>\n            </tr>\n        </ng-container>\n    </tbody>\n</table>" }]
+        }], ctorParameters: () => [{ type: FormatFileSizePipe }, { type: i2.GetImageLacolBase64urlService }], propDecorators: { multiple: [{
                 type: Input
             }], fileData: [{
                 type: Input
@@ -360,6 +339,10 @@ let FileDescriptorService$1 = class FileDescriptorService {
             method: 'DELETE',
             url: `/api/file-explorer/files/${id}`,
         }, { apiName: this.apiName, ...config });
+        this.deleteByEntityId = (containerName, entityId, config) => this.restService.request({
+            method: 'DELETE',
+            url: `/api/file-explorer/files/${containerName}/${entityId}`,
+        }, { apiName: this.apiName, ...config });
         this.download = (containerName, blobName, fileName, config) => this.restService.request({
             method: 'GET',
             url: `/api/file-explorer/files/download/${containerName}/${blobName}`,
@@ -371,14 +354,17 @@ let FileDescriptorService$1 = class FileDescriptorService {
         }, { apiName: this.apiName, ...config });
         this.getFileContainerConfiguration = (containerName, config) => this.restService.request({
             method: 'GET',
-            url: '/api/file-explorer/files/configuration',
-            params: { containerName },
+            url: `/api/file-explorer/files/${containerName}/configuration`,
         }, { apiName: this.apiName, ...config });
         this.getList = (input, config) => this.restService.request({
             method: 'GET',
             url: '/api/file-explorer/files',
             params: { containerName: input.containerName, directoryId: input.directoryId, creatorId: input.creatorId, filter: input.filter, entityId: input.entityId, sorting: input.sorting, skipCount: input.skipCount, maxResultCount: input.maxResultCount },
         }, { apiName: this.apiName, ...config });
+        this.getListByEntityId = (containerName, entityId, config) => this.restService.request({
+            method: 'GET',
+            url: `/api/file-explorer/files/${containerName}/${entityId}/all`,
+        }, { apiName: this.apiName, ...config });
         this.getStream = (containerName, blobName, imageResize, config) => this.restService.request({
             method: 'GET',
             responseType: 'blob',
@@ -444,15 +430,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i3.RestService }] });
 
+/* eslint-disable @typescript-eslint/no-this-alias */
 /* eslint-disable @angular-eslint/component-selector */
-var that$1;
+let that;
 class FileModalTreeComponent {
-    constructor(_DescriptorService, fb, toaster, _FileApiService, _LocalizationService) {
+    constructor(_DescriptorService, fb, toaster, _LocalizationService, confirmation) {
         this._DescriptorService = _DescriptorService;
         this.fb = fb;
         this.toaster = toaster;
-        this._FileApiService = _FileApiService;
         this._LocalizationService = _LocalizationService;
+        this.confirmation = confirmation;
         /**文件分组列表 */
         this.fileGroupList = [];
         /**选择的tree节点 */
@@ -463,25 +450,41 @@ class FileModalTreeComponent {
         this.anExpandedNode = [];
         /**tree节点选择回调 */
         this.nodeClick = new EventEmitter();
-        this.handleClick = (event) => event.stopPropagation();
+        /**获取数据后回调给file-modal */
+        this.treeNodeData = new EventEmitter();
+        /**查看所有文件回调函数，在file-modal中处理逻辑 */
+        this.lookAllBtn = new EventEmitter();
+        this.handleClick = event => event.stopPropagation();
+        this.selectedNode = [];
         /**判断节点是否选中 */
-        this.isNodeSelected = (el) => el.key === this._theSelectedTreeNode?.key;
+        this.isNodeSelected = el => {
+            return el.key === this._theSelectedTreeNode?.key;
+        };
         /**分组 */
         /**模态框-状态-是否打开 */
         this.ModalDescriptorOpen = false;
         /**模态框-descriptor-繁忙状态-用于确定模态的繁忙状态是否为真 */
         this.ModalDescriptorBusy = false;
-        that$1 = this;
+        this.formValidation = '';
+        this._ValidatorsService = inject(ValidatorsService);
+        that = this;
     }
     set theSelectedTreeNode(v) {
         this._theSelectedTreeNode = v;
-        if (v.length > 0) {
+        if (v == '') {
             this.loadData();
         }
     }
     set fileContainerName(v) {
         if (v) {
             this._fileContainerName = v;
+            // this.loadData();
+        }
+    }
+    ngAfterContentInit() {
+        //Called after ngOnInit when the component's or directive's content has been initialized.
+        //Add 'implements AfterContentInit' to the class.
+        if (this._fileContainerName) {
             this.loadData();
         }
     }
@@ -492,48 +495,70 @@ class FileModalTreeComponent {
     }
     /**获取文件分组 */
     getFileGroupList() {
-        this._DescriptorService.getList({
+        this._DescriptorService
+            .getList({
             containerName: this._fileContainerName,
-        }).subscribe(async (res) => {
+        })
+            .subscribe(async (res) => {
             this.fileGroupList = await this.setTheValueOfTheNodeRecursively(res.items);
+            this.treeNodeData.emit(this.fileGroupList);
         });
     }
-    /**递归设置节点的值 */
-    setTheValueOfTheNodeRecursively(array) {
-        return new Promise((reslove, rejects) => {
-            array.forEach((el) => {
-                el.title = el.name;
-                el.key = el.id;
-                el.expanded = this.anExpandedNode.includes(el.key);
-                if (el.children.length > 0) {
-                    this.setTheValueOfTheNodeRecursively(el.children);
-                }
-            });
-            reslove(array);
+    /**查看所有文件 */
+    onLookAllBtn() {
+        this.lookAllBtn.emit();
+    }
+    /**递归-将列表转化为父子级结构 */
+    setTheValueOfTheNodeRecursively(array, parentId = null, root) {
+        const rootList = root || array;
+        const result = array.filter(item => item.parentId === parentId);
+        result.sort((a, b) => a.order - b.order);
+        result.map((el) => {
+            el.title = el.name;
+            el.key = el.id;
+            el.entity = el.id; /** 节点值 */
+            el.expanded = this.anExpandedNode.includes(el.key);
+            el.children.sort((a, b) => a.order - b.order);
+            if (el.children.length > 0) {
+                this.setTheValueOfTheNodeRecursively(el.children, el.id, rootList);
+            }
         });
+        return result;
     }
     /**tree-拖拽 */
-    nzEvent(event) {
-    }
+    nzEvent(event) { }
     /**tree-拖拽 -验证*/
     beforeDrop(arg) {
-        if (arg.pos === 0 || arg.pos === 1) {
-            that$1._DescriptorService.move(arg.dragNode.key, {
-                "parentId": arg.pos === 1 ? (arg.node.parentNode?.key || '') : arg.node.key,
-                "order": arg.pos === 1 ? arg.node.origin.order + 1 : arg.node.origin.children.length + 1
-            }).subscribe(res => {
-                that$1.getFileGroupList();
-            });
-            return of(true);
-        }
-        else {
-            return of(false);
+        const { pos, dragNode, node } = arg;
+        // 只处理有效的拖拽位置
+        if (pos === 0 || pos === 1 || pos === -1) {
+            // 根据不同的拖拽位置计算参数
+            const parentId = pos === 0 ? node.key : node.parentNode?.key || '';
+            let order;
+            if (pos === 1) {
+                order = node.origin.order + 1;
+            }
+            else if (pos === 0) {
+                order = node.origin.children.length + 1;
+            }
+            else {
+                // pos === -1
+                order = Math.max(0, node.origin.order - 1);
+            }
+            // 统一处理移动逻辑
+            return that._DescriptorService.move(dragNode.key, { parentId, order }).pipe(tap(() => that.getFileGroupList()), map(() => true));
         }
+        return of(false);
     }
     /**tree--选择节点 */
-    activeNode(event) {
-        this._theSelectedTreeNode = event.node;
-        this.nodeClick.emit(event.node);
+    activeNode(node) {
+        if (event?.target?.localName == 'i')
+            return;
+        if (this._theSelectedTreeNode?.key == node.key)
+            return;
+        this.selectedNode = [node];
+        this._theSelectedTreeNode = node;
+        this.nodeClick.emit(node);
     }
     /**点击展开树节点图标触发 */
     nzExpandChange(event) {
@@ -552,23 +577,32 @@ class FileModalTreeComponent {
         this.ModalDescriptorForm = this.fb.group({
             containerName: [this._fileContainerName || '', Validators.required],
             name: ['', Validators.required],
-            parentId: [items?.key || '', Validators.required],
+            parentId: [items?.key || ''],
         });
         /**编辑 */
         if (edit) {
             this.theNodeBeingEdited = items.origin;
             this.ModalDescriptorForm.patchValue({
-                name: items.origin.name
+                name: items.origin.name,
             });
         }
     }
     /**删除分组 */
     deleteDescriptorBtn(node) {
-        this._DescriptorService.delete(node.key).subscribe(res => {
-            this.ModalDescriptorOpen = false;
-            if (this.theNodeBeingEdited.key == node.key)
-                this.theNodeBeingEdited = '';
-            this.getFileGroupList();
+        this.confirmation
+            .warn('', {
+            key: '',
+            defaultValue: this._LocalizationService.instant(`FileExplorer::DeletionConfirmationMessage`, node.title),
+        })
+            .subscribe((status) => {
+            if (status == 'confirm') {
+                this._DescriptorService.delete(node.key).subscribe(res => {
+                    this.ModalDescriptorOpen = false;
+                    if (this.theNodeBeingEdited.key == node.key)
+                        this.theNodeBeingEdited = '';
+                    this.getFileGroupList();
+                });
+            }
         });
     }
     /**模态框-descriptor-状态改变回调 */
@@ -581,29 +615,53 @@ class FileModalTreeComponent {
     }
     /**f分组模态框保存 */
     createOrEditSave() {
-        let input = this.ModalDescriptorForm.value;
+        const input = this.ModalDescriptorForm.value;
+        this.formValidation = this._ValidatorsService.getFormValidationStatus(this.ModalDescriptorForm);
+        if (this._ValidatorsService.isCheckForm(this.formValidation, 'FileExplorer'))
+            return;
+        if (!this.ModalDescriptorForm.valid)
+            return;
+        if (this.ModalDescriptorBusy)
+            return;
+        this.ModalDescriptorBusy = true;
         if (this.theNodeBeingEdited) {
-            this._DescriptorService.update(this.theNodeBeingEdited.key, input).subscribe(res => {
+            this._DescriptorService
+                .update(this.theNodeBeingEdited.key, input)
+                .pipe(finalize(() => {
+                this.ModalDescriptorBusy = false;
+            }))
+                .subscribe(res => {
                 this.ModalDescriptorOpen = false;
+                this.ModalDescriptorVisibleChange(false);
                 this.getFileGroupList();
             });
             return;
         }
-        this._DescriptorService.create(input).subscribe(res => {
+        this._DescriptorService
+            .create(input)
+            .pipe(finalize(() => {
+            this.ModalDescriptorBusy = false;
+        }))
+            .subscribe(res => {
             this.ModalDescriptorOpen = false;
+            this.ModalDescriptorVisibleChange(false);
             this.getFileGroupList();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileModalTreeComponent, deps: [{ token: FileDescriptorService }, { token: i1.FormBuilder }, { token: i2$1.ToasterService }, { token: FileApiService }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileModalTreeComponent, selector: "fe-file-modal-tree", inputs: { theSelectedTreeNode: "theSelectedTreeNode", fileContainerName: "fileContainerName" }, outputs: { nodeClick: "nodeClick" }, viewQueries: [{ propertyName: "ModalFormDescriptorSubmit", first: true, predicate: ["ModalFormDescriptorSubmit"], descendants: true }], ngImport: i0, template: "<div class=\"card-header  p-0 mb-1 d-flex justify-content-between align-items-center\">\n    <h6 class=\"h6 mb-0\">{{'FileExplorer::MyDirectories' | abpLocalization}}</h6>\n    <button type=\"button\" class=\"btn btn-light btn-sm ms-2\" (click.stop)=\"addDescriptorBtn()\"><i\n            class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i></button>\n</div>\n<nz-tree [nzData]=\"fileGroupList\" class=\"ng-zorro-antd-tree\" nzDraggable nzBlockNode nzShowIcon\n    [nzExpandedIcon]=\"multiExpandedIconTpl\" (nzOnDrop)=\"nzEvent($event)\" [nzBeforeDrop]=\"beforeDrop\"\n    (nzClick)=\"activeNode($event)\" (nzExpandChange)=\"nzExpandChange($event)\" [nzTreeTemplate]=\"nzTreeTemplate\">\n    <ng-template #nzTreeTemplate let-node let-origin=\"origin\">\n        <div class=\"custom-node d-inline-block   ng-star-inserted dropdown\" [title]=\"node.title\">\n            <div #dropdown=\"ngbDropdown\" class=\"d-inline-block\" ngbDropdown placement=\"bottom\" container=\"body\">\n                <div class=\"btn-group\" [class.selected]=\"isNodeSelected(node)\">\n                    <button class=\"btn btn-sm  p-0 px-1\">{{ node.title }}</button>\n                    <button class=\"btn btn-sm  p-0\" (click)=\"handleClick($event)\" ngbDropdownToggle\n                        [class.dropdown-toggle]=\"false\" aria-hidden=\"true\">\n                        <i class=\"fas fa-caret-down text-muted p-1\"></i>\n                    </button>\n                </div>\n                <div ngbDropdownMenu>\n                    <button ngbDropdownItem\n                        (click.stop)=\"addDescriptorBtn(node)\">{{'FileExplorer::NewDirectory' | abpLocalization}}</button>\n                    <button ngbDropdownItem\n                        (click.stop)=\"addDescriptorBtn(node,true)\">{{'AbpUi::Edit' | abpLocalization}}</button>\n                    <button ngbDropdownItem\n                        (click.stop)=\"deleteDescriptorBtn(node)\">{{'AbpUi::Delete' | abpLocalization}}</button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n    <ng-template #multiExpandedIconTpl let-node let-origin=\"origin\">\n        <ng-container *ngIf=\"node.children.length > 0\">\n            <i [class]=\"node.isExpanded ? 'fas fa-caret-down' : 'fas fa-caret-right'\"></i>\n        </ng-container>\n    </ng-template>\n</nz-tree>\n\n\n<abp-modal [(visible)]=\"ModalDescriptorOpen\" [busy]=\"ModalDescriptorBusy\"\n    (visibleChange)=\"ModalDescriptorVisibleChange($event)\">\n    <ng-template #abpHeader>\n        <h3>{{theNodeBeingEdited?('AbpUi::Edit' | abpLocalization):('FileExplorer::NewDirectory' | abpLocalization)}}</h3>\n    </ng-template>\n    <ng-template #abpBody>\n        <ng-template #loaderRef>\n            <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\n        </ng-template>\n        <ng-container *ngIf=\"ModalDescriptorForm; else loaderRef\">\n            <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"ModalDescriptorForm\"\n                (keydown.enter)=\"$event.preventDefault()\" (submit)=\"createOrEditSave()\">\n                <button type=\"submit\" #ModalFormDescriptorSubmit style=\"display: none\"></button>\n                <div class=\"mb-3\">\n                    <label class=\"form-label\">{{'FileExplorer::DirectoryName' | abpLocalization}}</label>\n                    <input type=\"email\" class=\"form-control\" formControlName=\"name\">\n                </div>\n            </form>\n        </ng-container>\n    </ng-template>\n    <ng-template #abpFooter>\n        <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n        <abp-button iconClass=\"fa fa-check\"\n            (click)=\"ModalFormDescriptorSubmit.nativeElement.click()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n    </ng-template>\n</abp-modal>", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "directive", type: i3$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i2$1.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i2$1.ModalCloseDirective, selector: "[abpClose]" }, { kind: "directive", type: i8.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i8.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i8.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i8.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i8.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "component", type: i9.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckBoxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileModalTreeComponent, deps: [{ token: FileDescriptorService }, { token: i1$1.FormBuilder }, { token: i2$1.ToasterService }, { token: i3.LocalizationService }, { token: i2$1.ConfirmationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.5", type: FileModalTreeComponent, selector: "fe-file-modal-tree", inputs: { theSelectedTreeNode: "theSelectedTreeNode", fileContainerName: "fileContainerName" }, outputs: { nodeClick: "nodeClick", treeNodeData: "treeNodeData", lookAllBtn: "lookAllBtn" }, viewQueries: [{ propertyName: "ModalFormDescriptorSubmit", first: true, predicate: ["ModalFormDescriptorSubmit"], descendants: true }], ngImport: i0, template: "<div class=\"card-header  p-0 mb-1 d-flex justify-content-between align-items-center\">\n    <h6 class=\"h6 mb-0 btn-link\" role=\"button\" (click.stop)=\"onLookAllBtn()\">{{'FileExplorer::MyDirectories' | abpLocalization}}</h6>\n    <button type=\"button\" class=\"btn btn-light btn-sm ms-2\" (click.stop)=\"addDescriptorBtn()\"><i\n            class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i></button>\n</div>\n@if(fileGroupList.length>0){\n<abp-tree [nodes]=\"fileGroupList\" (nzExpandChange)=\"nzExpandChange($event)\" [draggable]=\"true\"\n    (dropOver)=\"nzEvent($event)\" [beforeDrop]=\"beforeDrop\" (selectedNodeChange)=\"activeNode($event)\" [changeCheckboxWithNode]=\"true\"  [isNodeSelected]=\"isNodeSelected\">\n\n    <ng-template #menu let-node>\n        <button ngbDropdownItem (click.stop)=\"addDescriptorBtn(node)\"><i\n                class=\" me-1 fa fa-pencil\"></i>{{'FileExplorer::NewDirectory' | abpLocalization}}</button>\n        <button ngbDropdownItem (click.stop)=\"addDescriptorBtn(node,true)\"><i\n                class=\" me-1 fa fa-plus\"></i>{{'AbpUi::Edit' | abpLocalization}}</button>\n        <button ngbDropdownItem (click.stop)=\"deleteDescriptorBtn(node)\"><i\n                class=\" me-1 fa fa-remove\"></i>{{'AbpUi::Delete' | abpLocalization}}</button>\n    </ng-template>\n\n    <ng-template abpTreeExpandedIconTemplate let-node let-origin=\"origin\">\n        <i aria-hidden=\"true\" *ngIf=\"node.children.length>0\">\n            <ng-container *ngTemplateOutlet=\"node.isExpanded ? minusIcon : plusIcon\"></ng-container></i>\n    </ng-template>\n\n    <ng-template #minusIcon>\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\">\n            <path\n                d=\"M11.5 0c6.347 0 11.5 5.153 11.5 11.5s-5.153 11.5-11.5 11.5-11.5-5.153-11.5-11.5 5.153-11.5 11.5-11.5zm0 1c5.795 0 10.5 4.705 10.5 10.5s-4.705 10.5-10.5 10.5-10.5-4.705-10.5-10.5 4.705-10.5 10.5-10.5zm-6.5 10h13v1h-13v-1z\" />\n        </svg>\n    </ng-template>\n\n    <ng-template #plusIcon>\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\">\n            <path\n                d=\"M11.5 0c6.347 0 11.5 5.153 11.5 11.5s-5.153 11.5-11.5 11.5-11.5-5.153-11.5-11.5 5.153-11.5 11.5-11.5zm0 1c5.795 0 10.5 4.705 10.5 10.5s-4.705 10.5-10.5 10.5-10.5-4.705-10.5-10.5 4.705-10.5 10.5-10.5zm.5 10h6v1h-6v6h-1v-6h-6v-1h6v-6h1v6z\" />\n        </svg>\n    </ng-template>\n</abp-tree>\n\n}\n<abp-modal [(visible)]=\"ModalDescriptorOpen\" [busy]=\"ModalDescriptorBusy\"\n    (visibleChange)=\"ModalDescriptorVisibleChange($event)\">\n    <ng-template #abpHeader>\n        <h3>{{theNodeBeingEdited?('AbpUi::Edit' | abpLocalization):('FileExplorer::NewDirectory' | abpLocalization)}}\n        </h3>\n    </ng-template>\n    <ng-template #abpBody>\n        <ng-template #loaderRef>\n            <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\n        </ng-template>\n        <ng-container *ngIf=\"ModalDescriptorForm; else loaderRef\">\n            <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"ModalDescriptorForm\"\n                (keydown.enter)=\"$event.preventDefault()\" (submit)=\"createOrEditSave()\">\n                <button type=\"submit\" #ModalFormDescriptorSubmit style=\"display: none\"></button>\n                <div class=\"mb-3\">\n                    <label class=\"form-label\">{{'FileExplorer::DirectoryName' | abpLocalization}}</label>\n                    <input type=\"email\" class=\"form-control\" formControlName=\"name\">\n                </div>\n            </form>\n        </ng-container>\n    </ng-template>\n    <ng-template #abpFooter>\n        <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n        <abp-button iconClass=\"fa fa-check\" [loading]=\"ModalDescriptorBusy\"\n            (click)=\"ModalFormDescriptorSubmit.nativeElement.click()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n    </ng-template>\n</abp-modal>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "directive", type: i3$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i2$1.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i2$1.ModalCloseDirective, selector: "[abpClose]" }, { kind: "directive", type: i1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "directive", type: i8.ExpandedIconTemplateDirective, selector: "[abpTreeExpandedIconTemplate],[abp-tree-expanded-icon-template]" }, { kind: "component", type: i8.TreeComponent, selector: "abp-tree", inputs: ["noAnimation", "draggable", "checkable", "checkStrictly", "checkedKeys", "nodes", "expandedKeys", "selectedNode", "changeCheckboxWithNode", "isNodeSelected", "beforeDrop"], outputs: ["checkedKeysChange", "expandedKeysChange", "selectedNodeChange", "dropOver", "nzExpandChange"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileModalTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fe-file-modal-tree', template: "<div class=\"card-header  p-0 mb-1 d-flex justify-content-between align-items-center\">\n    <h6 class=\"h6 mb-0\">{{'FileExplorer::MyDirectories' | abpLocalization}}</h6>\n    <button type=\"button\" class=\"btn btn-light btn-sm ms-2\" (click.stop)=\"addDescriptorBtn()\"><i\n            class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i></button>\n</div>\n<nz-tree [nzData]=\"fileGroupList\" class=\"ng-zorro-antd-tree\" nzDraggable nzBlockNode nzShowIcon\n    [nzExpandedIcon]=\"multiExpandedIconTpl\" (nzOnDrop)=\"nzEvent($event)\" [nzBeforeDrop]=\"beforeDrop\"\n    (nzClick)=\"activeNode($event)\" (nzExpandChange)=\"nzExpandChange($event)\" [nzTreeTemplate]=\"nzTreeTemplate\">\n    <ng-template #nzTreeTemplate let-node let-origin=\"origin\">\n        <div class=\"custom-node d-inline-block   ng-star-inserted dropdown\" [title]=\"node.title\">\n            <div #dropdown=\"ngbDropdown\" class=\"d-inline-block\" ngbDropdown placement=\"bottom\" container=\"body\">\n                <div class=\"btn-group\" [class.selected]=\"isNodeSelected(node)\">\n                    <button class=\"btn btn-sm  p-0 px-1\">{{ node.title }}</button>\n                    <button class=\"btn btn-sm  p-0\" (click)=\"handleClick($event)\" ngbDropdownToggle\n                        [class.dropdown-toggle]=\"false\" aria-hidden=\"true\">\n                        <i class=\"fas fa-caret-down text-muted p-1\"></i>\n                    </button>\n                </div>\n                <div ngbDropdownMenu>\n                    <button ngbDropdownItem\n                        (click.stop)=\"addDescriptorBtn(node)\">{{'FileExplorer::NewDirectory' | abpLocalization}}</button>\n                    <button ngbDropdownItem\n                        (click.stop)=\"addDescriptorBtn(node,true)\">{{'AbpUi::Edit' | abpLocalization}}</button>\n                    <button ngbDropdownItem\n                        (click.stop)=\"deleteDescriptorBtn(node)\">{{'AbpUi::Delete' | abpLocalization}}</button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n    <ng-template #multiExpandedIconTpl let-node let-origin=\"origin\">\n        <ng-container *ngIf=\"node.children.length > 0\">\n            <i [class]=\"node.isExpanded ? 'fas fa-caret-down' : 'fas fa-caret-right'\"></i>\n        </ng-container>\n    </ng-template>\n</nz-tree>\n\n\n<abp-modal [(visible)]=\"ModalDescriptorOpen\" [busy]=\"ModalDescriptorBusy\"\n    (visibleChange)=\"ModalDescriptorVisibleChange($event)\">\n    <ng-template #abpHeader>\n        <h3>{{theNodeBeingEdited?('AbpUi::Edit' | abpLocalization):('FileExplorer::NewDirectory' | abpLocalization)}}</h3>\n    </ng-template>\n    <ng-template #abpBody>\n        <ng-template #loaderRef>\n            <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\n        </ng-template>\n        <ng-container *ngIf=\"ModalDescriptorForm; else loaderRef\">\n            <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"ModalDescriptorForm\"\n                (keydown.enter)=\"$event.preventDefault()\" (submit)=\"createOrEditSave()\">\n                <button type=\"submit\" #ModalFormDescriptorSubmit style=\"display: none\"></button>\n                <div class=\"mb-3\">\n                    <label class=\"form-label\">{{'FileExplorer::DirectoryName' | abpLocalization}}</label>\n                    <input type=\"email\" class=\"form-control\" formControlName=\"name\">\n                </div>\n            </form>\n        </ng-container>\n    </ng-template>\n    <ng-template #abpFooter>\n        <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n        <abp-button iconClass=\"fa fa-check\"\n            (click)=\"ModalFormDescriptorSubmit.nativeElement.click()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n    </ng-template>\n</abp-modal>" }]
-        }], ctorParameters: () => [{ type: FileDescriptorService }, { type: i1.FormBuilder }, { type: i2$1.ToasterService }, { type: FileApiService }, { type: i3.LocalizationService }], propDecorators: { theSelectedTreeNode: [{
+            args: [{ selector: 'fe-file-modal-tree', template: "<div class=\"card-header  p-0 mb-1 d-flex justify-content-between align-items-center\">\n    <h6 class=\"h6 mb-0 btn-link\" role=\"button\" (click.stop)=\"onLookAllBtn()\">{{'FileExplorer::MyDirectories' | abpLocalization}}</h6>\n    <button type=\"button\" class=\"btn btn-light btn-sm ms-2\" (click.stop)=\"addDescriptorBtn()\"><i\n            class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i></button>\n</div>\n@if(fileGroupList.length>0){\n<abp-tree [nodes]=\"fileGroupList\" (nzExpandChange)=\"nzExpandChange($event)\" [draggable]=\"true\"\n    (dropOver)=\"nzEvent($event)\" [beforeDrop]=\"beforeDrop\" (selectedNodeChange)=\"activeNode($event)\" [changeCheckboxWithNode]=\"true\"  [isNodeSelected]=\"isNodeSelected\">\n\n    <ng-template #menu let-node>\n        <button ngbDropdownItem (click.stop)=\"addDescriptorBtn(node)\"><i\n                class=\" me-1 fa fa-pencil\"></i>{{'FileExplorer::NewDirectory' | abpLocalization}}</button>\n        <button ngbDropdownItem (click.stop)=\"addDescriptorBtn(node,true)\"><i\n                class=\" me-1 fa fa-plus\"></i>{{'AbpUi::Edit' | abpLocalization}}</button>\n        <button ngbDropdownItem (click.stop)=\"deleteDescriptorBtn(node)\"><i\n                class=\" me-1 fa fa-remove\"></i>{{'AbpUi::Delete' | abpLocalization}}</button>\n    </ng-template>\n\n    <ng-template abpTreeExpandedIconTemplate let-node let-origin=\"origin\">\n        <i aria-hidden=\"true\" *ngIf=\"node.children.length>0\">\n            <ng-container *ngTemplateOutlet=\"node.isExpanded ? minusIcon : plusIcon\"></ng-container></i>\n    </ng-template>\n\n    <ng-template #minusIcon>\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\">\n            <path\n                d=\"M11.5 0c6.347 0 11.5 5.153 11.5 11.5s-5.153 11.5-11.5 11.5-11.5-5.153-11.5-11.5 5.153-11.5 11.5-11.5zm0 1c5.795 0 10.5 4.705 10.5 10.5s-4.705 10.5-10.5 10.5-10.5-4.705-10.5-10.5 4.705-10.5 10.5-10.5zm-6.5 10h13v1h-13v-1z\" />\n        </svg>\n    </ng-template>\n\n    <ng-template #plusIcon>\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\">\n            <path\n                d=\"M11.5 0c6.347 0 11.5 5.153 11.5 11.5s-5.153 11.5-11.5 11.5-11.5-5.153-11.5-11.5 5.153-11.5 11.5-11.5zm0 1c5.795 0 10.5 4.705 10.5 10.5s-4.705 10.5-10.5 10.5-10.5-4.705-10.5-10.5 4.705-10.5 10.5-10.5zm.5 10h6v1h-6v6h-1v-6h-6v-1h6v-6h1v6z\" />\n        </svg>\n    </ng-template>\n</abp-tree>\n\n}\n<abp-modal [(visible)]=\"ModalDescriptorOpen\" [busy]=\"ModalDescriptorBusy\"\n    (visibleChange)=\"ModalDescriptorVisibleChange($event)\">\n    <ng-template #abpHeader>\n        <h3>{{theNodeBeingEdited?('AbpUi::Edit' | abpLocalization):('FileExplorer::NewDirectory' | abpLocalization)}}\n        </h3>\n    </ng-template>\n    <ng-template #abpBody>\n        <ng-template #loaderRef>\n            <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\n        </ng-template>\n        <ng-container *ngIf=\"ModalDescriptorForm; else loaderRef\">\n            <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"ModalDescriptorForm\"\n                (keydown.enter)=\"$event.preventDefault()\" (submit)=\"createOrEditSave()\">\n                <button type=\"submit\" #ModalFormDescriptorSubmit style=\"display: none\"></button>\n                <div class=\"mb-3\">\n                    <label class=\"form-label\">{{'FileExplorer::DirectoryName' | abpLocalization}}</label>\n                    <input type=\"email\" class=\"form-control\" formControlName=\"name\">\n                </div>\n            </form>\n        </ng-container>\n    </ng-template>\n    <ng-template #abpFooter>\n        <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n        <abp-button iconClass=\"fa fa-check\" [loading]=\"ModalDescriptorBusy\"\n            (click)=\"ModalFormDescriptorSubmit.nativeElement.click()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n    </ng-template>\n</abp-modal>" }]
+        }], ctorParameters: () => [{ type: FileDescriptorService }, { type: i1$1.FormBuilder }, { type: i2$1.ToasterService }, { type: i3.LocalizationService }, { type: i2$1.ConfirmationService }], propDecorators: { theSelectedTreeNode: [{
                 type: Input
             }], nodeClick: [{
                 type: Output
+            }], treeNodeData: [{
+                type: Output
+            }], lookAllBtn: [{
+                type: Output
             }], fileContainerName: [{
                 type: Input
             }], ModalFormDescriptorSubmit: [{
@@ -611,13 +669,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                 args: ['ModalFormDescriptorSubmit', { static: false }]
             }] } });
 
-var that;
+class GetDirectoryNamePipe {
+    transform(value, ...args) {
+        if (value) {
+            return args[0].find(el => el.id == value)?.name;
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: GetDirectoryNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: GetDirectoryNamePipe, isStandalone: true, name: "getDirectoryName" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: GetDirectoryNamePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getDirectoryName',
+                    standalone: true
+                }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-this-alias */
+/* eslint-disable @typescript-eslint/no-unused-vars */
 class FileModalComponent {
-    constructor(_FileService, toaster, list, _FileApiService, restService, confirmation, _LocalizationService) {
+    constructor(_FileService, toaster, list, restService, confirmation, _LocalizationService) {
         this._FileService = _FileService;
         this.toaster = toaster;
         this.list = list;
-        this._FileApiService = _FileApiService;
         this.restService = restService;
         this.confirmation = confirmation;
         this._LocalizationService = _LocalizationService;
@@ -627,8 +703,8 @@ class FileModalComponent {
         /**是否多选 */
         this._multiple = false;
         /**文件大小限制
-      * @param 1mb
-      */
+         * @param 1mb
+         */
         this.sizeLimit = 1048576;
         /**模态框状态回调 */
         this.visibleChange = new EventEmitter();
@@ -639,6 +715,9 @@ class FileModalComponent {
         /**dignite-file-modal-tree */
         /**选择的tree节点 */
         this._theSelectedTreeNode = '';
+        this.isCreateList = false;
+        /** 从tree获取来的数据 */
+        this.fileGroupList = [];
         /**图片上传-要上传图片的状态文件列表 */
         this.uploadPictureStatusList = [];
         /**文件表格-数据*/
@@ -650,45 +729,54 @@ class FileModalComponent {
         this.filters = {};
         /**文件表格-表格自带选择类型 */
         this.SelectionType = SelectionType;
-        /**文件表格-选择的表格数据项 */
-        this.selectedTable = [];
-        /**当前选择的table项 id */
-        this.nowSelectId = '';
         /**选择文件回调 */
         this.selectFilefn = new EventEmitter();
-        /**一个布尔or函数，可用于检查是否要根据条件选择特定行。 */
-        this.selectCheck = (row, column, value) => {
-            this.nowSelectId = row.id;
-            return true;
-        };
-        /**判断row是否选中 */
-        this.selectedcheckbox = (id) => {
-            return this.selectedTable.some(el => el.id == id);
-        };
         /**创建图片的接口，代理中的file类型不匹配，切换为any类型 */
         this.createFile = (input, config) => this.restService.request({
             method: 'POST',
             url: '/api/file-explorer/files',
-            params: { containerName: input.containerName, cellName: input.cellName, directoryId: input.directoryId, entityId: input.entityId },
+            params: {
+                containerName: input.containerName,
+                cellName: input.cellName,
+                directoryId: input.directoryId,
+                entityId: input.entityId,
+            },
             body: input.file,
         }, { apiName: 'FileExplorer', ...config });
-        that = this;
+        /**文件表格-选择的表格数据项 */
+        this.selectedTable = [];
+        /**当前选择的table项 id */
+        this.nowSelectId = '';
+        /**是否全选 */
+        this.isAllSelected = false;
+        /**判断row是否选中 */
+        this.selectedcheckbox = id => {
+            return this.selectedTable.some(el => el.id === id);
+        };
+        /**当前编辑的row */
+        this.newEditRow = '';
+        /**是否正在加载 */
+        this.isloading = false;
     }
     /**获取目录配置 */
     getFilesConfiguration() {
-        this._FileDescriptorService.getFileContainerConfiguration(this._fileContainerName).subscribe(res => {
-            this.createDirectoryPermissionName = res?.createDirectoryPermissionName;
+        return new Promise((resolve, reject) => {
+            this._FileDescriptorService
+                .getFileContainerConfiguration(this._fileContainerName)
+                .subscribe(res => {
+                this.createDirectoryPermissionName = res?.createDirectoryPermissionName;
+                resolve(res);
+            });
         });
     }
     set fileContainerName(v) {
         if (v) {
             this._fileContainerName = v;
-            this.loadData();
+            // this.loadData()
         }
     }
     set multiple(v) {
         this._multiple = v;
-        if (v) { }
     }
     set limit(v) {
         this.sizeLimit = v;
@@ -703,52 +791,98 @@ class FileModalComponent {
     /**模态框-状态改变回调 */
     ModalVisibleChange(event) {
         if (!event) {
+            this.ModalOpen = false;
+            this.ModalBusy = false;
             this.visibleChange.emit(event);
+            this.createDirectoryPermissionName = '';
+            this._theSelectedTreeNode = '';
+            this.selectedTable = [];
+            this.uploadPictureStatusList = [];
             return;
         }
     }
     /**模态框保存 */
     modalSave() {
-        let selectedTablearr = this._FileApiService.deepClone(this.selectedTable);
+        const selectedTablearr = structuredClone(this.selectedTable);
         this.selectFilefn.emit(selectedTablearr);
         this.ModalVisibleChange(false);
     }
     /**初始化数据 */
     loadData() {
         if (this.ModalOpen && this._fileContainerName) {
-            this.hookToQuery();
+            this.list.maxResultCount = 100;
+            // this.filters.skipCount = 0;
             this.getFilesConfiguration();
+            if (!this.isCreateList) {
+                this.hookToQuery();
+                this.isCreateList = true;
+            }
+            else {
+                this.list.get();
+            }
+        }
+    }
+    /** 从tree获取数据 */
+    treeNodeData(event) {
+        this.fileGroupList = this.flattenNestedArray(event);
+    }
+    /**
+     * 将嵌套数组扁平化
+     * @param {Array} nestedArray - 包含嵌套children的数组
+     * @returns {Array} - 扁平化后的数组
+     */
+    flattenNestedArray(nestedArray) {
+        const result = [];
+        function flatten(items) {
+            if (!items)
+                return;
+            for (const item of items) {
+                // 将当前项添加到结果数组
+                result.push({ ...item });
+                // 如果有children属性且是数组，递归处理
+                if (item.children && Array.isArray(item.children)) {
+                    flatten(item.children);
+                }
+            }
         }
+        flatten(nestedArray);
+        return result;
     }
     /**tree-节点选择 */
     _nodeClick(event) {
+        this.filters.skipCount = 0;
         this._theSelectedTreeNode = event;
         this.list.get();
     }
     /**图片上传-获取文件信息改变 */
     async getFileChange(event) {
-        let files = new Array(...event.target.files);
+        const _that = this;
+        const files = new Array(...event.target.files);
         this.uploadPictureStatusList = files;
+        const uploadPromises = [];
         for (const file of files) {
             if (file.size > this.sizeLimit) {
                 this.setuploadPictureStatus(file, 2);
                 continue;
             }
-            await this.uploadingFile(file).then(() => {
+            uploadPromises.push(this.uploadingFile(file)
+                .then(res => {
                 this.setuploadPictureStatus(file, 1);
-                this.list.get();
-            }).catch(() => {
+            })
+                .catch(function (err) {
                 this.setuploadPictureStatus(file, 2);
-            }); // 等待每个文件上传完成  
-        }
-        this.list.get();
-        let isSubmit = !this.uploadPictureStatusList.some(el => el.status == 2);
-        if (isSubmit) {
-            // this.toaster.success("上传完成");
-            setTimeout(() => {
-                this.uploadPictureStatusList = [];
-            }, 6000);
+                return err;
+            }));
         }
+        Promise.all(uploadPromises).then((results) => {
+            _that.list.get();
+            const isSubmit = !_that.uploadPictureStatusList.some(el => el.status == 2);
+            if (isSubmit) {
+                setTimeout(() => {
+                    _that.uploadPictureStatusList = [];
+                }, 4000);
+            }
+        });
     }
     /**图片上传-设置uploadPictureStatusList的状态 */
     setuploadPictureStatus(file, type) {
@@ -760,49 +894,163 @@ class FileModalComponent {
     /**图片上传-递归按顺序上传 */
     uploadingFile(file) {
         return new Promise((resolve, rejects) => {
-            let formData = new FormData();
+            const formData = new FormData();
             formData.append('file', file, file.name);
             this.createFile({
                 file: formData,
                 containerName: this._fileContainerName,
                 directoryId: this._theSelectedTreeNode?.key || '',
-                entityId: ''
+                entityId: '',
             }).subscribe(res => {
-                resolve(true);
-            }, (err) => {
-                rejects(false);
+                resolve({ file: file.name, status: 'success', response: res });
+            }, err => {
+                rejects({ file: file.name, status: 'fail', error: err });
             });
         });
     }
-    ngOnChanges(changes) {
-        //Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
-        //Add '${implements OnChanges}' to the class.
-        this.selectedTable = this._FileApiService.deepClone(this.selectPickerFile);
-    }
     /**文件表格-获取表格数据 */
     hookToQuery() {
         const getData = (query) => this._FileService.getList({
             ...query,
             ...this.filters,
             containerName: this._fileContainerName,
-            directoryId: this._theSelectedTreeNode.key
+            directoryId: this._theSelectedTreeNode.key,
         });
-        const setData = (list) => (this.data = list);
+        const setData = (list) => {
+            this.data = list;
+            this.onPageChange(list.items);
+        };
         this.list.hookToQuery(getData).subscribe(setData);
     }
     /**文件表格-查看所有分组的文件数据 */
     lookAllFile() {
+        this.filters.skipCount = 0;
         this._theSelectedTreeNode = '';
         this.list.get();
     }
-    /**选择表格项 */
-    onSelectTableItem({ selected }) {
-        this.selectedTable = this._FileApiService.deepClone(selected);
-        let selectedTablearr = this.removeDuplicatesById(this.selectedTable);
-        if (selected.length > selectedTablearr.length) {
-            selectedTablearr = selectedTablearr.filter(el => el.id !== this.nowSelectId);
+    /**删除图片 */
+    deleteFile(file) {
+        this._FileService.delete(file.id).subscribe(res => {
+            this.toaster.success(this._LocalizationService.instant(`FileExplorer::DeletedSuccessfully`));
+            this.list.get();
+            const selectedTables = this.selectedTable;
+            this.selectedTable = selectedTables.filter(el => el.id != file.id);
+        });
+    }
+    /**删除所有选中图片 */
+    onDeleteAllSelectFile() {
+        this.confirmation
+            .warn('', {
+            key: '',
+            defaultValue: this._LocalizationService.instant(`FileExplorer::AreYouSure`),
+        })
+            .subscribe(async (status) => {
+            if (status == 'confirm') {
+                const selectedTable = this.selectedTable;
+                try {
+                    const result = await this.batchDeleteItems(selectedTable);
+                    console.log(result, 'resultresultresult');
+                    if (result.success) {
+                        this.toaster.success(result.message);
+                        this.list.get();
+                        this.selectedTable = [];
+                        // 可能需要刷新表格或更新UI
+                    }
+                    else {
+                        //删除失败的项
+                        this.list.get();
+                        // 可以选择展示失败项或重试
+                        this.selectedTable = result.failedItems;
+                    }
+                }
+                catch (error) {
+                    //批量删除过程中发生错误
+                }
+            }
+        });
+    }
+    /**
+     * 批量删除表格项
+     * @param selectedTable 需要删除的表格项数组
+     * @returns 包含成功状态和失败项的结果对象
+     */
+    async batchDeleteItems(selectedTable) {
+        // 存储所有删除请求的Promise
+        const deletePromises = selectedTable.map(item => {
+            return new Promise((resolve, reject) => {
+                this._FileService.delete(item.id).subscribe(() => {
+                    resolve(null);
+                }, () => {
+                    reject(item);
+                });
+            });
+        });
+        // 等待所有请求完成
+        const results = await Promise.allSettled(deletePromises);
+        // 收集失败的项
+        const failedItems = [];
+        results.forEach(result => {
+            if (result.status === 'rejected') {
+                failedItems.push(result.reason);
+            }
+        });
+        return {
+            success: failedItems.length === 0,
+            failedItems,
+            message: failedItems.length === 0
+                ? this._LocalizationService.instant(`FileExplorer::DeletedSuccessfully`)
+                : `${failedItems.length}个项删除失败`,
+        };
+    }
+    /**关闭文件状态弹窗 */
+    closeFileStatusModal() {
+        this.uploadPictureStatusList = [];
+    }
+    ngOnChanges(changes) {
+        //Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
+        //Add '${implements OnChanges}' to the class.
+        this.selectedTable = structuredClone(this.selectPickerFile);
+    }
+    /**表格分页切换 */
+    onPageChange(newArray) {
+        this.isAllSelected = this.isAllSelectedFn(newArray, this.selectedTable);
+    }
+    /**行选择框改变 */
+    onCheckboxChangeFn(event, row, array) {
+        const { checked } = event.target;
+        let selectedTableArray = [...this.selectedTable];
+        if (this._multiple) {
+            if (checked) {
+                selectedTableArray.push(row);
+            }
+            else {
+                selectedTableArray = selectedTableArray.filter(el => el.id != row.id);
+            }
+            this.isAllSelected = this.isAllSelectedFn(array, selectedTableArray);
         }
-        this.selectedTable = selectedTablearr;
+        else {
+            selectedTableArray.length = 0;
+            selectedTableArray = checked ? [row] : [];
+        }
+        this.selectedTable = this.removeDuplicatesById(selectedTableArray);
+    }
+    /**如果selectedTableArray不含array中的所有项，则将isAllSelected设为true,否则设为false */
+    isAllSelectedFn(tolalArray, selectedArray = []) {
+        if (tolalArray.length == 0)
+            return false;
+        return tolalArray.every(item => selectedArray.some(el => el.id === item.id));
+    }
+    /**选择当前页全部 */
+    onSelectAllFn(event, array) {
+        let selectedTableArray = this.selectedTable;
+        if (event.target.checked) {
+            selectedTableArray = this.removeDuplicatesById([...selectedTableArray, ...array]);
+        }
+        else {
+            selectedTableArray = selectedTableArray.filter(el => !array.some(item => item.id === el.id));
+        }
+        this.isAllSelected = event.target.checked;
+        this.selectedTable = selectedTableArray;
     }
     /**删除数组中重复的项 */
     removeDuplicatesById(array) {
@@ -815,32 +1063,61 @@ class FileModalComponent {
             return false;
         });
     }
-    /**删除图片 */
-    deleteFile(file) {
-        this.confirmation
-            .warn('', { key: '', defaultValue: this._LocalizationService.instant(`AbpUi::ItemWillBeDeletedMessage`) })
-            .subscribe((status) => {
-            if (status == 'confirm') {
-                this._FileService.delete(file.id).subscribe(res => {
-                    this.toaster.success(this._LocalizationService.instant(`AbpUi::DeletedSuccessfully`));
-                    this.list.get();
-                });
+    /**提交FileName编辑 */
+    onSubmitFileName(event) {
+        const input = this.FileNameForm.value;
+        if (!this.FileNameForm.valid)
+            return;
+        if (this.isloading)
+            return;
+        this.isloading = true;
+        this._FileService
+            .update(input.id, {
+            name: input.fileName,
+        })
+            .pipe(finalize(() => {
+            this.isloading = false;
+        }))
+            .subscribe(res => {
+            //通过当前newEditRow的id,修改data.items中对应项的name
+            for (const element of this.data.items) {
+                if (element.id == this.newEditRow.id) {
+                    element.name = input.fileName;
+                    break;
+                }
             }
+            this.FileNameForm = undefined;
+            this.newEditRow = '';
+            this.toaster.success(this._LocalizationService.instant(`FileExplorer::SavedSuccessfully`));
+            // this.list.get();
         });
     }
-    /**关闭文件状态弹窗 */
-    closeFileStatusModal() {
-        this.uploadPictureStatusList = [];
+    /**打开编辑 */
+    onEditFileName(row) {
+        this.FileNameForm = new FormGroup({
+            fileName: new FormControl('', [Validators.required]),
+            id: new FormControl('', [Validators.required]),
+        });
+        this.FileNameForm.patchValue({
+            fileName: row.name,
+            id: row.id,
+        });
+        this.newEditRow = row;
+    }
+    /**关闭编辑 */
+    onCancelFileName(row) {
+        this.newEditRow = '';
+        this.FileNameForm = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileModalComponent, deps: [{ token: FileDescriptorService$1 }, { token: i2$1.ToasterService }, { token: i3.ListService }, { token: FileApiService }, { token: i3.RestService }, { token: i2$1.ConfirmationService }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileModalComponent, selector: "fe-file-modal", inputs: { fileContainerName: "fileContainerName", multiple: "multiple", limit: "limit", visible: "visible", selectPickerFile: "selectPickerFile" }, outputs: { visibleChange: "visibleChange", selectFilefn: "selectFilefn" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileModalComponent, deps: [{ token: FileDescriptorService$1 }, { token: i2$1.ToasterService }, { token: i3.ListService }, { token: i3.RestService }, { token: i2$1.ConfirmationService }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.5", type: FileModalComponent, selector: "fe-file-modal", inputs: { fileContainerName: "fileContainerName", multiple: "multiple", limit: "limit", visible: "visible", selectPickerFile: "selectPickerFile" }, outputs: { visibleChange: "visibleChange", selectFilefn: "selectFilefn" }, providers: [
             // [Required]
             ListService,
             // [Optional]
             // Provide this token if you want a different debounce time.
             // Default is 300. Cannot be 0. Any value below 100 is not recommended.
             { provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 500 },
-        ], usesOnChanges: true, ngImport: i0, template: "<abp-modal [(visible)]=\"ModalOpen\" (visibleChange)=\"ModalVisibleChange($event)\"\n  [options]=\"{ size: 'xl', scrollable: false }\">\n  <ng-template #abpHeader>\n    <h3>{{'FileExplorer::FileExplorer' | abpLocalization}}</h3>\n  </ng-template>\n  <ng-template #abpBody>\n    <div class=\"row file-explorer-modal-body file-modal\">\n      <div class=\"col-3\" *ngIf=\"createDirectoryPermissionName\"  style=\"overflow: auto; height: calc(100vh - 240px)\">\n        <fe-file-modal-tree [theSelectedTreeNode]=\"_theSelectedTreeNode\" (nodeClick)=\"_nodeClick($event)\"\n          [fileContainerName]=\"_fileContainerName\"></fe-file-modal-tree>\n      </div>\n      <div [class]=\"createDirectoryPermissionName?'col-9':'col-12'\" style=\"height: calc(100vh - 240px)\">\n        <div class=\"mb-3 d-flex justify-content-between align-items-center\">\n          <div class=\"btn-link\" role=button style=\"flex: 2\" (click)=\"lookAllFile()\">{{'FileExplorer::AllFiles' | abpLocalization}}</div>\n          <div class=\"input-group form-file\" style=\"flex: 2\">\n            <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" \n              (change)=\"getFileChange($event)\" />\n          </div>\n        </div>\n        <div>\n          <ngx-datatable class=\"material container-height\" [rows]=\"data.items\" [list]=\"list\" columnMode=\"flex\"\n            [columns]=\"columns\" [headerHeight]=\"50\" [footerHeight]=\"50\" rowHeight=\"auto\" [scrollbarV]=\"true\"\n            [virtualization]=\"false\" [externalPaging]=\"true\" [count]=\"data.totalCount\" [selected]=\"selectedTable\"\n            [selectCheck]=\"selectCheck\" [selectionType]=\"_multiple?SelectionType.multiClick:SelectionType.single\" (select)=\"onSelectTableItem($event)\">\n            <ngx-datatable-column [width]=\"50\" prop=\"id\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\"\n              [resizeable]=\"false\">\n              <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\n                let-selectFn=\"selectFn\">\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"allRowsSelected\"\n                  (change)=\"selectFn(!allRowsSelected)\" />\n              </ng-template>\n              <ng-template ngx-datatable-cell-template let-row=\"row\" let-value=\"value\" let-isSelected=\"isSelected\"\n                let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"selectedcheckbox(value)\"\n                  (change)=\"onCheckboxChangeFn($event)\" />\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column   [flexGrow]=\"2\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                <fe-file-preview [width]=\"'80px'\" [src]=\"row.url\" [name]=\"row.name\" [type]=\"row.mimeType\" [preview]=\"true\"></fe-file-preview>\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [name]=\"'FileExplorer::FileName' | abpLocalization\" prop=\"name\" [flexGrow]=\"4\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                {{ value }}\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column  [name]=\"'FileExplorer::FileSize' | abpLocalization\" prop=\"size\" [flexGrow]=\"1.5\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                {{ _FileApiService.formatFileSize(value) }}\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column  [name]=\"'FileExplorer::Directory' | abpLocalization\" prop=\"cellName\" [flexGrow]=\"1\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                {{ value }}\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [name]=\"'FileExplorer::CreationTime' | abpLocalization\" prop=\"creationTime\" [flexGrow]=\"2\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                {{ value | date : 'YYYY/MM/dd HH:mm:s' }}\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [flexGrow]=\"1\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                <button class=\"btn btn-sm btn-light p-0\" (click.stop)=\"deleteFile(row)\">\n                  <i class=\"fas fa-trash text-primary p-2\"></i>\n                </button>\n              </ng-template>\n            </ngx-datatable-column>\n          </ngx-datatable>\n        </div>\n        <div *ngIf=\"uploadPictureStatusList.length > 0\"\n          class=\"position-fixed bottom-0 end-0 shadow-lg file-status-modal   m-5\"\n          style=\"border-radius: 10px\">\n          <div class=\"card p-1\">\n            <div class=\"card-header d-flex align-items-center justify-content-between p-0 py-1 border-bottom\">\n              <div>{{'FileExplorer::UploadFiles' | abpLocalization}}</div>\n              <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click.stop)=\"closeFileStatusModal()\"></button>\n            </div>\n            <div class=\"card-body\">\n              <table class=\"table\">\n                <thead>\n                  <tr>\n                    <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n                    <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n                    <th scope=\"col\"></th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <ng-container *ngFor=\"let item of uploadPictureStatusList; let i = index\">\n                    <tr>\n                      <th scope=\"row\">\n                        <div>{{ item.name }}</div>\n                        <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n                          {{'FileExplorer::ExceedsMaximumSize' | abpLocalization:_FileApiService.formatFileSize(sizeLimit)}}\n                        </div>\n                      </th>\n                      <td>{{ item.fileSize }}</td>\n                      <td>\n                        <i *ngIf=\"item.status === 1\" class=\"fas fa-check text-primary\"></i>\n                        <i *ngIf=\"item.status === 2\" class=\"fas fa-times-circle text-danger\"></i>\n                      </td>\n                    </tr>\n                  </ng-container>\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n  <ng-template #abpFooter>\n    <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n    <abp-button iconClass=\"fa fa-check\" (click)=\"modalSave()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n  </ng-template>\n</abp-modal>", styles: ["::ng-deep .file-modal .container-height{height:calc(100vh - 284px)}::ng-deep .file-modal .file-status-modal{background:#fff}::ng-deep .file-modal .file-status-modal .card-body{max-height:300px;overflow-y:auto}::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group{background-color:transparent!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper{padding:0}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .custom-node{width:100%}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected{background-color:var(--lpx-brand)!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected .btn{color:var(--lpx-navbar-color)}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:transparent}::ng-deep .file-modal .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell,::ng-deep .file-modal .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell{overflow:initial;line-break:anywhere}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i6.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { kind: "directive", type: i6.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i2$1.NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i2$1.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i2$1.ModalCloseDirective, selector: "[abpClose]" }, { kind: "component", type: FileModalTreeComponent, selector: "fe-file-modal-tree", inputs: ["theSelectedTreeNode", "fileContainerName"], outputs: ["nodeClick"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name", "className"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<abp-modal [(visible)]=\"ModalOpen\" (visibleChange)=\"ModalVisibleChange($event)\"\n  [options]=\"{ size: 'xl', scrollable: false }\">\n  <ng-template #abpHeader>\n    <h3>{{'FileExplorer::FileExplorer' | abpLocalization}}</h3>\n  </ng-template>\n  <ng-template #abpBody>\n    <div class=\"row file-explorer-modal-body file-modal\" *ngIf=\"ModalOpen\">\n      <div class=\"col-3\" *ngIf=\"createDirectoryPermissionName\" style=\"overflow: auto; height: calc(100vh - 240px)\">\n        <fe-file-modal-tree [theSelectedTreeNode]=\"_theSelectedTreeNode\" (nodeClick)=\"_nodeClick($event)\"\n          (lookAllBtn)=\"lookAllFile()\" (treeNodeData)=\"treeNodeData($event)\"\n          [fileContainerName]=\"_fileContainerName\"></fe-file-modal-tree>\n      </div>\n      <div [class]=\"createDirectoryPermissionName?'col-9':'col-12'\" style=\"height: calc(100vh - 240px)\">\n        <div class=\"mb-3 d-flex justify-content-between align-items-center\">\n          <div style=\"flex: 2\"><span *ngIf=\"selectedTable.length>1\" class=\"btn-link\"\n              (click.stop)=\"onDeleteAllSelectFile()\" role=\"button\">{{'FileExplorer::Delete' | abpLocalization}}</span>\n          </div>\n          <div class=\"input-group form-file\" style=\"flex: 2\">\n            <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" (change)=\"getFileChange($event)\" />\n          </div>\n        </div>\n        <div>\n          <!-- [selectionType]=\"_multiple?SelectionType.checkbox:SelectionType.single\" -->\n          <!-- [selectCheck]=\"selectCheck\" -->\n          <ngx-datatable class=\"material container-height\" [rows]=\"data.items\" [list]=\"list\" columnMode=\"flex\"\n            [headerHeight]=\"50\" [footerHeight]=\"50\" rowHeight=\"auto\" [scrollbarV]=\"true\" [virtualization]=\"false\"\n            [externalPaging]=\"true\" [count]=\"data.totalCount\">\n            <ngx-datatable-column [width]=\"50\" prop=\"id\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\"\n              [resizeable]=\"false\">\n              <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\n                let-selectFn=\"selectFn\">\n                <input type=\"checkbox\" class=\"form-check-input\" *ngIf=\"_multiple\" [checked]=\"isAllSelected\"\n                  (change)=\"onSelectAllFn($event,data.items)\" />\n              </ng-template>\n              <ng-template ngx-datatable-cell-template let-row=\"row\" let-value=\"value\">\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"selectedcheckbox(value)\"\n                  (change)=\"onCheckboxChangeFn($event,row,data.items)\" />\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [sortable]=\"false\" [flexGrow]=\"2\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                <fe-file-preview [width]=\"'80px'\" [src]=\"row.url\" [name]=\"row.name\" [type]=\"row.mimeType\"\n                  [preview]=\"true\"></fe-file-preview>\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [name]=\"'FileExplorer::FileName' | abpLocalization\" prop=\"name\" [sortable]=\"false\"\n              [flexGrow]=\"4\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                <div class=\"d-flex align-items-start titlehover\" *ngIf=\"newEditRow.id!==row.id\">\n                  <span class=\"me-2\">{{ value }}</span>\n                  <i class=\"fa fa-pencil-square-o\" role=\"button\" (click.stop)=\"onEditFileName(row)\" style=\"line-height:2;\" aria-hidden=\"true\"></i>\n                </div>\n                <div *ngIf=\"FileNameForm&&newEditRow.id===row.id\">\n                  <form [formGroup]=\"FileNameForm\" (ngSubmit)=\"onSubmitFileName($event)\">\n                    <div class=\"d-flex align-items-start\">\n                      <div class=\"me-2\">\n                        <input class=\"form-control \" type=\"text\"  formControlName=\"fileName\">\n                      </div>\n                      <button class=\" btn btn-sm\" type=\"submit\">\n                        <i class=\"fa-spin fa fa-spinner\" *ngIf=\"isloading\"></i>\n                        <i class=\"fa fa-check\" aria-hidden=\"true\" *ngIf=\"!isloading\"></i></button>\n                      <button class=\" btn btn-sm\" (click.stop)=\"onCancelFileName(row)\"><i class=\"fa fa-times\" type=\"reset\" aria-hidden=\"true\"></i></button>\n                      \n                    </div>\n                  </form>\n                </div>\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [name]=\"'FileExplorer::FileSize' | abpLocalization\" prop=\"size\" [flexGrow]=\"1.5\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                {{(value|formatFileSize) }}\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [name]=\"'FileExplorer::Directory' | abpLocalization\" prop=\"directoryId\"\n              [sortable]=\"false\" [flexGrow]=\"1\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                {{ value|getDirectoryName:fileGroupList }}\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [name]=\"'FileExplorer::CreationTime' | abpLocalization\" prop=\"creationTime\"\n              [flexGrow]=\"2\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                {{ value | date : 'YYYY/MM/dd HH:mm:s' }}\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [flexGrow]=\"1\" [sortable]=\"false\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                <button class=\"btn btn-sm btn-light p-0\" (click.stop)=\"deleteFile(row)\">\n                  <i class=\"fas fa-trash text-primary p-2\"></i>\n                </button>\n              </ng-template>\n            </ngx-datatable-column>\n          </ngx-datatable>\n        </div>\n        <div *ngIf=\"uploadPictureStatusList.length > 0\"\n          class=\"position-fixed bottom-0 end-0 shadow-lg file-status-modal   m-5\" style=\"border-radius: 10px\">\n          <div class=\"card p-1\">\n            <div class=\"card-header d-flex align-items-center justify-content-between p-0 py-1 border-bottom\">\n              <div>{{'FileExplorer::UploadFiles' | abpLocalization}}</div>\n              <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click.stop)=\"closeFileStatusModal()\"></button>\n            </div>\n            <div class=\"card-body\">\n              <table class=\"table\">\n                <thead>\n                  <tr>\n                    <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n                    <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n                    <th scope=\"col\"></th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <ng-container *ngFor=\"let item of uploadPictureStatusList; let i = index\">\n                    <tr>\n                      <th scope=\"row\">\n                        <div>{{ item.name }}</div>\n                        <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n                          {{'FileExplorer::ExceedsMaximumSize' |\n                          abpLocalization:(sizeLimit|formatFileSize)}}\n                        </div>\n                      </th>\n                      <td>{{ item.size | formatFileSize }}</td>\n                      <td>\n                        <i *ngIf=\"item.status === 1\" class=\"fas fa-check text-primary\"></i>\n                        <i *ngIf=\"item.status === 2\" class=\"fas fa-times-circle text-danger\"></i>\n                      </td>\n                    </tr>\n                  </ng-container>\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n  <ng-template #abpFooter>\n    <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n    <abp-button iconClass=\"fa fa-check\" (click)=\"modalSave()\">{{'FileExplorer::Confirm' | abpLocalization}}\n      @if(selectedTable.length>0){\n      ({{selectedTable.length}})\n      }\n    </abp-button>\n  </ng-template>\n</abp-modal>", styles: ["::ng-deep .file-modal .container-height{height:calc(100vh - 284px)}::ng-deep .file-modal .file-status-modal{background:#fff}::ng-deep .file-modal .file-status-modal .card-body{max-height:300px;overflow-y:auto}::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group{background-color:transparent!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper{padding:0}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .ng-star-inserted[title]{padding:0 10px}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .custom-node{width:100%}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected{background-color:var(--lpx-brand)!important;color:var(--lpx-brand-text)}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:transparent}::ng-deep .file-modal .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell,::ng-deep .file-modal .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell{overflow:initial;line-break:anywhere}::ng-deep .file-modal input[type=checkbox]{cursor:pointer}::ng-deep .file-modal .titlehover i{display:none}::ng-deep .file-modal .titlehover:hover i{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormSubmitDirective, selector: "form[ngSubmit][formGroup]", inputs: ["debounce", "notValidateOnSubmit", "markAsDirtyWhenSubmit"], outputs: ["ngSubmit"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i6.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { kind: "directive", type: i6.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i3$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "directive", type: i2$1.NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i2$1.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i2$1.ModalCloseDirective, selector: "[abpClose]" }, { kind: "component", type: FileModalTreeComponent, selector: "fe-file-modal-tree", inputs: ["theSelectedTreeNode", "fileContainerName"], outputs: ["nodeClick", "treeNodeData", "lookAllBtn"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name", "className"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: GetDirectoryNamePipe, name: "getDirectoryName" }, { kind: "pipe", type: FormatFileSizePipe, name: "formatFileSize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileModalComponent, decorators: [{
             type: Component,
@@ -851,8 +1128,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                         // Provide this token if you want a different debounce time.
                         // Default is 300. Cannot be 0. Any value below 100 is not recommended.
                         { provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 500 },
-                    ], template: "<abp-modal [(visible)]=\"ModalOpen\" (visibleChange)=\"ModalVisibleChange($event)\"\n  [options]=\"{ size: 'xl', scrollable: false }\">\n  <ng-template #abpHeader>\n    <h3>{{'FileExplorer::FileExplorer' | abpLocalization}}</h3>\n  </ng-template>\n  <ng-template #abpBody>\n    <div class=\"row file-explorer-modal-body file-modal\">\n      <div class=\"col-3\" *ngIf=\"createDirectoryPermissionName\"  style=\"overflow: auto; height: calc(100vh - 240px)\">\n        <fe-file-modal-tree [theSelectedTreeNode]=\"_theSelectedTreeNode\" (nodeClick)=\"_nodeClick($event)\"\n          [fileContainerName]=\"_fileContainerName\"></fe-file-modal-tree>\n      </div>\n      <div [class]=\"createDirectoryPermissionName?'col-9':'col-12'\" style=\"height: calc(100vh - 240px)\">\n        <div class=\"mb-3 d-flex justify-content-between align-items-center\">\n          <div class=\"btn-link\" role=button style=\"flex: 2\" (click)=\"lookAllFile()\">{{'FileExplorer::AllFiles' | abpLocalization}}</div>\n          <div class=\"input-group form-file\" style=\"flex: 2\">\n            <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" \n              (change)=\"getFileChange($event)\" />\n          </div>\n        </div>\n        <div>\n          <ngx-datatable class=\"material container-height\" [rows]=\"data.items\" [list]=\"list\" columnMode=\"flex\"\n            [columns]=\"columns\" [headerHeight]=\"50\" [footerHeight]=\"50\" rowHeight=\"auto\" [scrollbarV]=\"true\"\n            [virtualization]=\"false\" [externalPaging]=\"true\" [count]=\"data.totalCount\" [selected]=\"selectedTable\"\n            [selectCheck]=\"selectCheck\" [selectionType]=\"_multiple?SelectionType.multiClick:SelectionType.single\" (select)=\"onSelectTableItem($event)\">\n            <ngx-datatable-column [width]=\"50\" prop=\"id\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\"\n              [resizeable]=\"false\">\n              <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\n                let-selectFn=\"selectFn\">\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"allRowsSelected\"\n                  (change)=\"selectFn(!allRowsSelected)\" />\n              </ng-template>\n              <ng-template ngx-datatable-cell-template let-row=\"row\" let-value=\"value\" let-isSelected=\"isSelected\"\n                let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"selectedcheckbox(value)\"\n                  (change)=\"onCheckboxChangeFn($event)\" />\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column   [flexGrow]=\"2\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                <fe-file-preview [width]=\"'80px'\" [src]=\"row.url\" [name]=\"row.name\" [type]=\"row.mimeType\" [preview]=\"true\"></fe-file-preview>\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [name]=\"'FileExplorer::FileName' | abpLocalization\" prop=\"name\" [flexGrow]=\"4\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                {{ value }}\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column  [name]=\"'FileExplorer::FileSize' | abpLocalization\" prop=\"size\" [flexGrow]=\"1.5\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                {{ _FileApiService.formatFileSize(value) }}\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column  [name]=\"'FileExplorer::Directory' | abpLocalization\" prop=\"cellName\" [flexGrow]=\"1\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                {{ value }}\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [name]=\"'FileExplorer::CreationTime' | abpLocalization\" prop=\"creationTime\" [flexGrow]=\"2\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                {{ value | date : 'YYYY/MM/dd HH:mm:s' }}\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [flexGrow]=\"1\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                <button class=\"btn btn-sm btn-light p-0\" (click.stop)=\"deleteFile(row)\">\n                  <i class=\"fas fa-trash text-primary p-2\"></i>\n                </button>\n              </ng-template>\n            </ngx-datatable-column>\n          </ngx-datatable>\n        </div>\n        <div *ngIf=\"uploadPictureStatusList.length > 0\"\n          class=\"position-fixed bottom-0 end-0 shadow-lg file-status-modal   m-5\"\n          style=\"border-radius: 10px\">\n          <div class=\"card p-1\">\n            <div class=\"card-header d-flex align-items-center justify-content-between p-0 py-1 border-bottom\">\n              <div>{{'FileExplorer::UploadFiles' | abpLocalization}}</div>\n              <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click.stop)=\"closeFileStatusModal()\"></button>\n            </div>\n            <div class=\"card-body\">\n              <table class=\"table\">\n                <thead>\n                  <tr>\n                    <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n                    <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n                    <th scope=\"col\"></th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <ng-container *ngFor=\"let item of uploadPictureStatusList; let i = index\">\n                    <tr>\n                      <th scope=\"row\">\n                        <div>{{ item.name }}</div>\n                        <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n                          {{'FileExplorer::ExceedsMaximumSize' | abpLocalization:_FileApiService.formatFileSize(sizeLimit)}}\n                        </div>\n                      </th>\n                      <td>{{ item.fileSize }}</td>\n                      <td>\n                        <i *ngIf=\"item.status === 1\" class=\"fas fa-check text-primary\"></i>\n                        <i *ngIf=\"item.status === 2\" class=\"fas fa-times-circle text-danger\"></i>\n                      </td>\n                    </tr>\n                  </ng-container>\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n  <ng-template #abpFooter>\n    <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n    <abp-button iconClass=\"fa fa-check\" (click)=\"modalSave()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n  </ng-template>\n</abp-modal>", styles: ["::ng-deep .file-modal .container-height{height:calc(100vh - 284px)}::ng-deep .file-modal .file-status-modal{background:#fff}::ng-deep .file-modal .file-status-modal .card-body{max-height:300px;overflow-y:auto}::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group{background-color:transparent!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper{padding:0}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .custom-node{width:100%}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected{background-color:var(--lpx-brand)!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected .btn{color:var(--lpx-navbar-color)}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:transparent}::ng-deep .file-modal .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell,::ng-deep .file-modal .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell{overflow:initial;line-break:anywhere}\n"] }]
-        }], ctorParameters: () => [{ type: FileDescriptorService$1 }, { type: i2$1.ToasterService }, { type: i3.ListService }, { type: FileApiService }, { type: i3.RestService }, { type: i2$1.ConfirmationService }, { type: i3.LocalizationService }], propDecorators: { fileContainerName: [{
+                    ], template: "<abp-modal [(visible)]=\"ModalOpen\" (visibleChange)=\"ModalVisibleChange($event)\"\n  [options]=\"{ size: 'xl', scrollable: false }\">\n  <ng-template #abpHeader>\n    <h3>{{'FileExplorer::FileExplorer' | abpLocalization}}</h3>\n  </ng-template>\n  <ng-template #abpBody>\n    <div class=\"row file-explorer-modal-body file-modal\" *ngIf=\"ModalOpen\">\n      <div class=\"col-3\" *ngIf=\"createDirectoryPermissionName\" style=\"overflow: auto; height: calc(100vh - 240px)\">\n        <fe-file-modal-tree [theSelectedTreeNode]=\"_theSelectedTreeNode\" (nodeClick)=\"_nodeClick($event)\"\n          (lookAllBtn)=\"lookAllFile()\" (treeNodeData)=\"treeNodeData($event)\"\n          [fileContainerName]=\"_fileContainerName\"></fe-file-modal-tree>\n      </div>\n      <div [class]=\"createDirectoryPermissionName?'col-9':'col-12'\" style=\"height: calc(100vh - 240px)\">\n        <div class=\"mb-3 d-flex justify-content-between align-items-center\">\n          <div style=\"flex: 2\"><span *ngIf=\"selectedTable.length>1\" class=\"btn-link\"\n              (click.stop)=\"onDeleteAllSelectFile()\" role=\"button\">{{'FileExplorer::Delete' | abpLocalization}}</span>\n          </div>\n          <div class=\"input-group form-file\" style=\"flex: 2\">\n            <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" (change)=\"getFileChange($event)\" />\n          </div>\n        </div>\n        <div>\n          <!-- [selectionType]=\"_multiple?SelectionType.checkbox:SelectionType.single\" -->\n          <!-- [selectCheck]=\"selectCheck\" -->\n          <ngx-datatable class=\"material container-height\" [rows]=\"data.items\" [list]=\"list\" columnMode=\"flex\"\n            [headerHeight]=\"50\" [footerHeight]=\"50\" rowHeight=\"auto\" [scrollbarV]=\"true\" [virtualization]=\"false\"\n            [externalPaging]=\"true\" [count]=\"data.totalCount\">\n            <ngx-datatable-column [width]=\"50\" prop=\"id\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\"\n              [resizeable]=\"false\">\n              <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\n                let-selectFn=\"selectFn\">\n                <input type=\"checkbox\" class=\"form-check-input\" *ngIf=\"_multiple\" [checked]=\"isAllSelected\"\n                  (change)=\"onSelectAllFn($event,data.items)\" />\n              </ng-template>\n              <ng-template ngx-datatable-cell-template let-row=\"row\" let-value=\"value\">\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"selectedcheckbox(value)\"\n                  (change)=\"onCheckboxChangeFn($event,row,data.items)\" />\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [sortable]=\"false\" [flexGrow]=\"2\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                <fe-file-preview [width]=\"'80px'\" [src]=\"row.url\" [name]=\"row.name\" [type]=\"row.mimeType\"\n                  [preview]=\"true\"></fe-file-preview>\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [name]=\"'FileExplorer::FileName' | abpLocalization\" prop=\"name\" [sortable]=\"false\"\n              [flexGrow]=\"4\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                <div class=\"d-flex align-items-start titlehover\" *ngIf=\"newEditRow.id!==row.id\">\n                  <span class=\"me-2\">{{ value }}</span>\n                  <i class=\"fa fa-pencil-square-o\" role=\"button\" (click.stop)=\"onEditFileName(row)\" style=\"line-height:2;\" aria-hidden=\"true\"></i>\n                </div>\n                <div *ngIf=\"FileNameForm&&newEditRow.id===row.id\">\n                  <form [formGroup]=\"FileNameForm\" (ngSubmit)=\"onSubmitFileName($event)\">\n                    <div class=\"d-flex align-items-start\">\n                      <div class=\"me-2\">\n                        <input class=\"form-control \" type=\"text\"  formControlName=\"fileName\">\n                      </div>\n                      <button class=\" btn btn-sm\" type=\"submit\">\n                        <i class=\"fa-spin fa fa-spinner\" *ngIf=\"isloading\"></i>\n                        <i class=\"fa fa-check\" aria-hidden=\"true\" *ngIf=\"!isloading\"></i></button>\n                      <button class=\" btn btn-sm\" (click.stop)=\"onCancelFileName(row)\"><i class=\"fa fa-times\" type=\"reset\" aria-hidden=\"true\"></i></button>\n                      \n                    </div>\n                  </form>\n                </div>\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [name]=\"'FileExplorer::FileSize' | abpLocalization\" prop=\"size\" [flexGrow]=\"1.5\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                {{(value|formatFileSize) }}\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [name]=\"'FileExplorer::Directory' | abpLocalization\" prop=\"directoryId\"\n              [sortable]=\"false\" [flexGrow]=\"1\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                {{ value|getDirectoryName:fileGroupList }}\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [name]=\"'FileExplorer::CreationTime' | abpLocalization\" prop=\"creationTime\"\n              [flexGrow]=\"2\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                {{ value | date : 'YYYY/MM/dd HH:mm:s' }}\n              </ng-template>\n            </ngx-datatable-column>\n            <ngx-datatable-column [flexGrow]=\"1\" [sortable]=\"false\">\n              <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                <button class=\"btn btn-sm btn-light p-0\" (click.stop)=\"deleteFile(row)\">\n                  <i class=\"fas fa-trash text-primary p-2\"></i>\n                </button>\n              </ng-template>\n            </ngx-datatable-column>\n          </ngx-datatable>\n        </div>\n        <div *ngIf=\"uploadPictureStatusList.length > 0\"\n          class=\"position-fixed bottom-0 end-0 shadow-lg file-status-modal   m-5\" style=\"border-radius: 10px\">\n          <div class=\"card p-1\">\n            <div class=\"card-header d-flex align-items-center justify-content-between p-0 py-1 border-bottom\">\n              <div>{{'FileExplorer::UploadFiles' | abpLocalization}}</div>\n              <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click.stop)=\"closeFileStatusModal()\"></button>\n            </div>\n            <div class=\"card-body\">\n              <table class=\"table\">\n                <thead>\n                  <tr>\n                    <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n                    <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n                    <th scope=\"col\"></th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <ng-container *ngFor=\"let item of uploadPictureStatusList; let i = index\">\n                    <tr>\n                      <th scope=\"row\">\n                        <div>{{ item.name }}</div>\n                        <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n                          {{'FileExplorer::ExceedsMaximumSize' |\n                          abpLocalization:(sizeLimit|formatFileSize)}}\n                        </div>\n                      </th>\n                      <td>{{ item.size | formatFileSize }}</td>\n                      <td>\n                        <i *ngIf=\"item.status === 1\" class=\"fas fa-check text-primary\"></i>\n                        <i *ngIf=\"item.status === 2\" class=\"fas fa-times-circle text-danger\"></i>\n                      </td>\n                    </tr>\n                  </ng-container>\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n  <ng-template #abpFooter>\n    <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n    <abp-button iconClass=\"fa fa-check\" (click)=\"modalSave()\">{{'FileExplorer::Confirm' | abpLocalization}}\n      @if(selectedTable.length>0){\n      ({{selectedTable.length}})\n      }\n    </abp-button>\n  </ng-template>\n</abp-modal>", styles: ["::ng-deep .file-modal .container-height{height:calc(100vh - 284px)}::ng-deep .file-modal .file-status-modal{background:#fff}::ng-deep .file-modal .file-status-modal .card-body{max-height:300px;overflow-y:auto}::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group{background-color:transparent!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper{padding:0}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .ng-star-inserted[title]{padding:0 10px}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .custom-node{width:100%}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected{background-color:var(--lpx-brand)!important;color:var(--lpx-brand-text)}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:transparent}::ng-deep .file-modal .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell,::ng-deep .file-modal .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell{overflow:initial;line-break:anywhere}::ng-deep .file-modal input[type=checkbox]{cursor:pointer}::ng-deep .file-modal .titlehover i{display:none}::ng-deep .file-modal .titlehover:hover i{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: FileDescriptorService$1 }, { type: i2$1.ToasterService }, { type: i3.ListService }, { type: i3.RestService }, { type: i2$1.ConfirmationService }, { type: i3.LocalizationService }], propDecorators: { fileContainerName: [{
                 type: Input
             }], multiple: [{
                 type: Input
@@ -862,16 +1139,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                 type: Input
             }], visibleChange: [{
                 type: Output
-            }], selectPickerFile: [{
-                type: Input
             }], selectFilefn: [{
                 type: Output
+            }], selectPickerFile: [{
+                type: Input
             }] } });
 
 /* eslint-disable @angular-eslint/component-selector */
 class FilePickerComponent {
-    constructor(_FileApiService) {
-        this._FileApiService = _FileApiService;
+    constructor() {
         /**是否多选 */
         this._multiple = false;
         /**图片容器 */
@@ -888,14 +1164,14 @@ class FilePickerComponent {
         this._fileContainerName = v;
     }
     ngOnChanges(changes) {
-        let selectFormFilengOnChanges = changes.selectFormFile['currentValue'];
+        const selectFormFilengOnChanges = changes.selectFormFile['currentValue'];
         if (selectFormFilengOnChanges.length > 0) {
             this._fileShowTable = selectFormFilengOnChanges;
         }
     }
     /**表格选择的文件回调 */
     _selectFilefn(event) {
-        let _fileShowTable = this._FileApiService.deepClone(event);
+        const _fileShowTable = structuredClone(event);
         this._fileShowTable = _fileShowTable;
         this.selectFormFile = _fileShowTable;
         this.selectedFileChange.emit(_fileShowTable);
@@ -907,13 +1183,20 @@ class FilePickerComponent {
         this.selectedFileChange.emit([]);
         this.selectedFileChange.emit(this.selectFormFile);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FilePickerComponent, deps: [{ token: FileApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FilePickerComponent, selector: "fe-file-picker", inputs: { multiple: "multiple", fileContainerName: "fileContainerName", selectFormFile: "selectFormFile" }, outputs: { selectedFileChange: "selectedFileChange" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"btn btn-sm btn-primary ms-2 float-end\" type=\"button\" (click.stop)=\"ModalOpen = true\">{{'FileExplorer::SelectFile' | abpLocalization}}</button>\n<fe-file-modal [(visible)]=\"ModalOpen\" [selectPickerFile]=\"selectFormFile\" [multiple]=\"_multiple\"  (selectFilefn)=\"_selectFilefn($event)\" [fileContainerName]=\"_fileContainerName\"></fe-file-modal>\n<table class=\"table\" *ngIf=\"_fileShowTable.length>0\">\n    <thead>\n        <tr>\n            <th scope=\"col\"></th>\n            <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n            <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n            <th scope=\"col\"></th>\n        </tr>\n    </thead>\n    <tbody>\n        <ng-container *ngFor=\"let item of _fileShowTable;let i =index\">\n            <tr>\n                <td>\n                    <fe-file-preview [width]=\"'80px'\" [src]=\"item.url||item.Url\" [name]=\"item.name||item.Name\" [type]=\"item.mimeType||item.MimeType\" [preview]=\"true\"></fe-file-preview>\n                </td>\n                <th scope=\"row\">\n                    <div>{{item.name||item.Name}}</div>\n                </th>\n                <td >{{_FileApiService.formatFileSize(item.Size||item.size)}}</td>\n                <td>\n                    <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n                        <i class=\"fas fa-trash p-2\"></i>\n                    </button>\n                </td>\n            </tr>\n        </ng-container>\n    </tbody>\n</table>\n\n\n", styles: [".table{border-collapse:collapse;table-layout:fixed}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: FileModalComponent, selector: "fe-file-modal", inputs: ["fileContainerName", "multiple", "limit", "visible", "selectPickerFile"], outputs: ["visibleChange", "selectFilefn"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name", "className"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
+    /**调整表格位置 */
+    drop(event) {
+        moveItemInArray(this._fileShowTable, event.previousIndex, event.currentIndex);
+        this.selectFormFile = this._fileShowTable;
+        this.selectedFileChange.emit(this.selectFormFile);
+        // this._fileShowTable.updateValueAndValidity()
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FilePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FilePickerComponent, selector: "fe-file-picker", inputs: { multiple: "multiple", fileContainerName: "fileContainerName", selectFormFile: "selectFormFile" }, outputs: { selectedFileChange: "selectedFileChange" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"btn btn-sm btn-dark soft ms-2 float-end\" type=\"button\"\n    (click.stop)=\"ModalOpen = true\">{{'FileExplorer::SelectFile' | abpLocalization}}</button>\n\n<fe-file-modal [(visible)]=\"ModalOpen\" [selectPickerFile]=\"selectFormFile\" [multiple]=\"_multiple\"\n    (selectFilefn)=\"_selectFilefn($event)\" [fileContainerName]=\"_fileContainerName\"></fe-file-modal>\n<table class=\"table\" *ngIf=\"_fileShowTable.length>0\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <thead>\n        <tr>\n            <th scope=\"col\" style=\"width: 30px;\"></th>\n            <th scope=\"col\"></th>\n            <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n            <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n            <th scope=\"col\"></th>\n        </tr>\n    </thead>\n    <tbody>\n        <ng-container *ngFor=\"let item of _fileShowTable;let i =index\">\n            <tr cdkDrag cdkDragLockAxis=\"y\" [cdkDragData]=\"item\">\n                <td>\n                    <div class=\"drag-handle\" cdkDragHandle>\n                        <span class=\"bi bi-arrows-move fs-5\"></span>\n                    </div>\n                </td>\n                <td>\n                    <fe-file-preview [width]=\"'80px'\" [src]=\"item.url||item.Url\" [name]=\"item.name||item.Name\"\n                        [type]=\"item.mimeType||item.MimeType\" [preview]=\"true\"></fe-file-preview>\n                </td>\n                <th scope=\"row\">\n                    <div>{{item.name||item.Name}}</div>\n                </th>\n                <td>{{(item.Size||item.size)|formatFileSize}}</td>\n                <td>\n                    <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n                        <i class=\"fas fa-trash p-2\"></i>\n                    </button>\n                </td>\n            </tr>\n        </ng-container>\n    </tbody>\n</table>", styles: [".table{border-collapse:collapse;table-layout:fixed}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.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: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: FileModalComponent, selector: "fe-file-modal", inputs: ["fileContainerName", "multiple", "limit", "visible", "selectPickerFile"], outputs: ["visibleChange", "selectFilefn"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name", "className"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: FormatFileSizePipe, name: "formatFileSize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FilePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fe-file-picker', template: "<button class=\"btn btn-sm btn-primary ms-2 float-end\" type=\"button\" (click.stop)=\"ModalOpen = true\">{{'FileExplorer::SelectFile' | abpLocalization}}</button>\n<fe-file-modal [(visible)]=\"ModalOpen\" [selectPickerFile]=\"selectFormFile\" [multiple]=\"_multiple\"  (selectFilefn)=\"_selectFilefn($event)\" [fileContainerName]=\"_fileContainerName\"></fe-file-modal>\n<table class=\"table\" *ngIf=\"_fileShowTable.length>0\">\n    <thead>\n        <tr>\n            <th scope=\"col\"></th>\n            <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n            <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n            <th scope=\"col\"></th>\n        </tr>\n    </thead>\n    <tbody>\n        <ng-container *ngFor=\"let item of _fileShowTable;let i =index\">\n            <tr>\n                <td>\n                    <fe-file-preview [width]=\"'80px'\" [src]=\"item.url||item.Url\" [name]=\"item.name||item.Name\" [type]=\"item.mimeType||item.MimeType\" [preview]=\"true\"></fe-file-preview>\n                </td>\n                <th scope=\"row\">\n                    <div>{{item.name||item.Name}}</div>\n                </th>\n                <td >{{_FileApiService.formatFileSize(item.Size||item.size)}}</td>\n                <td>\n                    <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n                        <i class=\"fas fa-trash p-2\"></i>\n                    </button>\n                </td>\n            </tr>\n        </ng-container>\n    </tbody>\n</table>\n\n\n", styles: [".table{border-collapse:collapse;table-layout:fixed}\n"] }]
-        }], ctorParameters: () => [{ type: FileApiService }], propDecorators: { multiple: [{
+            args: [{ selector: 'fe-file-picker', template: "<button class=\"btn btn-sm btn-dark soft ms-2 float-end\" type=\"button\"\n    (click.stop)=\"ModalOpen = true\">{{'FileExplorer::SelectFile' | abpLocalization}}</button>\n\n<fe-file-modal [(visible)]=\"ModalOpen\" [selectPickerFile]=\"selectFormFile\" [multiple]=\"_multiple\"\n    (selectFilefn)=\"_selectFilefn($event)\" [fileContainerName]=\"_fileContainerName\"></fe-file-modal>\n<table class=\"table\" *ngIf=\"_fileShowTable.length>0\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <thead>\n        <tr>\n            <th scope=\"col\" style=\"width: 30px;\"></th>\n            <th scope=\"col\"></th>\n            <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n            <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n            <th scope=\"col\"></th>\n        </tr>\n    </thead>\n    <tbody>\n        <ng-container *ngFor=\"let item of _fileShowTable;let i =index\">\n            <tr cdkDrag cdkDragLockAxis=\"y\" [cdkDragData]=\"item\">\n                <td>\n                    <div class=\"drag-handle\" cdkDragHandle>\n                        <span class=\"bi bi-arrows-move fs-5\"></span>\n                    </div>\n                </td>\n                <td>\n                    <fe-file-preview [width]=\"'80px'\" [src]=\"item.url||item.Url\" [name]=\"item.name||item.Name\"\n                        [type]=\"item.mimeType||item.MimeType\" [preview]=\"true\"></fe-file-preview>\n                </td>\n                <th scope=\"row\">\n                    <div>{{item.name||item.Name}}</div>\n                </th>\n                <td>{{(item.Size||item.size)|formatFileSize}}</td>\n                <td>\n                    <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n                        <i class=\"fas fa-trash p-2\"></i>\n                    </button>\n                </td>\n            </tr>\n        </ng-container>\n    </tbody>\n</table>", styles: [".table{border-collapse:collapse;table-layout:fixed}\n"] }]
+        }], propDecorators: { multiple: [{
                 type: Input
             }], fileContainerName: [{
                 type: Input
@@ -927,7 +1210,6 @@ class FileDomeComponent {
     constructor() {
         /**跟随表单提交--已提交的数据，或选择的数据源 */
         this.fileSubmittedData = [];
-        this.FileApiService = inject(FileApiService);
         /**选择文件-弹窗的-已选定的文件 */
         this.selectedFileGroup = [];
     }
@@ -955,7 +1237,7 @@ const routes = [
 ];
 class FileExplorerRoutingModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerRoutingModule, imports: [i1$1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerRoutingModule, imports: [i1$2.RouterModule], exports: [RouterModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerRoutingModule, decorators: [{
@@ -1020,13 +1302,13 @@ class FileExplorerConfigComponent {
             resolve(true);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerConfigComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileExplorerConfigComponent, selector: "fe-file-explorer-config", inputs: { type: "type", Entity: "Entity", selected: "selected" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_Entity\">\n    <div formGroupName=\"formConfiguration\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\">{{'DigniteAbpDynamicFormsFileExplorer::FileContainerName' | abpLocalization}}</label>\n            <input type=\"text\" class=\"form-control\" formControlName=\"FileExplorer.FileContainerName\">\n        </div>\n        <div class=\"mb-3\">\n            <div class=\"form-check form-check-inline\">\n                <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"FileExplorer.UploadFileMultiple\" id=\"flexRadioDefault1\">\n                <label class=\"form-check-label\" for=\"flexRadioDefault1\">\n                    {{'DigniteAbpDynamicFormsFileExplorer::UploadFileMultiple' | abpLocalization}}\n                </label>\n            </div>\n        </div>\n        <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\n            #submitclick></button>\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.InitDirective, selector: "[abpInit]", outputs: ["abpInit"] }, { kind: "directive", type: i3$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerConfigComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileExplorerConfigComponent, selector: "fe-file-explorer-config", inputs: { type: "type", Entity: "Entity", selected: "selected" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_Entity\">\n    <div formGroupName=\"formConfiguration\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\">{{'DigniteAbpDynamicFormsFileExplorer::FileContainerName' | abpLocalization}}</label>\n            <input type=\"text\" class=\"form-control\" formControlName=\"FileExplorer.FileContainerName\">\n        </div>\n        <div class=\"mb-3\">\n            <div class=\"form-check form-check-inline\">\n                <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"FileExplorer.UploadFileMultiple\" id=\"flexRadioDefault1\">\n                <label class=\"form-check-label\" for=\"flexRadioDefault1\">\n                    {{'DigniteAbpDynamicFormsFileExplorer::UploadFileMultiple' | abpLocalization}}\n                </label>\n            </div>\n        </div>\n        <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\n            #submitclick></button>\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.InitDirective, selector: "[abpInit]", outputs: ["abpInit"] }, { kind: "directive", type: i3$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fe-file-explorer-config', template: "<form [formGroup]=\"_Entity\">\n    <div formGroupName=\"formConfiguration\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\">{{'DigniteAbpDynamicFormsFileExplorer::FileContainerName' | abpLocalization}}</label>\n            <input type=\"text\" class=\"form-control\" formControlName=\"FileExplorer.FileContainerName\">\n        </div>\n        <div class=\"mb-3\">\n            <div class=\"form-check form-check-inline\">\n                <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"FileExplorer.UploadFileMultiple\" id=\"flexRadioDefault1\">\n                <label class=\"form-check-label\" for=\"flexRadioDefault1\">\n                    {{'DigniteAbpDynamicFormsFileExplorer::UploadFileMultiple' | abpLocalization}}\n                </label>\n            </div>\n        </div>\n        <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\n            #submitclick></button>\n    </div>\n</form>" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { type: [{
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { type: [{
                 type: Input
             }], Entity: [{
                 type: Input
@@ -1118,13 +1400,13 @@ class FileExplorerControlComponent {
         obj[fieldName] = event;
         this.extraProperties.patchValue(obj);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerControlComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileExplorerControlComponent, selector: "fe-file-explorer-control", inputs: { entity: "entity", fields: "fields", parentFiledName: "parentFiledName", selected: "selected" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_entity\">\n    <div formGroupName=\"extraProperties\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <fe-file-picker [selectFormFile]=\"selectedFileGroup\" [multiple]=\"formConfiguration['FileExplorer.UploadFileMultiple']\"\n                (selectedFileChange)=\"_selectedFileChange($event)\" [fileContainerName]=\"FileContainerName\"></fe-file-picker>\n            <small class=\"form-text text-muted d-block\" *ngIf=\"_fields.field.description\">{{_fields.field.description}}</small>\n        </div>\n    </div>\n    <button type=\"submit\" style=\"display: none;\" #submitclick></button>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "component", type: FilePickerComponent, selector: "fe-file-picker", inputs: ["multiple", "fileContainerName", "selectFormFile"], outputs: ["selectedFileChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerControlComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileExplorerControlComponent, selector: "fe-file-explorer-control", inputs: { entity: "entity", fields: "fields", parentFiledName: "parentFiledName", selected: "selected" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_entity\">\n    <div formGroupName=\"extraProperties\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <fe-file-picker [selectFormFile]=\"selectedFileGroup\" [multiple]=\"formConfiguration['FileExplorer.UploadFileMultiple']\"\n                (selectedFileChange)=\"_selectedFileChange($event)\" [fileContainerName]=\"FileContainerName\"></fe-file-picker>\n            <small class=\"form-text text-muted d-block\" *ngIf=\"_fields.field.description\">{{_fields.field.description}}</small>\n        </div>\n    </div>\n    <button type=\"submit\" style=\"display: none;\" #submitclick></button>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "component", type: FilePickerComponent, selector: "fe-file-picker", inputs: ["multiple", "fileContainerName", "selectFormFile"], outputs: ["selectedFileChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fe-file-explorer-control', template: "<form [formGroup]=\"_entity\">\n    <div formGroupName=\"extraProperties\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <fe-file-picker [selectFormFile]=\"selectedFileGroup\" [multiple]=\"formConfiguration['FileExplorer.UploadFileMultiple']\"\n                (selectedFileChange)=\"_selectedFileChange($event)\" [fileContainerName]=\"FileContainerName\"></fe-file-picker>\n            <small class=\"form-text text-muted d-block\" *ngIf=\"_fields.field.description\">{{_fields.field.description}}</small>\n        </div>\n    </div>\n    <button type=\"submit\" style=\"display: none;\" #submitclick></button>\n</form>" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { entity: [{
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { entity: [{
                 type: Input
             }], fields: [{
                 type: Input
@@ -1159,11 +1441,11 @@ class FileExplorerViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.5", type: FileExplorerViewComponent, selector: "fe-file-explorer-view", inputs: { showInList: "showInList", fields: "fields", type: "type", value: "value" }, ngImport: i0, template: "@if(showInList){\r\n@if(showValue.length>=1){\r\n<div class=\"d-flex align-items-center \">\r\n    <fe-file-preview [width]=\"'40px'\" [className]=\"'rounded-5 overflow-hidden me-1'\" [src]=\"showValue[0].url\"\r\n        [name]=\"showValue[0].name\" [type]=\"showValue[0].mimeType\" [preview]=\"true\"></fe-file-preview>\r\n    @if(showValue.length-1>0){\r\n    +{{showValue.length-1}}\r\n    }\r\n</div>\r\n}\r\n} @else{\r\n<div class=\"mb-3\">\r\n    <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name", "className"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.5", type: FileExplorerViewComponent, selector: "fe-file-explorer-view", inputs: { showInList: "showInList", fields: "fields", type: "type", value: "value" }, ngImport: i0, template: "@if(showInList){\r\n@if(showValue.length>=1){\r\n<div class=\"d-flex align-items-center \">\r\n    <fe-file-preview [width]=\"'60px'\" [className]=\"'overflow-hidden me-1'\" [src]=\"showValue[0].url\"\r\n        [name]=\"showValue[0].name\" [type]=\"showValue[0].mimeType\" [preview]=\"true\"></fe-file-preview>\r\n    @if(showValue.length-1>0){\r\n    +{{showValue.length-1}}\r\n    }\r\n</div>\r\n}\r\n} @else{\r\n<div class=\"mb-3\">\r\n    <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name", "className"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fe-file-explorer-view', template: "@if(showInList){\r\n@if(showValue.length>=1){\r\n<div class=\"d-flex align-items-center \">\r\n    <fe-file-preview [width]=\"'40px'\" [className]=\"'rounded-5 overflow-hidden me-1'\" [src]=\"showValue[0].url\"\r\n        [name]=\"showValue[0].name\" [type]=\"showValue[0].mimeType\" [preview]=\"true\"></fe-file-preview>\r\n    @if(showValue.length-1>0){\r\n    +{{showValue.length-1}}\r\n    }\r\n</div>\r\n}\r\n} @else{\r\n<div class=\"mb-3\">\r\n    <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n</div>\r\n}" }]
+            args: [{ selector: 'fe-file-explorer-view', template: "@if(showInList){\r\n@if(showValue.length>=1){\r\n<div class=\"d-flex align-items-center \">\r\n    <fe-file-preview [width]=\"'60px'\" [className]=\"'overflow-hidden me-1'\" [src]=\"showValue[0].url\"\r\n        [name]=\"showValue[0].name\" [type]=\"showValue[0].mimeType\" [preview]=\"true\"></fe-file-preview>\r\n    @if(showValue.length-1>0){\r\n    +{{showValue.length-1}}\r\n    }\r\n</div>\r\n}\r\n} @else{\r\n<div class=\"mb-3\">\r\n    <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n</div>\r\n}" }]
         }], propDecorators: { showInList: [{
                 type: Input
             }], fields: [{
@@ -1211,20 +1493,35 @@ class FileExplorerModule {
             NgbDropdownModule,
             NzTreeModule,
             NgxValidateCoreModule,
-            FileExplorerRoutingModule], exports: [FileEditComponent,
+            FileExplorerRoutingModule,
+            TreeModule,
+            GetDirectoryNamePipe,
+            DragDropModule,
+            FormatFileSizePipe], exports: [FileEditComponent,
             FilePickerComponent,
             FileModalComponent,
             FileModalTreeComponent,
             FileDomeComponent,
             FilePreviewComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerModule, imports: [FormsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerModule, providers: [
+            FormatFileSizePipe,
+            // GetImageUrlPipe
+            // // [Required]
+            // ListService,
+            // // [Optional]
+            // // Provide this token if you want a different debounce time.
+            // // Default is 300. Cannot be 0. Any value below 100 is not recommended.
+            // { provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 500 },
+        ], imports: [FormsModule,
             CoreModule,
             ThemeSharedModule,
             ReactiveFormsModule,
             NgbDropdownModule,
             NzTreeModule,
             NgxValidateCoreModule,
-            FileExplorerRoutingModule] }); }
+            FileExplorerRoutingModule,
+            TreeModule,
+            DragDropModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerModule, decorators: [{
             type: NgModule,
@@ -1249,6 +1546,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                         NzTreeModule,
                         NgxValidateCoreModule,
                         FileExplorerRoutingModule,
+                        TreeModule,
+                        GetDirectoryNamePipe,
+                        DragDropModule,
+                        FormatFileSizePipe,
                     ],
                     exports: [
                         FileEditComponent,
@@ -1257,17 +1558,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                         FileModalTreeComponent,
                         FileDomeComponent,
                         FilePreviewComponent,
+                        // FormatFileSizePipe
                         // FileExplorerConfigComponent,
                         // FileExplorerControlComponent,
                     ],
                     providers: [
-                    // GetImageUrlPipe
-                    // // [Required]
-                    // ListService,
-                    // // [Optional]
-                    // // Provide this token if you want a different debounce time.
-                    // // Default is 300. Cannot be 0. Any value below 100 is not recommended.
-                    // { provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 500 },
+                        FormatFileSizePipe,
+                        // GetImageUrlPipe
+                        // // [Required]
+                        // ListService,
+                        // // [Optional]
+                        // // Provide this token if you want a different debounce time.
+                        // // Default is 300. Cannot be 0. Any value below 100 is not recommended.
+                        // { provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 500 },
                     ],
                 }]
         }] });