@dignite-ng/expand.file-explorer 0.0.1 → 0.0.3

package/src/lib/components/file-modal/file-modal.component.ts

@@ -0,0 +1,284 @@
+import { Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';
+import * as FileService from '../../proxy/dignite/file-explorer/files';
+import { Confirmation, ConfirmationService, ToasterService } from '@abp/ng.theme.shared';
+import { PagedResultDto, ABP, ListService, Rest, RestService, LocalizationService, LIST_QUERY_DEBOUNCE_TIME } from '@abp/ng.core';
+import { FileDescriptorDto, GetFilesInput } from '../../proxy/dignite/file-explorer/files';
+import { FileApiService } from '../../services/file-api.service';
+import { SelectionType } from '@swimlane/ngx-datatable';
+var that
+@Component({
+  selector: 'fe-file-modal',
+  templateUrl: './file-modal.component.html',
+  styleUrls: ['./file-modal.component.scss'],
+  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 },
+  ]
+})
+export class FileModalComponent {
+
+  constructor(
+    private _FileService: FileService.FileDescriptorService,
+    private toaster: ToasterService,
+    public readonly list: ListService,
+    public _FileApiService: FileApiService,
+    private restService: RestService,
+    private confirmation: ConfirmationService,
+    private _LocalizationService: LocalizationService,
+  ) {
+    that = this
+  }
+
+  /**图片容器 */
+  _fileContainerName: string
+  @Input()
+  public set fileContainerName(v: string) {
+    if (v) {
+      this._fileContainerName = v;
+      this.loadData()
+    }
+  }
+
+  /**是否多选 */
+  _multiple: boolean = true
+  @Input()
+  public set multiple(v: boolean) {
+    this._multiple = v;
+    if (v) { }
+  }
+
+  /**文件大小限制 
+* @param 1mb
+*/
+  sizeLimit: number = 1048576
+  @Input()
+  public set limit(v: number) {
+    this.sizeLimit = v;
+  }
+  /**父组件传递的模态框状态 */
+  @Input()
+  public set visible(v: boolean) {
+    this.ModalOpen = v;
+    if (v) {
+      this.loadData()
+    }
+  }
+
+  /**模态框状态回调 */
+  @Output() visibleChange = new EventEmitter()
+
+
+
+  /**模态框-状态-是否打开 */
+  ModalOpen: boolean = false
+
+  /**模态框-繁忙状态-用于确定模态的繁忙状态是否为真 */
+  ModalBusy: boolean = false
+
+
+
+  /**模态框-状态改变回调 */
+  ModalVisibleChange(event) {
+    if (!event) {
+      this.visibleChange.emit(event)
+      return
+    }
+  }
+
+  /**模态框保存 */
+  modalSave() {
+    let selectedTablearr = this._FileApiService.deepClone(this.selectedTable)
+    this.selectFilefn.emit(selectedTablearr)
+
+    this.ModalVisibleChange(false)
+  }
+  /**dignite-file-modal-tree */
+  /**选择的tree节点 */
+  _theSelectedTreeNode: any = ''
+
+  /**初始化数据 */
+  loadData() {
+    if (this.ModalOpen && this._fileContainerName) {
+      this.hookToQuery()
+    }
+  }
+
+  /**tree-节点选择 */
+  _nodeClick(event) {
+    this._theSelectedTreeNode = event
+    this.list.get()
+  }
+
+  /**图片上传-要上传图片的状态文件列表 */
+  uploadPictureStatusList: any[] = []
+
+  /**图片上传-获取文件信息改变 */
+  async getFileChange(event) {
+    let files = new Array(...event.target.files)
+    this.uploadPictureStatusList = files
+    for (const file of files) {
+      if (file.size > this.sizeLimit) {
+        this.setuploadPictureStatus(file, 2)
+        continue;
+      }
+      await this.uploadingFile(file).then(() => {
+        this.setuploadPictureStatus(file, 1)
+        this.list.get()
+      }).catch(() => {
+        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)
+    }
+  }
+
+  /**图片上传-设置uploadPictureStatusList的状态 */
+  setuploadPictureStatus(file, type) {
+    this.uploadPictureStatusList.map(el => {
+      if (el == file) el.status = type
+    })
+  }
+
+
+  /**图片上传-递归按顺序上传 */
+  uploadingFile(file) {
+    return new Promise((resolve, rejects) => {
+      let formData = new FormData();
+      formData.append('file', file, file.name);
+      this.createFile({
+        file: formData,
+        containerName: this._fileContainerName,
+        directoryId: this._theSelectedTreeNode?.key || '',
+        entityId: ''
+      }).subscribe(res => {
+        resolve(true)
+      }, (err) => {
+        rejects(false)
+      })
+    })
+  }
+
+
+  /**文件表格-数据*/
+  data: PagedResultDto<FileDescriptorDto> = {
+    items: [],
+    totalCount: 0,
+  };
+
+  /**文件表格-条件*/
+  filters = {} as GetFilesInput;
+
+  /**文件表格-表格自带选择类型 */
+  SelectionType = SelectionType;
+
+  /**文件表格-选择的表格数据项 */
+  selectedTable = []
+
+  /**已选定的文件 */
+  @Input() selectPickerFile: any[]
+
+  ngOnChanges(changes: SimpleChanges): void {
+    //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)
+  }
+  /**当前选择的table项 id */
+  nowSelectId: any = ''
+
+  /**选择文件回调 */
+  // @Output() selectedFileChange = new EventEmitter<any[]>()
+  @Output() selectFilefn = new EventEmitter<any[]>()
+
+  /**文件表格-获取表格数据 */
+  hookToQuery() {
+    const getData = (query: ABP.PageQueryParams) => this._FileService.getList({
+      ...query,
+      ...this.filters,
+      containerName: this._fileContainerName,
+      directoryId: this._theSelectedTreeNode.key
+    });
+    const setData = (list: PagedResultDto<FileDescriptorDto>) => (this.data = list);
+    this.list.hookToQuery(getData).subscribe(setData);
+  }
+
+  /**文件表格-查看所有分组的文件数据 */
+  lookAllFile() {
+    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)
+    }
+    this.selectedTable = selectedTablearr
+  }
+
+  /**删除数组中重复的项 */
+  removeDuplicatesById(array) {
+    const seenIds = {};
+    return array.filter(item => {
+      if (!seenIds[item.id]) {
+        seenIds[item.id] = true;
+        return true;
+      }
+      return false;
+    });
+  }
+
+  /**一个布尔or函数，可用于检查是否要根据条件选择特定行。 */
+  selectCheck = (row, column, value) => {
+    this.nowSelectId = row.id
+    return true;
+  }
+
+  /**判断row是否选中 */
+  selectedcheckbox = (id) => {
+    return this.selectedTable.some(el => el.id == id)
+  }
+
+
+
+  /**删除图片 */
+  deleteFile(file) {
+
+    this.confirmation
+      .warn('', { key: '', defaultValue: this._LocalizationService.instant(`AbpUi::ItemWillBeDeletedMessage`) })
+      .subscribe((status: Confirmation.Status) => {
+        if (status == 'confirm') {
+          this._FileService.delete(file.id).subscribe(res => {
+            this.toaster.success(this._LocalizationService.instant(`AbpUi::SuccessfullyDeleted`));
+            this.list.get()
+          })
+        }
+      });
+  }
+
+  /**关闭文件状态弹窗 */
+  closeFileStatusModal() {
+    this.uploadPictureStatusList = []
+  }
+
+  /**创建图片的接口，代理中的file类型不匹配，切换为any类型 */
+  createFile = (input: any, config?: Partial<Rest.Config>) =>
+    this.restService.request<any, FileDescriptorDto>({
+      method: 'POST',
+      url: '/api/file-explorer/files',
+      params: { containerName: input.containerName, cellName: input.cellName, directoryId: input.directoryId, entityId: input.entityId },
+      body: input.file,
+    },
+      { apiName: 'FileExplorer', ...config });
+}

