@dignite-ng/expand.file-explorer 3.0.0-rc.1 → 3.0.0-rc.19

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, EventEmitter, Output, ViewChild, inject, NgModule } from '@angular/core';
+import { Injectable, Input, Component, EventEmitter, ViewChild, Output, inject, NgModule, ChangeDetectorRef } from '@angular/core';
 import * as i3 from '@abp/ng.core';
-import { ListService, LIST_QUERY_DEBOUNCE_TIME, CoreModule } 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';
@@ -173,6 +173,7 @@ class FilePreviewComponent {
         this.type = '';
         /**文件名称 */
         this.name = '';
+        this.className = '';
         /**是否是文件 */
         this.isImage = true;
         /**是否是视频 */
@@ -233,11 +234,11 @@ class FilePreviewComponent {
         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" }, ngImport: i0, template: "<div class=\"image_box\" [style]=\"{width:width}\">\n    <div class=\"img_box\" *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.ɵ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"] }] }); }
 }
 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}\">\n    <div class=\"img_box\" *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"] }]
+            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: [{
                 type: Input
             }], src: [{
@@ -248,6 +249,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                 type: Input
             }], name: [{
                 type: Input
+            }], className: [{
+                type: Input
             }] } });
 
 class FileEditComponent {
@@ -325,7 +328,7 @@ class FileEditComponent {
         });
     }
     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"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileEditComponent, decorators: [{
             type: Component,
@@ -398,11 +401,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i3.RestService }] });
 
-var index$e = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    FileDescriptorService: FileDescriptorService$1
-});
-
 class FileDescriptorService {
     constructor(restService) {
         this.restService = restService;
@@ -446,11 +444,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i3.RestService }] });
 
-var index$d = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    FileDescriptorService: FileDescriptorService
-});
-
 /* eslint-disable @angular-eslint/component-selector */
 var that$1;
 class FileModalTreeComponent {
@@ -847,7 +840,7 @@ class FileModalComponent {
             // 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"] }, { 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\">\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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileModalComponent, decorators: [{
             type: Component,
@@ -915,11 +908,11 @@ class FilePickerComponent {
         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: [""], 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"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
+    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" }] }); }
 }
 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" }]
+            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: [{
                 type: Input
             }], fileContainerName: [{
@@ -992,6 +985,7 @@ class FileExplorerConfig {
 class FileExplorerConfigComponent {
     constructor(fb) {
         this.fb = fb;
+        this.cdr = inject(ChangeDetectorRef);
     }
     set type(v) {
         this._type = v;
@@ -1011,6 +1005,7 @@ class FileExplorerConfigComponent {
     async dataLoaded() {
         if (this._Entity && this._type) {
             await this.AfterInit();
+            this.cdr.detectChanges(); // 手动触发变更检测
             this.submitclick?.nativeElement?.click();
         }
     }
@@ -1047,10 +1042,13 @@ class FileExplorerControlComponent {
         this.fb = fb;
         /**字段配置列表 */
         this._fields = '';
+        this.cdr = inject(ChangeDetectorRef);
         /**字段配置 */
         this.formConfiguration = '';
         /**文件容器名称 */
         this.FileContainerName = '';
+        this.configState = inject(ConfigStateService);
+        this.environment = inject(EnvironmentService);
         /**选择文件-弹窗的-已选定的文件 */
         this.selectedFileGroup = [];
     }
@@ -1081,7 +1079,8 @@ class FileExplorerControlComponent {
     async dataLoaded() {
         if (this._fields && this._entity && this._parentFiledName) {
             await this.AfterInit();
-            this.submitclick.nativeElement.click();
+            this.cdr.detectChanges(); // 手动触发变更检测
+            this.submitclick?.nativeElement?.click();
         }
     }
     AfterInit() {
@@ -1093,6 +1092,11 @@ class FileExplorerControlComponent {
             this.formConfiguration = this._fields.field.formConfiguration;
             this.FileContainerName = this.formConfiguration['FileExplorer.FileContainerName'];
             if (this._selected && this._selected.length > 0) {
+                this._selected.map((el) => {
+                    if (!el['url']) {
+                        el['url'] = this.GetImageUrl(el.blobName, el.containerName, el.tenantId);
+                    }
+                });
                 this.selectedFileGroup = this._selected;
             }
             let newControl = this.fb.control(this._selected, ValidatorsArray);
@@ -1100,6 +1104,12 @@ class FileExplorerControlComponent {
             resolve(true);
         });
     }
+    GetImageUrl(value, ...args) {
+        let tenantId = args[1];
+        const environment = this.environment.getEnvironment();
+        let imgUrl = `${environment.apis.default.url}/api/file-explorer/files/${args[0]}/${value}?__tenant=${tenantId}&timer=${new Date().getTime()}`;
+        return value ? imgUrl : '';
+    }
     /**_selectedFile改变回调 */
     _selectedFileChange(event) {
         this.selectedFileGroup = event;
@@ -1127,6 +1137,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                 args: ['submitclick', { static: true }]
             }] } });
 
+/* eslint-disable @angular-eslint/component-selector */
+class FileExplorerViewComponent {
+    constructor() {
+        /**展示则内容 */
+        this.showValue = '';
+        /**是否显示再列表 */
+        this.showInList = false;
+        /**表单控件Value */
+        this._value = '';
+    }
+    set value(v) {
+        this._value = v;
+    }
+    async ngAfterContentInit() {
+        //Called after ngOnInit when the component's or directive's content has been initialized.
+        //Add 'implements AfterContentInit' to the class.
+        let valueOptions = this._value;
+        if (this.type && valueOptions) {
+            this.showValue = valueOptions;
+        }
+    }
+    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"] }] }); }
+}
+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}" }]
+        }], propDecorators: { showInList: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
 /**
  * 表单控件分组-包含配置，控件，显示的数组
  */
@@ -1136,7 +1183,7 @@ const fielFieldControlGroup = [
         name: 'FileExplorer',
         fieldConfigComponent: FileExplorerConfigComponent,
         fieldComponent: FileExplorerControlComponent,
-        // fieldViewComponent:TextBoxViewComponent,
+        fieldViewComponent: FileExplorerViewComponent,
     }
 ];
 function getExcludeAssignControl(typeName) {
@@ -1156,7 +1203,8 @@ class FileExplorerModule {
             FileDomeComponent,
             FilePreviewComponent,
             FileExplorerConfigComponent,
-            FileExplorerControlComponent], imports: [FormsModule,
+            FileExplorerControlComponent,
+            FileExplorerViewComponent], imports: [FormsModule,
             CoreModule,
             ThemeSharedModule,
             ReactiveFormsModule,
@@ -1190,6 +1238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                         FilePreviewComponent,
                         FileExplorerConfigComponent,
                         FileExplorerControlComponent,
+                        FileExplorerViewComponent,
                     ],
                     imports: [
                         FormsModule,
@@ -1212,6 +1261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                         // FileExplorerControlComponent,
                     ],
                     providers: [
+                    // GetImageUrlPipe
                     // // [Required]
                     // ListService,
                     // // [Optional]
@@ -1222,70 +1272,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                 }]
         }] });
 
