@matechat/ng 17.2.1-alpha.3 → 17.2.1

package/fesm2022/matechat-ng.mjs

@@ -311,7 +311,9 @@ function upload(config) {
 }
 
 class DropAreaComponent {
-    constructor() {
+    constructor(renderer, cdr) {
+        this.renderer = renderer;
+        this.cdr = cdr;
         this.isDisabled = false;
         this.drop = new EventEmitter();
         this.isDragging = false;
@@ -322,6 +324,7 @@ class DropAreaComponent {
             this.dragCounter++;
             if (this.dragCounter === 1) {
                 this.isDragging = true;
+                this.cdr.detectChanges();
             }
             if (this.container && this.dropAreaEl.nativeElement) {
                 if (this.container === document.body) {
@@ -344,11 +347,13 @@ class DropAreaComponent {
             this.dragCounter--;
             if (this.dragCounter === 0) {
                 this.isDragging = false;
+                this.cdr.detectChanges();
             }
         };
         this.handleDrop = (e) => {
             e.preventDefault();
             this.isDragging = false;
+            this.cdr.detectChanges();
             this.dragCounter = 0; // 重置计数器
             if (this.isDisabled)
                 return;
@@ -360,6 +365,7 @@ class DropAreaComponent {
         this.onBodyDrop = (e) => {
             e.preventDefault();
             this.isDragging = false;
+            this.cdr.detectChanges();
             this.dragCounter = 0;
         };
     }
@@ -372,28 +378,28 @@ class DropAreaComponent {
         }
     }
     ngAfterViewInit() {
-        document.body.appendChild(this.dropAreaEl.nativeElement);
+        this.renderer.appendChild(document.body, this.dropAreaEl.nativeElement);
         if (this.getDropContainer) {
             this.container = this.getDropContainer();
         }
-        document.body.addEventListener('dragenter', this.handleDragEnter);
-        document.body.addEventListener('dragover', this.handleDragOver);
-        document.body.addEventListener('dragleave', this.handleDragLeave);
-        document.body.addEventListener('drop', this.onBodyDrop);
+        this.dragEnterListener = this.renderer.listen(document.body, 'dragenter', this.handleDragEnter);
+        this.dragOverListener = this.renderer.listen(document.body, 'dragover', this.handleDragOver);
+        this.dragLeaveListener = this.renderer.listen(document.body, 'dragleave', this.handleDragLeave);
+        this.dropListener = this.renderer.listen(document.body, 'drop', this.onBodyDrop);
     }
     ngOnDestroy() {
-        document.body.removeEventListener('dragenter', this.handleDragEnter);
-        document.body.removeEventListener('dragover', this.handleDragOver);
-        document.body.removeEventListener('dragleave', this.handleDragLeave);
-        document.body.removeEventListener('drop', this.onBodyDrop);
+        this.dragEnterListener?.();
+        this.dragOverListener?.();
+        this.dragLeaveListener?.();
+        this.dropListener?.();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DropAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DropAreaComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: DropAreaComponent, isStandalone: true, selector: "mc-drop-area", inputs: { getDropContainer: "getDropContainer", isDisabled: "isDisabled" }, outputs: { drop: "drop" }, viewQueries: [{ propertyName: "dropAreaEl", first: true, predicate: ["dropArea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #dropArea\n  [ngClass]=\"{\n    'mc-attachment-drop-area': true,\n    'hide-drop-area': !isDragging,\n  }\"\n  (drop)=\"handleDrop($event)\"\n>\n  <ng-content />\n</div>\n", styles: [".mc-attachment-drop-area{position:fixed;padding:20px 40px;display:flex;justify-content:center;align-items:center;border:2px dashed var(--devui-brand, #5e7ce0);border-radius:var(--devui-border-radius, 2px);color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 12px);font-weight:700;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;box-sizing:border-box}.mc-attachment-drop-area.hide-drop-area{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DropAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mc-drop-area', standalone: true, imports: [CommonModule], template: "<div\n  #dropArea\n  [ngClass]=\"{\n    'mc-attachment-drop-area': true,\n    'hide-drop-area': !isDragging,\n  }\"\n  (drop)=\"handleDrop($event)\"\n>\n  <ng-content />\n</div>\n", styles: [".mc-attachment-drop-area{position:fixed;padding:20px 40px;display:flex;justify-content:center;align-items:center;border:2px dashed var(--devui-brand, #5e7ce0);border-radius:var(--devui-border-radius, 2px);color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 12px);font-weight:700;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;box-sizing:border-box}.mc-attachment-drop-area.hide-drop-area{display:none}\n"] }]
-        }], propDecorators: { getDropContainer: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { getDropContainer: [{
                 type: Input
             }], isDisabled: [{
                 type: Input