package/src/lib/components/file-modal-tree/file-modal-tree.component.html

@@ -0,0 +1,63 @@
+<div class="card-header  p-0 mb-1 d-flex justify-content-between align-items-center">
+    <h6 class="h6 mb-0">{{'FileExplorer::MyDirectories' | abpLocalization}}</h6>
+    <button type="button" class="btn btn-light btn-sm ms-2" (click.stop)="addDescriptorBtn()"><i
+            class="fas fa-plus-circle" aria-hidden="true"></i></button>
+</div>
+<nz-tree [nzData]="fileGroupList" class="ng-zorro-antd-tree" nzDraggable nzBlockNode nzShowIcon
+    [nzExpandedIcon]="multiExpandedIconTpl" (nzOnDrop)="nzEvent($event)" [nzBeforeDrop]="beforeDrop"
+    (nzClick)="activeNode($event)" (nzExpandChange)="nzExpandChange($event)" [nzTreeTemplate]="nzTreeTemplate">
+    <ng-template #nzTreeTemplate let-node let-origin="origin">
+        <div class="custom-node d-inline-block   ng-star-inserted dropdown" [title]="node.title">
+            <div #dropdown="ngbDropdown" class="d-inline-block" ngbDropdown placement="bottom" container="body">
+                <div class="btn-group" [class.selected]="isNodeSelected(node)">
+                    <button class="btn btn-sm  p-0 px-1">{{ node.title }}</button>
+                    <button class="btn btn-sm  p-0" (click)="handleClick($event)" ngbDropdownToggle
+                        [class.dropdown-toggle]="false" aria-hidden="true">
+                        <i class="fas fa-caret-down text-muted p-1"></i>
+                    </button>
+                </div>
+                <div ngbDropdownMenu>
+                    <button ngbDropdownItem
+                        (click.stop)="addDescriptorBtn(node)">{{'FileExplorer::NewDirectory' | abpLocalization}}</button>
+                    <button ngbDropdownItem
+                        (click.stop)="addDescriptorBtn(node,true)">{{'AbpUi::Edit' | abpLocalization}}</button>
+                    <button ngbDropdownItem
+                        (click.stop)="deleteDescriptorBtn(node)">{{'AbpUi::Delete' | abpLocalization}}</button>
+                </div>
+            </div>
+        </div>
+    </ng-template>
+    <ng-template #multiExpandedIconTpl let-node let-origin="origin">
+        <ng-container *ngIf="node.children.length > 0">
+            <i [class]="node.isExpanded ? 'fas fa-caret-down' : 'fas fa-caret-right'"></i>
+        </ng-container>
+    </ng-template>
+</nz-tree>
+
+
+<abp-modal [(visible)]="ModalDescriptorOpen" [busy]="ModalDescriptorBusy"
+    (visibleChange)="ModalDescriptorVisibleChange($event)">
+    <ng-template #abpHeader>
+        <h3>{{theNodeBeingEdited?('AbpUi::Edit' | abpLocalization):('FileExplorer::NewDirectory' | abpLocalization)}}</h3>
+    </ng-template>
+    <ng-template #abpBody>
+        <ng-template #loaderRef>
+            <div class="text-center"><i class="fa fa-pulse fa-spinner" aria-hidden="true"></i></div>
+        </ng-template>
+        <ng-container *ngIf="ModalDescriptorForm; else loaderRef">
+            <form class="sites-modal-form" #myForm="ngForm" [formGroup]="ModalDescriptorForm"
+                (ngSubmit)="createOrEditSave()">
+                <button type="submit" #ModalFormDescriptorSubmit style="display: none"></button>
+                <div class="mb-3">
+                    <label class="form-label">{{'FileExplorer::DirectoryName' | abpLocalization}}</label>
+                    <input type="email" class="form-control" formControlName="name">
+                </div>
+            </form>
+        </ng-container>
+    </ng-template>
+    <ng-template #abpFooter>
+        <button type="button" class="btn btn-secondary" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>
+        <abp-button iconClass="fa fa-check"
+            (click)="ModalFormDescriptorSubmit.nativeElement.click()">{{'AbpUi::Save' | abpLocalization}}</abp-button>
+    </ng-template>
+</abp-modal>

