cmat 0.0.86 → 0.0.88

package/fesm2022/cmat-components-upload.mjs

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, Injectable, EventEmitter, signal, Input, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, ElementRef, HostListener, forwardRef, ViewChildren } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { inject, DestroyRef, Injectable, output, input, model, signal, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, viewChildren, ElementRef, computed, HostListener } from '@angular/core';
 import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1 from '@angular/material/card';
@@ -12,6 +11,7 @@ import { MatListModule } from '@angular/material/list';
 import { CmatMediaWatcherService } from 'cmat/services/media-watcher';
 import { NgClass } from '@angular/common';
 import { HttpClient, HttpEventType } from '@angular/common/http';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i3$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i4 from '@angular/material/tooltip';
@@ -27,14 +27,10 @@ class CmatFilesUtilService {
         this._http = inject(HttpClient);
         this._urlStateConfigService = inject(CmatUrlStateConfigService);
         this._destroyRef = inject(DestroyRef);
-        this._urlStateConfigService.config$
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe((config) => {
-            this._config = config;
-        });
+        this._config = this._urlStateConfigService.config;
     }
     downloadFile(fileId, isStream = true) {
-        return this._http.get(`${this._config.fileUrl}/download/${fileId}`, {
+        return this._http.get(`${this._config().fileUrl}/download/${fileId}`, {
             headers: CmatUtilsService.getRequestCryptoHeaders(fileId),
             observe: 'response',
             reportProgress: true,
@@ -45,7 +41,7 @@ class CmatFilesUtilService {
         }).pipe(catchError(CmatUtilsService.handleError));
     }
     downloadFileZip(fileIds) {
-        return this._http.post(`${this._config.fileUrl}/download`, fileIds, {
+        return this._http.post(`${this._config().fileUrl}/download`, fileIds, {
             headers: CmatUtilsService.getRequestCryptoHeaders('fileZip'),
             observe: 'response',
             reportProgress: true,
@@ -53,7 +49,7 @@ class CmatFilesUtilService {
         }).pipe(catchError(CmatUtilsService.handleError));
     }
     uploadFile(file) {
-        return this._http.post(`${this._config.fileUrl}/upload`, file, {
+        return this._http.post(`${this._config().fileUrl}/upload`, file, {
             headers: CmatUtilsService.getRequestCryptoHeaders('files'),
             observe: 'events',
             reportProgress: true,
@@ -61,7 +57,7 @@ class CmatFilesUtilService {
         }).pipe(catchError(CmatUtilsService.handleError));
     }
     uploadFileToProcessed(file) {
-        return this._http.post(`${this._config.fileUrl}/upload/finish`, file, {
+        return this._http.post(`${this._config().fileUrl}/upload/finish`, file, {
             headers: CmatUtilsService.getRequestCryptoHeaders('files'),
             observe: 'events',
             reportProgress: true,
@@ -69,7 +65,7 @@ class CmatFilesUtilService {
         }).pipe(catchError(CmatUtilsService.handleError));
     }
     switchPublic(fileId, isPublic) {
-        return this._http.patch(`${this._config.fileUrl}/switch-public/${fileId}`, {
+        return this._http.patch(`${this._config().fileUrl}/switch-public/${fileId}`, {
             id: fileId,
             isPublic
         }, {
@@ -77,94 +73,109 @@ class CmatFilesUtilService {
         }).pipe(catchError((err) => CmatUtilsService.handleError(err)));
     }
     deleteFile(fileId) {
-        return this._http.delete(`${this._config.fileUrl}/${fileId}`, {
+        return this._http.delete(`${this._config().fileUrl}/${fileId}`, {
             headers: CmatUtilsService.getRequestCryptoHeaders(fileId)
         }).pipe(catchError((err) => CmatUtilsService.handleError(err)));
     }
     getFileList(queryData, pageIndex = -1, pageSize = -1) {
-        if (this._config.enableDataProtect) {
-            return this._http.post(`${this._config.fileUrl}/${pageIndex}/${pageSize}`, CmatUtilsService.getEncryptData(JSON.stringify(queryData)), {
+        if (this._config().enableDataProtect) {
+            return this._http.post(`${this._config().fileUrl}/${pageIndex}/${pageSize}`, CmatUtilsService.getEncryptData(JSON.stringify(queryData)), {
                 headers: CmatUtilsService.getRequestCryptoHeaders('fileList'),
                 responseType: 'text'
             })
                 .pipe(map((res) => JSON.parse(CmatUtilsService.getDecryptData(res))), catchError(err => CmatUtilsService.handleError(err)));
         }
         else {
-            return this._http.post(`${this._config.fileUrl}/${pageIndex}/${pageSize}`, queryData, {
+            return this._http.post(`${this._config().fileUrl}/${pageIndex}/${pageSize}`, queryData, {
                 headers: CmatUtilsService.getRequestCryptoHeaders('fileList'),
                 responseType: 'json'
             })
                 .pipe(tap((res) => res), catchError(err => CmatUtilsService.handleError(err)));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatFilesUtilService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatFilesUtilService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatFilesUtilService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatFilesUtilService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatFilesUtilService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatFilesUtilService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class CmatUploadComponent {
     constructor() {
-        this.fileAlias = 'fileData';
-        this.filePath = '';
-        this.fileCategory = '';
-        this.isPublic = false;
-        this.editMode = false;
-        this.autoUpload = true;
-        this.id = null;
-        this.removeEvent = new EventEmitter();
-        this.uploadEvent = new EventEmitter();
-        this.progressPercentage = signal(0, ...(ngDevMode ? [{ debugName: "progressPercentage" }] : /* istanbul ignore next */ []));
-        this.loaded = signal(0, ...(ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []));
-        this.total = signal(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
-        this.isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : /* istanbul ignore next */ []));
+        this.removeEvent = output();
+        this.uploadEvent = output();
+        this.fileAlias = input('fileData', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fileAlias" }] : /* istanbul ignore next */ []));
+        this.filePath = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filePath" }] : /* istanbul ignore next */ []));
+        this.fileCategory = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fileCategory" }] : /* istanbul ignore next */ []));
+        this.isPublic = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPublic" }] : /* istanbul ignore next */ []));
+        this.editMode = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
+        this.autoUpload = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autoUpload" }] : /* istanbul ignore next */ []));
+        this.file = model.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []));
+        this.id = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        this.progressPercentage = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progressPercentage" }] : /* istanbul ignore next */ []));
+        this.loaded = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []));
+        this.total = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+        this.isUploading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isUploading" }] : /* istanbul ignore next */ []));
+        this.uploadedId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uploadedId" }] : /* istanbul ignore next */ []));
         this._fileService = inject(CmatFilesUtilService);
         this._destroyRef = inject(DestroyRef);
+        effect(() => {
+            const file = this.file();
+            this.total.set(file.size);
+        });
     }
-    get file() {
-        return this._file;
-    }
-    set file(file) {
-        this._file = file;
-        this.total.set(this._file.size);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get fileType() {
-        return CmatUtilsService.getFileType(this.file.type);
+        return CmatUtilsService.getFileType(this.file().type);
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get fileSize() {
-        return Number(this.file.size);
+        return Number(this.file().size);
     }
     ngOnInit() {
-        if (this.autoUpload && this.id === null) {
+        if (this.autoUpload() && this.id() === null) {
             this.upload();
         }
     }
     upload() {
         this.isUploading.set(true);
+        const file = this.file();
         const fileModel = {
             id: null,
-            fileName: this.file.name,
-            length: this.file.size,
-            fileCategory: this.fileCategory,
-            isPublic: this.isPublic,
-            filePath: this.filePath,
+            fileName: file.name,
+            length: file.size,
+            fileCategory: this.fileCategory(),
+            isPublic: this.isPublic(),
+            filePath: this.filePath(),
             fileType: this.fileType,
-            data: this._file
+            data: file.data,
         };
         const formData = new FormData();
-        if (this._file.data) {
-            formData.set(this.fileAlias, this._file.data, this._file.fileName);
+        if (file.data) {
+            formData.set(this.fileAlias(), file.data, file.fileName);
         }
         formData.append('fileInfo', JSON.stringify(fileModel));
-        this._fileService.uploadFile(formData).pipe(takeUntilDestroyed(this._destroyRef)).subscribe((event) => {
-            if (event.type === HttpEventType.UploadProgress && typeof event.total === 'number') {
-                this.progressPercentage.set(Math.floor(event.loaded * 100 / event.total));
+        this._fileService
+            .uploadFile(formData)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((event) => {
+            if (event.type === HttpEventType.UploadProgress &&
+                typeof event.total === 'number') {
+                this.progressPercentage.set(Math.floor((event.loaded * 100) / event.total));
                 this.loaded.set(event.loaded);
                 this.total.set(event.total);
             }
@@ -174,96 +185,108 @@ class CmatUploadComponent {
                     this.isUploading.set(false);
                     return;
                 }
-                this.id = fileId;
-                this.file.id = fileId;
+                this.uploadedId.set(fileId);
+                file.id = fileId;
+                this.file.set(file);
                 this.isUploading.set(false);
-                this.uploadEvent.emit(this.file);
+                this.uploadEvent.emit(this.file());
             }
         });
     }
     download() {
-        if (!this.id)
+        const id = this.uploadedId() ?? this.id();
+        if (!id)
             return;
-        this._fileService.downloadFile(this.id).pipe(takeUntilDestroyed(this._destroyRef)).subscribe((file) => {
-            saveAs(new Blob([file.body ?? new Blob()], { type: 'text/plain;charset=utf-8' }), this.file.name);
+        this._fileService
+            .downloadFile(id)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((file) => {
+            saveAs(new Blob([file.body ?? new Blob()], {
+                type: 'text/plain;charset=utf-8',
+            }), this.file().name);
         });
     }
     remove() {
         this.removeEvent.emit(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatUploadComponent, isStandalone: true, selector: "cmat-upload", inputs: { fileAlias: "fileAlias", filePath: "filePath", fileCategory: "fileCategory", isPublic: "isPublic", editMode: "editMode", autoUpload: "autoUpload", id: "id", file: "file" }, outputs: { removeEvent: "removeEvent", uploadEvent: "uploadEvent" }, exportAs: ["cmatUpload"], ngImport: i0, template: "<div class=\"flex flex-col\">\r\n  <div class=\"flex flex-row items-center\">\r\n    <span class=\"flex items-center px-1\">\r\n      <mat-icon class=\"icon-size-6 text-hint\" [svgIcon]=\"fileType\"></mat-icon>\r\n    </span>\r\n    <span matTooltip=\"{{file.name}}\"\r\n      class=\"text-sm flex flex-auto whitespace-nowrap overflow-x-hidden text-ellipsis\">{{file.name}}({{fileSize |\r\n      cmatBytes}})</span>\r\n    <span class=\"flex flex-row gap-1 print:hidden\">\r\n      @if(id===null){\r\n      <button matIconButton color=\"primary\" class=\"w-8 min-h-8 h-8 max-w-8\" [ngClass]=\"{'disabled' : isUploading()}\"\r\n        (click)=\"upload()\">\r\n        <mat-icon class=\"icon-size-5\" [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon>\r\n      </button>\r\n      }\r\n\r\n      @if(id!==null){\r\n      <button matIconButton color=\"primary\" class=\"w-8 min-h-8 h-8 max-w-8\" (click)=\"download()\">\r\n        <mat-icon class=\"icon-size-5\" [svgIcon]=\"'mat_outline:file_download'\"></mat-icon>\r\n      </button>\r\n      }\r\n\r\n      @if(editMode){\r\n      <button matIconButton color=\"warn\" class=\"w-8 min-h-8 h-8 max-w-8\" (click)=\"remove()\">\r\n        <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:trash'\"></mat-icon>\r\n      </button>\r\n      }\r\n    </span>\r\n  </div>\r\n  @if(id===null){\r\n  <mat-progress-bar [value]=\"progressPercentage()\"></mat-progress-bar>\r\n  <div class=\"text-sm block whitespace-nowrap overflow-x-hidden text-ellipsis\">\r\n    <span>{{progressPercentage()}}%</span><span> {{loaded() | cmatBytes}} of {{total() | cmatBytes}}</span>\r\n  </div>\r\n  }\r\n</div>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: CmatBytesPipe, name: "cmatBytes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatUploadComponent, isStandalone: true, selector: "cmat-upload", inputs: { fileAlias: { classPropertyName: "fileAlias", publicName: "fileAlias", isSignal: true, isRequired: false, transformFunction: null }, filePath: { classPropertyName: "filePath", publicName: "filePath", isSignal: true, isRequired: false, transformFunction: null }, fileCategory: { classPropertyName: "fileCategory", publicName: "fileCategory", isSignal: true, isRequired: false, transformFunction: null }, isPublic: { classPropertyName: "isPublic", publicName: "isPublic", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeEvent: "removeEvent", uploadEvent: "uploadEvent", file: "fileChange" }, exportAs: ["cmatUpload"], ngImport: i0, template: "<div class=\"flex flex-col\">\r\n  <div class=\"flex flex-row items-center\">\r\n    <span class=\"flex items-center px-1\">\r\n      <mat-icon class=\"icon-size-6 text-hint\" [svgIcon]=\"fileType\"></mat-icon>\r\n    </span>\r\n    <span\r\n      matTooltip=\"{{ file().name }}\"\r\n      class=\"text-sm flex flex-auto whitespace-nowrap overflow-x-hidden text-ellipsis\"\r\n      >{{ file().name }}({{ fileSize | cmatBytes }})</span\r\n    >\r\n    <span class=\"flex flex-row gap-1 print:hidden\">\r\n      @if (id() === null) {\r\n        <button\r\n          matIconButton\r\n          color=\"primary\"\r\n          class=\"w-8 min-h-8 h-8 max-w-8\"\r\n          [ngClass]=\"{ disabled: isUploading() }\"\r\n          (click)=\"upload()\"\r\n        >\r\n          <mat-icon\r\n            class=\"icon-size-5\"\r\n            [svgIcon]=\"'mat_outline:file_upload'\"\r\n          ></mat-icon>\r\n        </button>\r\n      }\r\n\r\n      @if (id() !== null) {\r\n        <button\r\n          matIconButton\r\n          color=\"primary\"\r\n          class=\"w-8 min-h-8 h-8 max-w-8\"\r\n          (click)=\"download()\"\r\n        >\r\n          <mat-icon\r\n            class=\"icon-size-5\"\r\n            [svgIcon]=\"'mat_outline:file_download'\"\r\n          ></mat-icon>\r\n        </button>\r\n      }\r\n\r\n      @if (editMode()) {\r\n        <button\r\n          matIconButton\r\n          color=\"warn\"\r\n          class=\"w-8 min-h-8 h-8 max-w-8\"\r\n          (click)=\"remove()\"\r\n        >\r\n          <mat-icon\r\n            class=\"icon-size-5\"\r\n            [svgIcon]=\"'heroicons_solid:trash'\"\r\n          ></mat-icon>\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n  @if (id() === null) {\r\n    <mat-progress-bar [value]=\"progressPercentage()\"></mat-progress-bar>\r\n    <div\r\n      class=\"text-sm block whitespace-nowrap overflow-x-hidden text-ellipsis\"\r\n    >\r\n      <span>{{ progressPercentage() }}%</span\r\n      ><span> {{ loaded() | cmatBytes }} of {{ total() | cmatBytes }}</span>\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: CmatBytesPipe, name: "cmatBytes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-upload', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatUpload', imports: [MatButtonModule, MatIconModule, MatProgressBarModule, MatTooltipModule, CmatBytesPipe, NgClass], template: "<div class=\"flex flex-col\">\r\n  <div class=\"flex flex-row items-center\">\r\n    <span class=\"flex items-center px-1\">\r\n      <mat-icon class=\"icon-size-6 text-hint\" [svgIcon]=\"fileType\"></mat-icon>\r\n    </span>\r\n    <span matTooltip=\"{{file.name}}\"\r\n      class=\"text-sm flex flex-auto whitespace-nowrap overflow-x-hidden text-ellipsis\">{{file.name}}({{fileSize |\r\n      cmatBytes}})</span>\r\n    <span class=\"flex flex-row gap-1 print:hidden\">\r\n      @if(id===null){\r\n      <button matIconButton color=\"primary\" class=\"w-8 min-h-8 h-8 max-w-8\" [ngClass]=\"{'disabled' : isUploading()}\"\r\n        (click)=\"upload()\">\r\n        <mat-icon class=\"icon-size-5\" [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon>\r\n      </button>\r\n      }\r\n\r\n      @if(id!==null){\r\n      <button matIconButton color=\"primary\" class=\"w-8 min-h-8 h-8 max-w-8\" (click)=\"download()\">\r\n        <mat-icon class=\"icon-size-5\" [svgIcon]=\"'mat_outline:file_download'\"></mat-icon>\r\n      </button>\r\n      }\r\n\r\n      @if(editMode){\r\n      <button matIconButton color=\"warn\" class=\"w-8 min-h-8 h-8 max-w-8\" (click)=\"remove()\">\r\n        <mat-icon class=\"icon-size-5\" [svgIcon]=\"'heroicons_solid:trash'\"></mat-icon>\r\n      </button>\r\n      }\r\n    </span>\r\n  </div>\r\n  @if(id===null){\r\n  <mat-progress-bar [value]=\"progressPercentage()\"></mat-progress-bar>\r\n  <div class=\"text-sm block whitespace-nowrap overflow-x-hidden text-ellipsis\">\r\n    <span>{{progressPercentage()}}%</span><span> {{loaded() | cmatBytes}} of {{total() | cmatBytes}}</span>\r\n  </div>\r\n  }\r\n</div>" }]
-        }], propDecorators: { fileAlias: [{
-                type: Input
-            }], filePath: [{
-                type: Input
-            }], fileCategory: [{
-                type: Input
-            }], isPublic: [{
-                type: Input
-            }], editMode: [{
-                type: Input
-            }], autoUpload: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], removeEvent: [{
-                type: Output
-            }], uploadEvent: [{
-                type: Output
-            }], file: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-upload', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatUpload', imports: [
+                        MatButtonModule,
+                        MatIconModule,
+                        MatProgressBarModule,
+                        MatTooltipModule,
+                        CmatBytesPipe,
+                        NgClass,
+                    ], template: "<div class=\"flex flex-col\">\r\n  <div class=\"flex flex-row items-center\">\r\n    <span class=\"flex items-center px-1\">\r\n      <mat-icon class=\"icon-size-6 text-hint\" [svgIcon]=\"fileType\"></mat-icon>\r\n    </span>\r\n    <span\r\n      matTooltip=\"{{ file().name }}\"\r\n      class=\"text-sm flex flex-auto whitespace-nowrap overflow-x-hidden text-ellipsis\"\r\n      >{{ file().name }}({{ fileSize | cmatBytes }})</span\r\n    >\r\n    <span class=\"flex flex-row gap-1 print:hidden\">\r\n      @if (id() === null) {\r\n        <button\r\n          matIconButton\r\n          color=\"primary\"\r\n          class=\"w-8 min-h-8 h-8 max-w-8\"\r\n          [ngClass]=\"{ disabled: isUploading() }\"\r\n          (click)=\"upload()\"\r\n        >\r\n          <mat-icon\r\n            class=\"icon-size-5\"\r\n            [svgIcon]=\"'mat_outline:file_upload'\"\r\n          ></mat-icon>\r\n        </button>\r\n      }\r\n\r\n      @if (id() !== null) {\r\n        <button\r\n          matIconButton\r\n          color=\"primary\"\r\n          class=\"w-8 min-h-8 h-8 max-w-8\"\r\n          (click)=\"download()\"\r\n        >\r\n          <mat-icon\r\n            class=\"icon-size-5\"\r\n            [svgIcon]=\"'mat_outline:file_download'\"\r\n          ></mat-icon>\r\n        </button>\r\n      }\r\n\r\n      @if (editMode()) {\r\n        <button\r\n          matIconButton\r\n          color=\"warn\"\r\n          class=\"w-8 min-h-8 h-8 max-w-8\"\r\n          (click)=\"remove()\"\r\n        >\r\n          <mat-icon\r\n            class=\"icon-size-5\"\r\n            [svgIcon]=\"'heroicons_solid:trash'\"\r\n          ></mat-icon>\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n  @if (id() === null) {\r\n    <mat-progress-bar [value]=\"progressPercentage()\"></mat-progress-bar>\r\n    <div\r\n      class=\"text-sm block whitespace-nowrap overflow-x-hidden text-ellipsis\"\r\n    >\r\n      <span>{{ progressPercentage() }}%</span\r\n      ><span> {{ loaded() | cmatBytes }} of {{ total() | cmatBytes }}</span>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { removeEvent: [{ type: i0.Output, args: ["removeEvent"] }], uploadEvent: [{ type: i0.Output, args: ["uploadEvent"] }], fileAlias: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileAlias", required: false }] }], filePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "filePath", required: false }] }], fileCategory: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileCategory", required: false }] }], isPublic: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPublic", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }, { type: i0.Output, args: ["fileChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 class CmatUploadQueueComponent {
     constructor() {
-        this.fileAlias = 'fileData';
-        this.filePath = '';
-        this.isPublic = false;
-        this.required = false;
-        this.autoUpload = true;
-        this.multiple = true;
-        this.accept = '';
-        this.title = '附件';
-        this.editMode = false;
-        this.filesData = [];
-        this.outputRemoveIdEvent = new EventEmitter();
-        this.outputUploadIdEvent = new EventEmitter();
-        this.outputFilesDataEvent = new EventEmitter();
+        this.outputRemoveIdEvent = output();
+        this.outputUploadIdEvent = output();
+        this.outputFilesDataEvent = output();
+        this.fileAlias = input('fileData', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fileAlias" }] : /* istanbul ignore next */ []));
+        this.filePath = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filePath" }] : /* istanbul ignore next */ []));
+        this.fileCategory = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fileCategory" }] : /* istanbul ignore next */ []));
+        this.isPublic = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPublic" }] : /* istanbul ignore next */ []));
+        this.required = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        this.autoUpload = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autoUpload" }] : /* istanbul ignore next */ []));
+        this.multiple = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        this.accept = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+        this.title = input('附件', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.editMode = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
+        this.filesData = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filesData" }] : /* istanbul ignore next */ []));
         this.id = 'cmatupload-' + crypto.randomUUID().slice(0, 8);
-        this.isHandSet = signal(false, ...(ngDevMode ? [{ debugName: "isHandSet" }] : /* istanbul ignore next */ []));
-        this.fileDataSource = signal([], ...(ngDevMode ? [{ debugName: "fileDataSource" }] : /* istanbul ignore next */ []));
+        this.fileUploads = viewChildren(CmatUploadComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fileUploads" }] : /* istanbul ignore next */ []));
         this._cmatMediaWatcherService = inject(CmatMediaWatcherService);
         this._elementRef = inject(ElementRef);
-        this._destroyRef = inject(DestroyRef);
-        this._cmatMediaWatcherService.onMediaChange$
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe(({ matchingAliases }) => {
-            this.isHandSet.set(!matchingAliases.includes('lg'));
-        });
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.isHandSet = computed(() => {
+            return !this._cmatMediaWatcherService.mediaChange().matchingAliases.includes('lg');
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHandSet" }] : /* istanbul ignore next */ []));
     }
     onDrop(event) {
-        const files = event.dataTransfer?.files;
-        if (!files)
+        // 检查是否是文件拖拽（来自操作系统），而不是 Angular DnD 的内部拖拽
+        const hasFiles = event.dataTransfer?.files && event.dataTransfer.files.length > 0;
+        const hasAngularDndData = event.dataTransfer?.types.includes('application/x-ng-dnd');
+        // 如果是 Angular DnD 的内部拖拽，不要拦截，让 DnD 库处理
+        if (hasAngularDndData) {
+            return;
+        }
+        // 只有真正的文件拖拽才处理
+        if (!hasFiles)
             return;
-        for (const file of files) {
-            if (this.accept?.includes(file.type))
+        for (const file of event.dataTransfer.files) {
+            if (this.accept()?.includes(file.type))
                 this.add(file);
         }
         event.preventDefault();
         event.stopPropagation();
     }
     onDropOver(event) {
-        event.preventDefault();
-    }
-    ngOnChanges(changes) {
-        if (changes['filesData']) {
-            this.fileDataSource.set(this.filesData);
+        // 同样检查是否是 Angular DnD 的内部拖拽
+        const hasAngularDndData = event.dataTransfer?.types.includes('application/x-ng-dnd');
+        if (hasAngularDndData) {
+            return; // 不拦截，让 DnD 库处理
         }
+        event.preventDefault();
     }
     ngAfterViewInit() {
         const fileUpload = this._elementRef.nativeElement.querySelector(`#${this.id}`);
@@ -281,54 +304,66 @@ class CmatUploadQueueComponent {
         if (!this.isFileTypeAccepted(file.type)) {
             return;
         }
-        if (!Array.isArray(this.filesData)) {
-            this.filesData = [];
+        const filesData = this.filesData();
+        if (!Array.isArray(filesData)) {
+            return;
         }
-        if (!(!this.multiple && this.filesData.length > 0)) {
-            this.filesData = [...this.filesData, file];
+        let newFilesData;
+        if (!(!this.multiple() && filesData.length > 0)) {
+            newFilesData = [...filesData, file];
         }
-        else if (this.fileUploads.first.id === null) {
-            this.filesData = [...this.filesData, file];
-            this.fileUploads.first.remove();
+        else {
+            const firstUpload = this.fileUploads()[0];
+            if (firstUpload?.id() === null) {
+                newFilesData = [...filesData, file];
+                firstUpload.remove();
+            }
+            else {
+                return;
+            }
         }
-        this.fileDataSource.set(this.filesData);
+        this.filesData.set(newFilesData);
     }
     upload(event) {
         this.outputUploadIdEvent.emit(event.id ?? '');
-        this.outputFilesDataEvent.emit(this.filesData);
-        this.fileDataSource.set(this.filesData);
+        this.outputFilesDataEvent.emit(this.filesData());
     }
     remove(event) {
-        if (this.filesData) {
-            const index = this.filesData.findIndex((j) => j === event.file);
+        const filesData = this.filesData();
+        if (filesData) {
+            const index = filesData.findIndex((j) => j === event.file());
             if (index > -1) {
-                this.filesData.splice(index, 1);
-                if (event.file.id) {
-                    this.outputRemoveIdEvent.emit(event.file.id);
+                filesData.splice(index, 1);
+                if (event.file().id) {
+                    this.outputRemoveIdEvent.emit(event.file().id);
                 }
-                this.outputFilesDataEvent.emit(this.filesData);
-                this.fileDataSource.set(this.filesData);
+                this.outputFilesDataEvent.emit(filesData);
             }
         }
     }
     uploadAll() {
-        this.fileUploads.forEach((fileUpload) => {
-            if (fileUpload.id === null) {
+        this.fileUploads().forEach((fileUpload) => {
+            if (fileUpload.id() === null) {
                 fileUpload.upload();
             }
         });
     }
     removeAll() {
-        this.fileUploads.forEach((fileUpload) => { fileUpload.remove(); });
+        this.fileUploads().forEach((fileUpload) => {
+            fileUpload.remove();
+        });
     }
     choose() {
-        this._elementRef.nativeElement.querySelector(`#${this.id}`)?.dispatchEvent(new MouseEvent('click'));
+        this._elementRef.nativeElement
+            .querySelector(`#${this.id}`)
+            ?.dispatchEvent(new MouseEvent('click'));
     }
     isFileTypeAccepted(fileType) {
-        if (!this.accept || this.accept === '') {
+        const accept = this.accept();
+        if (!accept || accept === '') {
             return true;
         }
-        const acceptedTypes = this.accept.split(',').map(type => type.trim());
+        const acceptedTypes = accept.split(',').map(type => type.trim());
         return acceptedTypes.some((type) => {
             if (type.endsWith('/*')) {
                 const prefix = type.slice(0, -1);
@@ -337,44 +372,19 @@ class CmatUploadQueueComponent {
             return fileType === type;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatUploadQueueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatUploadQueueComponent, isStandalone: true, selector: "cmat-upload-queue", inputs: { fileAlias: "fileAlias", filePath: "filePath", fileCategory: "fileCategory", isPublic: "isPublic", required: "required", autoUpload: "autoUpload", multiple: "multiple", accept: "accept", title: "title", editMode: "editMode", filesData: "filesData" }, outputs: { outputRemoveIdEvent: "outputRemoveIdEvent", outputUploadIdEvent: "outputUploadIdEvent", outputFilesDataEvent: "outputFilesDataEvent" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDropOver($event)" } }, viewQueries: [{ propertyName: "fileUploads", predicate: i0.forwardRef(() => CmatUploadComponent), descendants: true }], exportAs: ["cmatUploadQueue"], usesOnChanges: true, ngImport: i0, template: "<mat-card>\r\n    <mat-card-header>\r\n        <mat-card-title>\r\n            <legend class=\"text-lg\">\r\n                {{title}}\r\n                @if(required){\r\n                <span>*</span>\r\n                }\r\n            </legend>\r\n        </mat-card-title>\r\n    </mat-card-header>\r\n    <input type=\"file\" class=\"hidden\" [id]=\"id\" [multiple]=\"multiple\" [accept]=\"accept\" />\r\n\r\n    @if(editMode){\r\n    <mat-card-actions class=\"flex flex-row gap-1 print:hidden\">\r\n        @if(!isHandSet()){\r\n        <button matButton=\"filled\" color=\"primary\" (click)=\"choose()\">\r\n            @if(autoUpload){\r\n            <mat-icon [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon>\r\n            }@else {\r\n            <mat-icon [svgIcon]=\"'mat_outline:add_box'\"></mat-icon>\r\n            }\r\n            <span class=\"ml-2\">\u9009\u62E9</span>\r\n        </button>\r\n        @if(fileDataSource()&&multiple&&fileDataSource().length > 0){\r\n        @if(!autoUpload){\r\n        <button matButton=\"filled\" color=\"accent\" (click)=\"uploadAll()\"><mat-icon\r\n                [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon><span class=\"ml-2\">\u4E0A\u4F20\u5168\u90E8</span></button>\r\n        }\r\n\r\n        <button matButton=\"filled\" color=\"warn\" (click)=\"removeAll()\"><mat-icon\r\n                [svgIcon]=\"'heroicons_solid:trash'\"></mat-icon><span class=\"ml-2\">\u5220\u9664\u5168\u90E8</span></button>\r\n        }\r\n        }@else {\r\n        <button matIconButton  color=\"primary\" (click)=\"choose()\">\r\n            @if(autoUpload){\r\n            <mat-icon [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon>\r\n            }@else {\r\n            <mat-icon [svgIcon]=\"'mat_outline:add_box'\"></mat-icon>\r\n            }\r\n        </button>\r\n\r\n        @if(fileDataSource()&&multiple&&fileDataSource().length > 0){\r\n        @if(!autoUpload){\r\n        <button matIconButton  color=\"accent\" (click)=\"uploadAll()\"><mat-icon\r\n                [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon></button>\r\n        }\r\n\r\n        <button matIconButton  color=\"warn\" (click)=\"removeAll()\"><mat-icon\r\n                [svgIcon]=\"'heroicons_solid:trash'\"></mat-icon></button>\r\n        }\r\n        }\r\n    </mat-card-actions>\r\n    }\r\n\r\n    <mat-card-content>\r\n        <mat-list class=\"border-t\">\r\n            @for (file of fileDataSource(); track $index) {\r\n            <mat-list-item class=\"cmat-upload-file-item h-full\">\r\n                <cmat-upload class=\"my-2\" [fileAlias]=\"fileAlias\" [filePath]=\"filePath\" [fileCategory]=\"fileCategory\"\r\n                    [autoUpload]=\"autoUpload\" [editMode]=\"editMode\" [file]=\"file\" [id]=\"file.id||null\" [isPublic]=\"isPublic\"\r\n                    (removeEvent)=\"remove($event)\" (uploadEvent)=\"upload($event)\"></cmat-upload>\r\n            </mat-list-item>\r\n            }\r\n        </mat-list>\r\n    </mat-card-content>\r\n</mat-card>\r\n", dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CmatUploadComponent, selector: "cmat-upload", inputs: ["fileAlias", "filePath", "fileCategory", "isPublic", "editMode", "autoUpload", "id", "file"], outputs: ["removeEvent", "uploadEvent"], exportAs: ["cmatUpload"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatUploadQueueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatUploadQueueComponent, isStandalone: true, selector: "cmat-upload-queue", inputs: { fileAlias: { classPropertyName: "fileAlias", publicName: "fileAlias", isSignal: true, isRequired: false, transformFunction: null }, filePath: { classPropertyName: "filePath", publicName: "filePath", isSignal: true, isRequired: false, transformFunction: null }, fileCategory: { classPropertyName: "fileCategory", publicName: "fileCategory", isSignal: true, isRequired: false, transformFunction: null }, isPublic: { classPropertyName: "isPublic", publicName: "isPublic", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, filesData: { classPropertyName: "filesData", publicName: "filesData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outputRemoveIdEvent: "outputRemoveIdEvent", outputUploadIdEvent: "outputUploadIdEvent", outputFilesDataEvent: "outputFilesDataEvent", filesData: "filesDataChange" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDropOver($event)" } }, viewQueries: [{ propertyName: "fileUploads", predicate: CmatUploadComponent, descendants: true, isSignal: true }], exportAs: ["cmatUploadQueue"], ngImport: i0, template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>\r\n      <legend class=\"text-lg\">\r\n        {{ title() }}\r\n        @if (required()) {\r\n          <span>*</span>\r\n        }\r\n      </legend>\r\n    </mat-card-title>\r\n  </mat-card-header>\r\n  <input\r\n    type=\"file\"\r\n    class=\"hidden\"\r\n    [id]=\"id\"\r\n    [multiple]=\"multiple()\"\r\n    [accept]=\"accept()\"\r\n  />\r\n\r\n  @if (editMode()) {\r\n    <mat-card-actions class=\"flex flex-row gap-1 print:hidden\">\r\n      @if (!isHandSet()) {\r\n        <button matButton=\"filled\" color=\"primary\" (click)=\"choose()\">\r\n          @if (autoUpload()) {\r\n            <mat-icon [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon>\r\n          } @else {\r\n            <mat-icon [svgIcon]=\"'mat_outline:add_box'\"></mat-icon>\r\n          }\r\n          <span class=\"ml-2\">\u9009\u62E9</span>\r\n        </button>\r\n        @if (filesData() && multiple() && filesData().length > 0) {\r\n          @if (!autoUpload()) {\r\n            <button matButton=\"filled\" color=\"accent\" (click)=\"uploadAll()\">\r\n              <mat-icon [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon\r\n              ><span class=\"ml-2\">\u4E0A\u4F20\u5168\u90E8</span>\r\n            </button>\r\n          }\r\n\r\n          <button matButton=\"filled\" color=\"warn\" (click)=\"removeAll()\">\r\n            <mat-icon [svgIcon]=\"'heroicons_solid:trash'\"></mat-icon\r\n            ><span class=\"ml-2\">\u5220\u9664\u5168\u90E8</span>\r\n          </button>\r\n        }\r\n      } @else {\r\n        <button matIconButton color=\"primary\" (click)=\"choose()\">\r\n          @if (autoUpload()) {\r\n            <mat-icon [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon>\r\n          } @else {\r\n            <mat-icon [svgIcon]=\"'mat_outline:add_box'\"></mat-icon>\r\n          }\r\n        </button>\r\n\r\n        @if (filesData() && multiple() && filesData().length > 0) {\r\n          @if (!autoUpload()) {\r\n            <button matIconButton color=\"accent\" (click)=\"uploadAll()\">\r\n              <mat-icon [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon>\r\n            </button>\r\n          }\r\n\r\n          <button matIconButton color=\"warn\" (click)=\"removeAll()\">\r\n            <mat-icon [svgIcon]=\"'heroicons_solid:trash'\"></mat-icon>\r\n          </button>\r\n        }\r\n      }\r\n    </mat-card-actions>\r\n  }\r\n\r\n  <mat-card-content>\r\n    <mat-list class=\"border-t\">\r\n      @for (file of filesData(); track $index) {\r\n        <mat-list-item class=\"cmat-upload-file-item h-full\">\r\n          <cmat-upload\r\n            class=\"my-2\"\r\n            [fileAlias]=\"fileAlias()\"\r\n            [filePath]=\"filePath()\"\r\n            [fileCategory]=\"fileCategory()\"\r\n            [autoUpload]=\"autoUpload()\"\r\n            [editMode]=\"editMode()\"\r\n            [file]=\"file\"\r\n            [id]=\"file.id || null\"\r\n            [isPublic]=\"isPublic()\"\r\n            (removeEvent)=\"remove($event)\"\r\n            (uploadEvent)=\"upload($event)\"\r\n          ></cmat-upload>\r\n        </mat-list-item>\r\n      }\r\n    </mat-list>\r\n  </mat-card-content>\r\n</mat-card>\r\n", dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CmatUploadComponent, selector: "cmat-upload", inputs: ["fileAlias", "filePath", "fileCategory", "isPublic", "editMode", "autoUpload", "file", "id"], outputs: ["removeEvent", "uploadEvent", "fileChange"], exportAs: ["cmatUpload"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatUploadQueueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatUploadQueueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-upload-queue', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatUploadQueue', imports: [MatCardModule, MatListModule, MatButtonModule, MatIconModule, CmatUploadComponent], template: "<mat-card>\r\n    <mat-card-header>\r\n        <mat-card-title>\r\n            <legend class=\"text-lg\">\r\n                {{title}}\r\n                @if(required){\r\n                <span>*</span>\r\n                }\r\n            </legend>\r\n        </mat-card-title>\r\n    </mat-card-header>\r\n    <input type=\"file\" class=\"hidden\" [id]=\"id\" [multiple]=\"multiple\" [accept]=\"accept\" />\r\n\r\n    @if(editMode){\r\n    <mat-card-actions class=\"flex flex-row gap-1 print:hidden\">\r\n        @if(!isHandSet()){\r\n        <button matButton=\"filled\" color=\"primary\" (click)=\"choose()\">\r\n            @if(autoUpload){\r\n            <mat-icon [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon>\r\n            }@else {\r\n            <mat-icon [svgIcon]=\"'mat_outline:add_box'\"></mat-icon>\r\n            }\r\n            <span class=\"ml-2\">\u9009\u62E9</span>\r\n        </button>\r\n        @if(fileDataSource()&&multiple&&fileDataSource().length > 0){\r\n        @if(!autoUpload){\r\n        <button matButton=\"filled\" color=\"accent\" (click)=\"uploadAll()\"><mat-icon\r\n                [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon><span class=\"ml-2\">\u4E0A\u4F20\u5168\u90E8</span></button>\r\n        }\r\n\r\n        <button matButton=\"filled\" color=\"warn\" (click)=\"removeAll()\"><mat-icon\r\n                [svgIcon]=\"'heroicons_solid:trash'\"></mat-icon><span class=\"ml-2\">\u5220\u9664\u5168\u90E8</span></button>\r\n        }\r\n        }@else {\r\n        <button matIconButton  color=\"primary\" (click)=\"choose()\">\r\n            @if(autoUpload){\r\n            <mat-icon [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon>\r\n            }@else {\r\n            <mat-icon [svgIcon]=\"'mat_outline:add_box'\"></mat-icon>\r\n            }\r\n        </button>\r\n\r\n        @if(fileDataSource()&&multiple&&fileDataSource().length > 0){\r\n        @if(!autoUpload){\r\n        <button matIconButton  color=\"accent\" (click)=\"uploadAll()\"><mat-icon\r\n                [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon></button>\r\n        }\r\n\r\n        <button matIconButton  color=\"warn\" (click)=\"removeAll()\"><mat-icon\r\n                [svgIcon]=\"'heroicons_solid:trash'\"></mat-icon></button>\r\n        }\r\n        }\r\n    </mat-card-actions>\r\n    }\r\n\r\n    <mat-card-content>\r\n        <mat-list class=\"border-t\">\r\n            @for (file of fileDataSource(); track $index) {\r\n            <mat-list-item class=\"cmat-upload-file-item h-full\">\r\n                <cmat-upload class=\"my-2\" [fileAlias]=\"fileAlias\" [filePath]=\"filePath\" [fileCategory]=\"fileCategory\"\r\n                    [autoUpload]=\"autoUpload\" [editMode]=\"editMode\" [file]=\"file\" [id]=\"file.id||null\" [isPublic]=\"isPublic\"\r\n                    (removeEvent)=\"remove($event)\" (uploadEvent)=\"upload($event)\"></cmat-upload>\r\n            </mat-list-item>\r\n            }\r\n        </mat-list>\r\n    </mat-card-content>\r\n</mat-card>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { fileUploads: [{
-                type: ViewChildren,
-                args: [forwardRef(() => CmatUploadComponent)]
-            }], fileAlias: [{
-                type: Input
-            }], filePath: [{
-                type: Input
-            }], fileCategory: [{
-                type: Input
-            }], isPublic: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], autoUpload: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], accept: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], editMode: [{
-                type: Input
-            }], filesData: [{
-                type: Input
-            }], outputRemoveIdEvent: [{
-                type: Output
-            }], outputUploadIdEvent: [{
-                type: Output
-            }], outputFilesDataEvent: [{
-                type: Output
-            }], onDrop: [{
+            args: [{ selector: 'cmat-upload-queue', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatUploadQueue', imports: [
+                        MatCardModule,
+                        MatListModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        CmatUploadComponent,
+                    ], template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>\r\n      <legend class=\"text-lg\">\r\n        {{ title() }}\r\n        @if (required()) {\r\n          <span>*</span>\r\n        }\r\n      </legend>\r\n    </mat-card-title>\r\n  </mat-card-header>\r\n  <input\r\n    type=\"file\"\r\n    class=\"hidden\"\r\n    [id]=\"id\"\r\n    [multiple]=\"multiple()\"\r\n    [accept]=\"accept()\"\r\n  />\r\n\r\n  @if (editMode()) {\r\n    <mat-card-actions class=\"flex flex-row gap-1 print:hidden\">\r\n      @if (!isHandSet()) {\r\n        <button matButton=\"filled\" color=\"primary\" (click)=\"choose()\">\r\n          @if (autoUpload()) {\r\n            <mat-icon [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon>\r\n          } @else {\r\n            <mat-icon [svgIcon]=\"'mat_outline:add_box'\"></mat-icon>\r\n          }\r\n          <span class=\"ml-2\">\u9009\u62E9</span>\r\n        </button>\r\n        @if (filesData() && multiple() && filesData().length > 0) {\r\n          @if (!autoUpload()) {\r\n            <button matButton=\"filled\" color=\"accent\" (click)=\"uploadAll()\">\r\n              <mat-icon [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon\r\n              ><span class=\"ml-2\">\u4E0A\u4F20\u5168\u90E8</span>\r\n            </button>\r\n          }\r\n\r\n          <button matButton=\"filled\" color=\"warn\" (click)=\"removeAll()\">\r\n            <mat-icon [svgIcon]=\"'heroicons_solid:trash'\"></mat-icon\r\n            ><span class=\"ml-2\">\u5220\u9664\u5168\u90E8</span>\r\n          </button>\r\n        }\r\n      } @else {\r\n        <button matIconButton color=\"primary\" (click)=\"choose()\">\r\n          @if (autoUpload()) {\r\n            <mat-icon [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon>\r\n          } @else {\r\n            <mat-icon [svgIcon]=\"'mat_outline:add_box'\"></mat-icon>\r\n          }\r\n        </button>\r\n\r\n        @if (filesData() && multiple() && filesData().length > 0) {\r\n          @if (!autoUpload()) {\r\n            <button matIconButton color=\"accent\" (click)=\"uploadAll()\">\r\n              <mat-icon [svgIcon]=\"'mat_outline:file_upload'\"></mat-icon>\r\n            </button>\r\n          }\r\n\r\n          <button matIconButton color=\"warn\" (click)=\"removeAll()\">\r\n            <mat-icon [svgIcon]=\"'heroicons_solid:trash'\"></mat-icon>\r\n          </button>\r\n        }\r\n      }\r\n    </mat-card-actions>\r\n  }\r\n\r\n  <mat-card-content>\r\n    <mat-list class=\"border-t\">\r\n      @for (file of filesData(); track $index) {\r\n        <mat-list-item class=\"cmat-upload-file-item h-full\">\r\n          <cmat-upload\r\n            class=\"my-2\"\r\n            [fileAlias]=\"fileAlias()\"\r\n            [filePath]=\"filePath()\"\r\n            [fileCategory]=\"fileCategory()\"\r\n            [autoUpload]=\"autoUpload()\"\r\n            [editMode]=\"editMode()\"\r\n            [file]=\"file\"\r\n            [id]=\"file.id || null\"\r\n            [isPublic]=\"isPublic()\"\r\n            (removeEvent)=\"remove($event)\"\r\n            (uploadEvent)=\"upload($event)\"\r\n          ></cmat-upload>\r\n        </mat-list-item>\r\n      }\r\n    </mat-list>\r\n  </mat-card-content>\r\n</mat-card>\r\n" }]
+        }], propDecorators: { outputRemoveIdEvent: [{ type: i0.Output, args: ["outputRemoveIdEvent"] }], outputUploadIdEvent: [{ type: i0.Output, args: ["outputUploadIdEvent"] }], outputFilesDataEvent: [{ type: i0.Output, args: ["outputFilesDataEvent"] }], fileAlias: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileAlias", required: false }] }], filePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "filePath", required: false }] }], fileCategory: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileCategory", required: false }] }], isPublic: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPublic", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], filesData: [{ type: i0.Input, args: [{ isSignal: true, alias: "filesData", required: false }] }, { type: i0.Output, args: ["filesDataChange"] }], fileUploads: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CmatUploadComponent), { isSignal: true }] }], onDrop: [{
                 type: HostListener,
                 args: ['drop', ['$event']]
             }], onDropOver: [{