-var index$c = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Directories: index$d,
-    Files: index$e
-});
-
-var index$b = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    FileExplorer: index$c
-});
-
-var index$a = /*#__PURE__*/Object.freeze({
-    __proto__: null
-});
-
-var index$9 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Mvc: index$a
-});
-
-var index$8 = /*#__PURE__*/Object.freeze({
-    __proto__: null
-});
-
-var index$7 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Primitives: index$8
-});
-
-var index$6 = /*#__PURE__*/Object.freeze({
-    __proto__: null
-});
-
-var index$5 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Headers: index$6
-});
-
-var index$4 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Http: index$5
-});
-
-var index$3 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AspNetCore: index$9,
-    Extensions: index$7,
-    Net: index$4
-});
-
-var index$2 = /*#__PURE__*/Object.freeze({
-    __proto__: null
-});
-
-var index$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Content: index$2
-});
-
-var index = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Abp: index$1
-});
-
 /*
  * Public API Surface of file-explorer
  */
@@ -1294,5 +1280,5 @@ var index = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AddFieldControlGroup, index$b as Dignite, FileApiService, FileDomeComponent, FileEditComponent, FileExplorerModule, FileModalComponent, FileModalTreeComponent, FilePickerComponent, FilePreviewComponent, ImageTypeOption, index$3 as Microsoft, index as Volo, fielFieldControlGroup, getExcludeAssignControl };
+export { AddFieldControlGroup, FileDomeComponent, FileEditComponent, FileExplorerModule, FileModalComponent, FileModalTreeComponent, FilePickerComponent, FilePreviewComponent, ImageTypeOption, fielFieldControlGroup, getExcludeAssignControl };
 //# sourceMappingURL=dignite-ng-expand.file-explorer.mjs.map