package/src/lib/components/file-modal-tree/file-modal-tree.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileModalTreeComponent } from './file-modal-tree.component';
+
+describe('FileModalTreeComponent', () => {
+  let component: FileModalTreeComponent;
+  let fixture: ComponentFixture<FileModalTreeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FileModalTreeComponent]
+    });
+    fixture = TestBed.createComponent(FileModalTreeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/file-modal-tree/file-modal-tree.component.ts

@@ -0,0 +1,207 @@
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewContainerRef } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NzFormatEmitEvent } from 'ng-zorro-antd/tree';
+import * as DescriptorService from '../../proxy/dignite/file-explorer/directories';
+import {  ToasterService } from '@abp/ng.theme.shared';
+import { NzFormatBeforeDropEvent } from 'ng-zorro-antd/tree';
+import {  of } from 'rxjs';
+import { FileApiService } from '../../services/file-api.service';
+import { LocalizationService } from '@abp/ng.core';
+var that;
+@Component({
+  selector: 'fe-file-modal-tree',
+  templateUrl: './file-modal-tree.component.html',
+  styleUrls: ['./file-modal-tree.component.scss']
+})
+export class FileModalTreeComponent {
+  constructor(
+    private _DescriptorService: DescriptorService.FileDescriptorService,
+    private fb: FormBuilder,
+    private toaster: ToasterService,
+    public _FileApiService: FileApiService,
+    public _LocalizationService: LocalizationService,
+  ) {
+    that = this
+  }
+
+  /**文件分组列表 */
+  fileGroupList: any[] = [];
+
+  /**选择的tree节点 */
+  _theSelectedTreeNode: any = '';
+  @Input()
+  public set theSelectedTreeNode(v: any) {
+    this._theSelectedTreeNode = v;
+    if (v.length > 0) {
+      this.loadData()
+    }
+  }
+
+  /**正在编辑的节点 */
+  theNodeBeingEdited: any = '';
+
+  /**已展开的节点 */
+  anExpandedNode: any[] = [];
+
+  /**图片容器 */
+  _fileContainerName: string;
+
+  /**tree节点选择回调 */
+  @Output() nodeClick = new EventEmitter();
+
+
+  @Input()
+  public set fileContainerName(v: string) {
+    if (v) {
+      this._fileContainerName = v;
+      this.loadData()
+    }
+  }
+
+  handleClick = (event) => event.stopPropagation();
+
+  loadData() {
+    if (this._fileContainerName) {
+      this.getFileGroupList()
+    }
+  }
+
+
+  /**获取文件分组 */
+  getFileGroupList() {
+    this._DescriptorService.getList({
+      containerName: this._fileContainerName,
+    }).subscribe(async (res) => {
+      this.fileGroupList = await this.setTheValueOfTheNodeRecursively(res.items)
+    })
+  }
+  
+  /**递归设置节点的值 */
+  setTheValueOfTheNodeRecursively(array: any[]): any {
+    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)
+    })
+  }
+
+  /**tree-拖拽 */
+  nzEvent(event: NzFormatEmitEvent): void {
+  }
+
+  /**tree-拖拽 -验证*/
+  beforeDrop(arg: NzFormatBeforeDropEvent) {
+    if (arg.pos === 0 || arg.pos === 1) {
+      that._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.toaster.success("拖拽完成");
+        that.getFileGroupList()
+      })
+      return of(true)
+    } else {
+      return of(false);
+    }
+  }
+
+  /**tree--选择节点 */
+  activeNode(event) {
+    this._theSelectedTreeNode = event.node
+    this.nodeClick.emit(event.node)
+  }
+
+  /**判断节点是否选中 */
+  isNodeSelected = (el) => el.key === this._theSelectedTreeNode?.key
+
+  /**点击展开树节点图标触发 */
+  nzExpandChange(event) {
+    let anExpandedNode = this.anExpandedNode
+    if (anExpandedNode.includes(event.node.key)) {
+      anExpandedNode = anExpandedNode.filter(key => key !== event.node.key)
+    } else {
+      anExpandedNode.push(event.node.key)
+    }
+    this.anExpandedNode = anExpandedNode
+  }
+
+
+  /**增加分组 */
+  addDescriptorBtn(items: any = '', edit = false) {
+    this.ModalDescriptorOpen = true
+    this.ModalDescriptorForm = this.fb.group({
+      containerName: [this._fileContainerName || '', Validators.required],
+      name: ['', Validators.required],
+      parentId: [items?.key || '', Validators.required],
+    })
+    /**编辑 */
+    if (edit) {
+      this.theNodeBeingEdited = items.origin
+      this.ModalDescriptorForm.patchValue({
+        name: items.origin.name
+      })
+    }
+  }
+
+  /**删除分组 */
+  deleteDescriptorBtn(node) {
+    this._DescriptorService.delete(node.key).subscribe(res => {
+      // this.toaster.success(this._LocalizationService.instant(`AbpUi::SuccessfullyDeleted`));
+      this.ModalDescriptorOpen = false
+      if (this.theNodeBeingEdited.key == node.key) this.theNodeBeingEdited = ''
+      this.getFileGroupList()
+    })
+  }
+
+  
+
+  /**分组 */
+  /**模态框-状态-是否打开 */
+  ModalDescriptorOpen: boolean = false
+
+  /**模态框-descriptor-繁忙状态-用于确定模态的繁忙状态是否为真 */
+  ModalDescriptorBusy: boolean = false
+
+  /**模态框-descriptor-表单 */
+  ModalDescriptorForm: FormGroup | undefined;
+  
+  /**模态框-descriptor-表单--控件模板-动态赋值表单控件 */
+  @ViewChild('ModalFormDescriptorSubmit', { static: false }) ModalFormDescriptorSubmit: ElementRef;
+
+  /**模态框-descriptor-状态改变回调 */
+  ModalDescriptorVisibleChange(event) {
+    if (!event) {
+      this.ModalDescriptorForm = undefined
+      this.theNodeBeingEdited = ''
+      return
+    }
+  }
+
+  /**f分组模态框保存 */
+  createOrEditSave() {
+    let input = this.ModalDescriptorForm.value
+    if (this.theNodeBeingEdited) {
+      this._DescriptorService.update(this.theNodeBeingEdited.key, input).subscribe(res => {
+        // this.toaster.success("保存成功");
+        this.ModalDescriptorOpen = false
+        this.getFileGroupList()
+      })
+      return
+    }
+    this._DescriptorService.create(input).subscribe(res => {
+      // this.toaster.success("保存成功");
+      this.ModalDescriptorOpen = false
+      this.getFileGroupList()
+    })
+  }
+
+
+
+
+}

package/src/lib/components/file-picker/file-picker.component.html

@@ -0,0 +1,28 @@
+<button class="btn btn-sm btn-primary ms-2" type="button" (click.stop)="ModalOpen = true">{{'FileExplorer::SelectFile' | abpLocalization}}</button>
+<fe-file-modal [(visible)]="ModalOpen" [selectPickerFile]="selectFormFile"  (selectFilefn)="_selectFilefn($event)" [fileContainerName]="_fileContainerName"></fe-file-modal>
+<table class="table" *ngIf="_fileShowTable.length>0">
+    <thead>
+        <tr>
+            <th scope="col">{{'FileExplorer::FileName' | abpLocalization}}</th>
+            <th scope="col">{{'FileExplorer::FileSize' | abpLocalization}}</th>
+            <th scope="col"></th>
+        </tr>
+    </thead>
+    <tbody>
+        <ng-container *ngFor="let item of _fileShowTable;let i =index">
+            <tr>
+                <th scope="row">
+                    <div>{{item.name}}</div>
+                </th>
+                <td >{{_FileApiService.formatFileSize(item.size)}}</td>
+                <td>
+                    <button class="btn btn-sm p-0 btn-light " (click.stop)="deleteFileTableItem(i,item)">
+                        <i class="fas fa-trash p-2"></i>
+                    </button>
+                </td>
+            </tr>
+        </ng-container>
+    </tbody>
+</table>
+
+

package/src/lib/components/file-picker/file-picker.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilePickerComponent } from './file-picker.component';
+
+describe('FilePickerComponent', () => {
+  let component: FilePickerComponent;
+  let fixture: ComponentFixture<FilePickerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FilePickerComponent]
+    });
+    fixture = TestBed.createComponent(FilePickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/file-picker/file-picker.component.ts

@@ -0,0 +1,58 @@
+import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
+import { FileApiService } from '../../services/file-api.service';
+
+@Component({
+  selector: 'fe-file-picker',
+  templateUrl: './file-picker.component.html',
+  styleUrls: ['./file-picker.component.scss']
+})
+export class FilePickerComponent implements OnChanges{
+
+
+  constructor(
+    private _FileApiService: FileApiService,
+  ) {
+  }
+
+
+  /**图片容器 */
+  _fileContainerName: string = 'images'
+  @Input()
+  public set fileContainerName(v: string) {
+    this._fileContainerName = v;
+  }
+
+  /**已选定的文件 */
+  @Input() selectFormFile:any[]
+ 
+  ngOnChanges(changes: SimpleChanges): void {
+    let selectFormFilengOnChanges=changes.selectFormFile['currentValue']
+    if(selectFormFilengOnChanges.length>0){
+      this._fileShowTable=selectFormFilengOnChanges
+    }
+  }
+
+  @Output() selectedFileChange = new EventEmitter()
+
+  _fileShowTable: any[] = []
+
+  /**表格选择的文件回调 */
+  _selectFilefn(event: any[]) {
+    let _fileShowTable= this._FileApiService.deepClone(event)
+    this._fileShowTable =_fileShowTable
+    this.selectFormFile=_fileShowTable
+    this.selectedFileChange.emit(_fileShowTable)
+  }
+
+  /**模态框-状态-是否打开 */
+  ModalOpen: boolean = false
+
+  /**删除文件表格项 */
+  deleteFileTableItem(i, file) {
+    this._fileShowTable.splice(i, 1)
+    this.selectFormFile=this._fileShowTable
+    this.selectedFileChange.emit([])
+    this.selectedFileChange.emit(this.selectFormFile)
+  }
+
+}

package/src/lib/components/index.ts

@@ -0,0 +1,5 @@
+export * from './dome/file-dome.component'
+export * from './file-edit/file-edit.component'
+export * from './file-modal/file-modal.component'
+export * from './file-modal-tree/file-modal-tree.component'
+export * from './file-picker/file-picker.component'