@acorex/components 7.8.13 → 7.8.15

package/fesm2022/acorex-components-uploader.mjs

@@ -1,16 +1,19 @@
 import { MXBaseComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, Directive, inject, Injectable, NgModule } from '@angular/core';
+import { Component, ViewEncapsulation, inject, Injectable, afterNextRender, Directive, Input, HostBinding, NgModule } from '@angular/core';
 import * as i1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
+import { trigger, state, style, AUTO_STYLE, transition, animate } from '@angular/animations';
 import * as i1$1 from '@angular/cdk/dialog';
-import { Dialog } from '@angular/cdk/dialog';
+import { Dialog, DIALOG_DATA } from '@angular/cdk/dialog';
+import { GlobalPositionStrategy } from '@angular/cdk/overlay';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@acorex/core/translation';
 import { AXTranslator, AXTranslationModule } from '@acorex/core/translation';
+import { AXFileService } from '@acorex/core/file';
 import { AXButtonModule } from '@acorex/components/button';
-import { GlobalPositionStrategy } from '@angular/cdk/overlay';
 
 class AXUploaderDropZoneComponent extends MXBaseComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderDropZoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -21,45 +24,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
             args: [{ selector: 'ax-uploader-drop-zone', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-uploader-drop-zone-container\">\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>Drag & Drop or <a href=\"#\">Choose file</a> to upload</span>\n    <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p>\n  </div>\n</div>\n" }]
         }] });
 
+class AXUploaderService {
+    constructor() {
+        this.dialog = inject(Dialog);
+        this.http = inject(HttpClient);
+        this.files = [];
+    }
+    openDialog(data) {
+        this.files = [...data];
+        const positionStrategy = new GlobalPositionStrategy();
+        this.dialogRef = this.dialog.open(AXUploaderListComponent, {
+            hasBackdrop: false,
+            closeOnNavigation: false,
+            width: '320px',
+            maxWidth: 320,
+            panelClass: ['ax-uploader-list-pane', 'ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],
+            positionStrategy: positionStrategy.bottom().end('24px'),
+            data,
+        });
+    }
+    closeDialog() {
+        this.dialogRef.close();
+    }
+    upload(requestUrl, file, options) {
+        const formData = new FormData();
+        formData.append(file.name, file);
+        return this.http.post(requestUrl, formData, options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderService, decorators: [{
+            type: Injectable
+        }] });
+
 class AXUploaderListComponent extends MXBaseComponent {
     constructor(dialogRef) {
         super();
         this.dialogRef = dialogRef;
-        this.items = [
-            {
-                name: 'avatar.png',
-                size: 2048,
-                type: 'picture',
-                description: 'Upload canceled',
-            },
-            {
-                name: 'intro.mkv',
-                size: 10024,
-                type: 'video',
-            },
-            {
-                name: 'time.xls',
-                size: 10024,
-                type: 'doc',
-            },
-            {
-                name: 'resume.pdf',
-                size: 10024,
-                type: 'pdf',
-            },
-        ];
+        this.items = inject(DIALOG_DATA);
+        this.uploadService = inject(AXUploaderService);
         this.leftTime = 5;
+        this.isCollapsed = false;
+        afterNextRender(() => {
+            this.uploadService.upload('http://api.acorexui.com/api/v1/files', this.items[0]).subscribe({
+                next: (e) => {
+                    console.log(e);
+                },
+                error: (err) => {
+                    console.error(err);
+                },
+            });
+        });
+    }
+    toggle() {
+        this.isCollapsed = !this.isCollapsed;
     }
-    toggle() { }
     close() {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderListComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXUploaderListComponent, selector: "ax-uploader-list", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-uploader-list-header\">\n  <div>Uploader list</div>\n  <div>\n    <i class=\"ax-icon ax-icon-chevron-down\" (click)=\"toggle()\"></i>\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n<div class=\"ax-uploader-progress-status\">\n  <div>{{ leftTime }}min left</div>\n  <button>{{ 'common.cancel' | trans }}</button>\n</div>\n<ul class=\"ax-uploader-list-items\">\n  <ng-container *ngFor=\"let item of items\">\n    <li>\n      <div>\n        <i class=\"ax-icon ax-icon-inbox\"></i>\n        <div class=\"ax-uploader-item-text\">\n          <strong>{{ item.name }}</strong>\n          <small>{{ item.description }}</small>\n        </div>\n      </div>\n      <div></div>\n    </li>\n  </ng-container>\n</ul>\n", styles: [".ax-dark ax-uploader-list .ax-uploader-progress-status{background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-50));border-color:rgba(var(--ax-color-primary-500))}ax-uploader-list{display:block;background-color:rgba(var(--ax-color-surface));-webkit-border-top-left-radius:.75rem;-webkit-border-top-right-radius:.75rem;-moz-border-radius-topleft:.75rem;-moz-border-radius-topright:.75rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem;overflow:hidden;box-shadow:-1px -1px 10px #00000029;border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:rgba(var(--ax-color-primary-500))}ax-uploader-list .ax-uploader-list-header{display:flex;justify-content:space-between;padding:.75rem 1rem;background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore));font-weight:500}ax-uploader-list .ax-uploader-list-header .ax-icon{font-size:1.5rem;cursor:pointer;margin-inline-start:.5rem}ax-uploader-list .ax-uploader-list-header .ax-icon:hover{opacity:.6}ax-uploader-list .ax-uploader-progress-status{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-700));padding:.5rem .75rem;border-top:1px solid;border-bottom:1px solid;border-color:rgba(var(--ax-color-primary-200))}ax-uploader-list .ax-uploader-list-items{padding:.5rem 0}ax-uploader-list .ax-uploader-list-items li{font-size:.875rem;padding:.75rem;display:flex;align-items:center;justify-content:space-between}ax-uploader-list .ax-uploader-list-items li>div{display:flex}ax-uploader-list .ax-uploader-list-items li>div .ax-icon{display:flex;font-size:1.5rem;margin-inline-end:.5rem}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text{display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text strong{font-weight:500;display:block}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text small{color:rgba(var(--ax-color-on-surface-fore),.75)}.ax-uploader-list-pane .cdk-dialog-container:focus,.ax-uploader-list-pane .cdk-dialog-container:focus-visible,.ax-uploader-list-pane .cdk-dialog-container:focus-within{outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "trans" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXUploaderListComponent, selector: "ax-uploader-list", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-uploader-list-header\">\n  <div>Uploader list</div>\n  <div>\n    <i\n      class=\"ax-icon\"\n      [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n      (click)=\"toggle()\"\n    ></i>\n\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n\n<div [@collapse]=\"isCollapsed\">\n  <div class=\"ax-uploader-progress-status\">\n    <div>{{ leftTime }}min left</div>\n    <button>{{ 'common.cancel' | trans }}</button>\n  </div>\n  <ul class=\"ax-uploader-list-items\">\n    <ng-container *ngFor=\"let item of items\">\n      <li>\n        <div>\n          <i class=\"ax-icon ax-icon-inbox\"></i>\n          <div class=\"ax-uploader-item-text\">\n            <strong>{{ item.name }}</strong>\n            <small>{{ item.size }}</small>\n          </div>\n        </div>\n        <div></div>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", styles: [".ax-dark ax-uploader-list .ax-uploader-progress-status{background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-50));border-color:rgba(var(--ax-color-primary-500))}ax-uploader-list{display:block;background-color:rgba(var(--ax-color-surface));-webkit-border-top-left-radius:.75rem;-webkit-border-top-right-radius:.75rem;-moz-border-radius-topleft:.75rem;-moz-border-radius-topright:.75rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem;overflow:hidden;box-shadow:-1px -1px 10px #00000029;border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:rgba(var(--ax-color-primary-500))}ax-uploader-list .ax-uploader-list-header{display:flex;justify-content:space-between;padding:.75rem 1rem;background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore));font-weight:500}ax-uploader-list .ax-uploader-list-header .ax-icon{font-size:1.5rem;cursor:pointer;margin-inline-start:.5rem}ax-uploader-list .ax-uploader-list-header .ax-icon:hover{opacity:.6}ax-uploader-list .ax-uploader-progress-status{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-700));padding:.5rem .75rem;border-top:1px solid;border-bottom:1px solid;border-color:rgba(var(--ax-color-primary-200))}ax-uploader-list .ax-uploader-list-items{padding:.5rem 0;max-height:50vh;overflow-y:auto;overflow-x:hidden}ax-uploader-list .ax-uploader-list-items li{font-size:.875rem;padding:.75rem;display:flex;align-items:center;justify-content:space-between}ax-uploader-list .ax-uploader-list-items li>div{display:flex}ax-uploader-list .ax-uploader-list-items li>div .ax-icon{display:flex;font-size:1.5rem;margin-inline-end:.5rem}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text{display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text strong{font-weight:500;display:block}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text small{color:rgba(var(--ax-color-on-surface-fore),.75)}.ax-uploader-list-pane .cdk-dialog-container:focus,.ax-uploader-list-pane .cdk-dialog-container:focus-visible,.ax-uploader-list-pane .cdk-dialog-container:focus-within{outline:none}\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: "pipe", type: i3.AXTranslatorPipe, name: "trans" }], animations: [
+            trigger('collapse', [
+                state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
+                state('true', style({ height: '0', visibility: 'hidden' })),
+                transition('false => true', animate(150 + 'ms ease-in')),
+                transition('true => false', animate(150 + 'ms ease-out')),
+            ]),
+        ], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-uploader-list', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-uploader-list-header\">\n  <div>Uploader list</div>\n  <div>\n    <i class=\"ax-icon ax-icon-chevron-down\" (click)=\"toggle()\"></i>\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n<div class=\"ax-uploader-progress-status\">\n  <div>{{ leftTime }}min left</div>\n  <button>{{ 'common.cancel' | trans }}</button>\n</div>\n<ul class=\"ax-uploader-list-items\">\n  <ng-container *ngFor=\"let item of items\">\n    <li>\n      <div>\n        <i class=\"ax-icon ax-icon-inbox\"></i>\n        <div class=\"ax-uploader-item-text\">\n          <strong>{{ item.name }}</strong>\n          <small>{{ item.description }}</small>\n        </div>\n      </div>\n      <div></div>\n    </li>\n  </ng-container>\n</ul>\n", styles: [".ax-dark ax-uploader-list .ax-uploader-progress-status{background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-50));border-color:rgba(var(--ax-color-primary-500))}ax-uploader-list{display:block;background-color:rgba(var(--ax-color-surface));-webkit-border-top-left-radius:.75rem;-webkit-border-top-right-radius:.75rem;-moz-border-radius-topleft:.75rem;-moz-border-radius-topright:.75rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem;overflow:hidden;box-shadow:-1px -1px 10px #00000029;border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:rgba(var(--ax-color-primary-500))}ax-uploader-list .ax-uploader-list-header{display:flex;justify-content:space-between;padding:.75rem 1rem;background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore));font-weight:500}ax-uploader-list .ax-uploader-list-header .ax-icon{font-size:1.5rem;cursor:pointer;margin-inline-start:.5rem}ax-uploader-list .ax-uploader-list-header .ax-icon:hover{opacity:.6}ax-uploader-list .ax-uploader-progress-status{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-700));padding:.5rem .75rem;border-top:1px solid;border-bottom:1px solid;border-color:rgba(var(--ax-color-primary-200))}ax-uploader-list .ax-uploader-list-items{padding:.5rem 0}ax-uploader-list .ax-uploader-list-items li{font-size:.875rem;padding:.75rem;display:flex;align-items:center;justify-content:space-between}ax-uploader-list .ax-uploader-list-items li>div{display:flex}ax-uploader-list .ax-uploader-list-items li>div .ax-icon{display:flex;font-size:1.5rem;margin-inline-end:.5rem}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text{display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text strong{font-weight:500;display:block}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text small{color:rgba(var(--ax-color-on-surface-fore),.75)}.ax-uploader-list-pane .cdk-dialog-container:focus,.ax-uploader-list-pane .cdk-dialog-container:focus-visible,.ax-uploader-list-pane .cdk-dialog-container:focus-within{outline:none}\n"] }]
+            args: [{ selector: 'ax-uploader-list', encapsulation: ViewEncapsulation.None, animations: [
+                        trigger('collapse', [
+                            state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
+                            state('true', style({ height: '0', visibility: 'hidden' })),
+                            transition('false => true', animate(150 + 'ms ease-in')),
+                            transition('true => false', animate(150 + 'ms ease-out')),
+                        ]),
+                    ], template: "<div class=\"ax-uploader-list-header\">\n  <div>Uploader list</div>\n  <div>\n    <i\n      class=\"ax-icon\"\n      [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n      (click)=\"toggle()\"\n    ></i>\n\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n\n<div [@collapse]=\"isCollapsed\">\n  <div class=\"ax-uploader-progress-status\">\n    <div>{{ leftTime }}min left</div>\n    <button>{{ 'common.cancel' | trans }}</button>\n  </div>\n  <ul class=\"ax-uploader-list-items\">\n    <ng-container *ngFor=\"let item of items\">\n      <li>\n        <div>\n          <i class=\"ax-icon ax-icon-inbox\"></i>\n          <div class=\"ax-uploader-item-text\">\n            <strong>{{ item.name }}</strong>\n            <small>{{ item.size }}</small>\n          </div>\n        </div>\n        <div></div>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", styles: [".ax-dark ax-uploader-list .ax-uploader-progress-status{background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-50));border-color:rgba(var(--ax-color-primary-500))}ax-uploader-list{display:block;background-color:rgba(var(--ax-color-surface));-webkit-border-top-left-radius:.75rem;-webkit-border-top-right-radius:.75rem;-moz-border-radius-topleft:.75rem;-moz-border-radius-topright:.75rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem;overflow:hidden;box-shadow:-1px -1px 10px #00000029;border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:rgba(var(--ax-color-primary-500))}ax-uploader-list .ax-uploader-list-header{display:flex;justify-content:space-between;padding:.75rem 1rem;background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore));font-weight:500}ax-uploader-list .ax-uploader-list-header .ax-icon{font-size:1.5rem;cursor:pointer;margin-inline-start:.5rem}ax-uploader-list .ax-uploader-list-header .ax-icon:hover{opacity:.6}ax-uploader-list .ax-uploader-progress-status{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-700));padding:.5rem .75rem;border-top:1px solid;border-bottom:1px solid;border-color:rgba(var(--ax-color-primary-200))}ax-uploader-list .ax-uploader-list-items{padding:.5rem 0;max-height:50vh;overflow-y:auto;overflow-x:hidden}ax-uploader-list .ax-uploader-list-items li{font-size:.875rem;padding:.75rem;display:flex;align-items:center;justify-content:space-between}ax-uploader-list .ax-uploader-list-items li>div{display:flex}ax-uploader-list .ax-uploader-list-items li>div .ax-icon{display:flex;font-size:1.5rem;margin-inline-end:.5rem}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text{display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text strong{font-weight:500;display:block}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text small{color:rgba(var(--ax-color-on-surface-fore),.75)}.ax-uploader-list-pane .cdk-dialog-container:focus,.ax-uploader-list-pane .cdk-dialog-container:focus-visible,.ax-uploader-list-pane .cdk-dialog-container:focus-within{outline:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.DialogRef }]; } });
 
 class AXUploaderOverlayComponent extends MXBaseComponent {
@@ -72,34 +115,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
         }] });
 
 class AXUploaderZoneDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.stateClass = 'ax-drop-over-state';
-    }
-    ngOnInit() {
+    initElement() {
         this.element = this.elementRef.nativeElement;
         this.element.style.position = 'relative';
-        this.init();
     }
-    init() {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.fileService = inject(AXFileService);
+        this.uploadService = inject(AXUploaderService);
+        this.multiple = true;
+        this.stateClass = 'ax-uploader-overlay-state';
+        this.files = [];
+        this.initElement();
         this.element.addEventListener('dragenter', this.handleDragEnter.bind(this));
+        this.element.addEventListener('dragover', this.handleDragOver.bind(this));
+        this.element.addEventListener('drop', this.handleOnDrop.bind(this));
         this.element.addEventListener('dragleave', this.handleDragLeave.bind(this));
     }
     ngOnDestroy() {
         this.element.removeEventListener('dragenter', this.handleDragEnter.bind(this));
-        this.element.removeEventListener('dragover', this.handleDragEnter.bind(this));
+        this.element.removeEventListener('drop', this.handleOnDrop.bind(this));
+        this.element.removeEventListener('dragover', this.handleDragOver.bind(this));
+        this.element.removeEventListener('dragleave', this.handleDragLeave.bind(this));
     }
     handleDragEnter(event) {
         this.createZone();
         event.preventDefault();
     }
-    handleDragLeave(event) {
+    handleOnDrop(event) {
+        event.preventDefault();
+        this.uploadService.openDialog(event.dataTransfer?.files);
         this.removeZone();
+    }
+    handleDragOver(event) {
         event.preventDefault();
     }
+    handleDragLeave(event) {
+        event.preventDefault();
+        this.removeZone();
+    }
     createZone() {
         this.overlayElement = document.createElement('div');
-        this.overlayElement.classList.add('ax-drop-over-state');
+        this.overlayElement.classList.add('ax-uploader-overlay-state');
         const icon = document.createElement('span');
         icon.classList.add('ax-icon', 'ax-icon-upload');
         const text = document.createElement('span');
@@ -111,51 +168,34 @@ class AXUploaderZoneDirective {
     removeZone() {
         this.overlayElement.remove();
     }
+    get __hostClass() {
+        return `ax-drop-zone`;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderZoneDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.6", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.6", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: { multiple: "multiple" }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axUploaderZone]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class AXUploaderService {
-    constructor() {
-        this.dialog = inject(Dialog);
-    }
-    openDialog() {
-        const positionStrategy = new GlobalPositionStrategy();
-        this.dialogRef = this.dialog.open(AXUploaderListComponent, {
-            hasBackdrop: false,
-            closeOnNavigation: false,
-            width: '320px',
-            maxWidth: 320,
-            panelClass: ['ax-uploader-list-pane', 'ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],
-            positionStrategy: positionStrategy.bottom().end('24px'),
-        });
-    }
-    closeDialog() {
-        this.dialogRef.close();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderService, decorators: [{
-            type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { multiple: [{
+                type: Input
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 class AXUploaderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderModule, declarations: [AXUploaderDropZoneComponent,
             AXUploaderListComponent,
             AXUploaderOverlayComponent,
-            AXUploaderZoneDirective], imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule], exports: [AXUploaderDropZoneComponent,
+            AXUploaderZoneDirective], imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule, HttpClientModule], exports: [AXUploaderDropZoneComponent,
             AXUploaderListComponent,
             AXUploaderOverlayComponent,
             AXUploaderZoneDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderModule, providers: [AXUploaderService], imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderModule, providers: [AXUploaderService, AXFileService], imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule, HttpClientModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderModule, decorators: [{
             type: NgModule,
@@ -166,14 +206,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                         AXUploaderOverlayComponent,
                         AXUploaderZoneDirective,
                     ],
-                    imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule],
+                    imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule, HttpClientModule],
                     exports: [
                         AXUploaderDropZoneComponent,
                         AXUploaderListComponent,
                         AXUploaderOverlayComponent,
                         AXUploaderZoneDirective,
                     ],
-                    providers: [AXUploaderService],
+                    providers: [AXUploaderService, AXFileService],
                 }]
         }] });
 

package/fesm2022/acorex-components-uploader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-uploader.mjs","sources":["../../../../libs/components/uploader/src/lib/uploader-drop-zone.component.ts","../../../../libs/components/uploader/src/lib/uploader-drop-zone.component.html","../../../../libs/components/uploader/src/lib/uploader-list.component.ts","../../../../libs/components/uploader/src/lib/uploader-list.component.html","../../../../libs/components/uploader/src/lib/uploader-overlay.component.ts","../../../../libs/components/uploader/src/lib/uploader-overlay.component.html","../../../../libs/components/uploader/src/lib/uploader-zone.directive.ts","../../../../libs/components/uploader/src/lib/uploader.service.ts","../../../../libs/components/uploader/src/lib/uploader.module.ts","../../../../libs/components/uploader/src/acorex-components-uploader.ts"],"sourcesContent":["import { MXBaseComponent } from '@acorex/components/common';\nimport { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-uploader-drop-zone',\n  templateUrl: './uploader-drop-zone.component.html',\n  styleUrls: ['./uploader.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXUploaderDropZoneComponent extends MXBaseComponent {}\n","<div class=\"ax-uploader-drop-zone-container\">\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>Drag & Drop or <a href=\"#\">Choose file</a> to upload</span>\n    <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p>\n  </div>\n</div>\n","import { AXComponentCloseEvent, MXBaseComponent } from '@acorex/components/common';\nimport { DialogRef } from '@angular/cdk/dialog';\nimport { Component, ViewEncapsulation } from '@angular/core';\n\nexport interface AXUploaderItem {\n  type: 'picture' | 'doc' | 'pdf' | 'archive' | 'video' | 'unknow';\n  name: string;\n  size: number;\n  description?: string;\n}\n\n@Component({\n  selector: 'ax-uploader-list',\n  templateUrl: './uploader-list.component.html',\n  styleUrls: ['./uploader-list.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXUploaderListComponent extends MXBaseComponent {\n  items: AXUploaderItem[] = [\n    {\n      name: 'avatar.png',\n      size: 2048,\n      type: 'picture',\n      description: 'Upload canceled',\n    },\n    {\n      name: 'intro.mkv',\n      size: 10024,\n      type: 'video',\n    },\n    {\n      name: 'time.xls',\n      size: 10024,\n      type: 'doc',\n    },\n    {\n      name: 'resume.pdf',\n      size: 10024,\n      type: 'pdf',\n    },\n  ];\n\n  leftTime = 5;\n\n  constructor(private dialogRef: DialogRef<AXComponentCloseEvent>) {\n    super();\n  }\n\n  toggle() {}\n  close() {\n    this.dialogRef.close();\n  }\n}\n","<div class=\"ax-uploader-list-header\">\n  <div>Uploader list</div>\n  <div>\n    <i class=\"ax-icon ax-icon-chevron-down\" (click)=\"toggle()\"></i>\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n<div class=\"ax-uploader-progress-status\">\n  <div>{{ leftTime }}min left</div>\n  <button>{{ 'common.cancel' | trans }}</button>\n</div>\n<ul class=\"ax-uploader-list-items\">\n  <ng-container *ngFor=\"let item of items\">\n    <li>\n      <div>\n        <i class=\"ax-icon ax-icon-inbox\"></i>\n        <div class=\"ax-uploader-item-text\">\n          <strong>{{ item.name }}</strong>\n          <small>{{ item.description }}</small>\n        </div>\n      </div>\n      <div></div>\n    </li>\n  </ng-container>\n</ul>\n","import { MXBaseComponent } from '@acorex/components/common';\nimport { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-uploader-overlay',\n  templateUrl: './uploader-overlay.component.html',\n  styleUrls: ['./uploader.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXUploaderOverlayComponent extends MXBaseComponent {}\n","<div\n    class=\"ax-flex ax-flex-col ax-gap-4 ax-items-center ax-justify-center ax-h-[95vh] hover:ax-bg-primary-50 ax-m-2 hover:ax-border-2 ax-rounded-lg hover:ax-border-primary-500\">\n\n</div>","import { AXTranslator } from '@acorex/core/translation';\nimport { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';\n\n@Directive({\n  selector: '[axUploaderZone]',\n})\nexport class AXUploaderZoneDirective implements OnInit, OnDestroy {\n  private element: HTMLElement;\n\n  stateClass = 'ax-drop-over-state';\n  overlayElement: HTMLDivElement;\n\n  constructor(private elementRef: ElementRef) {}\n\n  ngOnInit(): void {\n    this.element = this.elementRef.nativeElement as HTMLElement;\n    this.element.style.position = 'relative';\n    this.init();\n  }\n\n  init(): void {\n    this.element.addEventListener('dragenter', this.handleDragEnter.bind(this));\n    this.element.addEventListener('dragleave', this.handleDragLeave.bind(this));\n  }\n\n  ngOnDestroy(): void {\n    this.element.removeEventListener('dragenter', this.handleDragEnter.bind(this));\n    this.element.removeEventListener('dragover', this.handleDragEnter.bind(this));\n  }\n\n  private handleDragEnter(event: MouseEvent) {\n    this.createZone();\n    event.preventDefault();\n  }\n  private handleDragLeave(event: MouseEvent) {\n    this.removeZone();\n    event.preventDefault();\n  }\n\n  private createZone() {\n    this.overlayElement = document.createElement('div');\n    this.overlayElement.classList.add('ax-drop-over-state');\n\n    const icon: HTMLSpanElement = document.createElement('span');\n    icon.classList.add('ax-icon', 'ax-icon-upload');\n\n    const text = document.createElement('span');\n    text.innerText = AXTranslator.get('uploader.zone.text');\n    this.overlayElement.appendChild(icon);\n    this.overlayElement.appendChild(text);\n\n    this.element.appendChild(this.overlayElement);\n  }\n  private removeZone() {\n    this.overlayElement.remove();\n  }\n}\n","import { Dialog, DialogRef } from '@angular/cdk/dialog';\nimport { GlobalPositionStrategy } from '@angular/cdk/overlay';\nimport { Injectable, inject } from '@angular/core';\nimport { AXUploaderListComponent } from './uploader-list.component';\n\n@Injectable()\nexport class AXUploaderService {\n  private dialog: Dialog = inject(Dialog);\n  dialogRef: DialogRef;\n\n  openDialog() {\n    const positionStrategy = new GlobalPositionStrategy();\n    this.dialogRef = this.dialog.open(AXUploaderListComponent, {\n      hasBackdrop: false,\n      closeOnNavigation: false,\n      width: '320px',\n      maxWidth: 320,\n      panelClass: ['ax-uploader-list-pane', 'ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],\n      positionStrategy: positionStrategy.bottom().end('24px'),\n    }) as DialogRef;\n  }\n\n  closeDialog() {\n    this.dialogRef.close();\n  }\n}\n","import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AXUploaderDropZoneComponent } from './uploader-drop-zone.component';\nimport { AXUploaderListComponent } from './uploader-list.component';\nimport { AXUploaderOverlayComponent } from './uploader-overlay.component';\nimport { AXUploaderZoneDirective } from './uploader-zone.directive';\nimport { AXUploaderService } from './uploader.service';\n\n@NgModule({\n  declarations: [\n    AXUploaderDropZoneComponent,\n    AXUploaderListComponent,\n    AXUploaderOverlayComponent,\n    AXUploaderZoneDirective,\n  ],\n  imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule],\n  exports: [\n    AXUploaderDropZoneComponent,\n    AXUploaderListComponent,\n    AXUploaderOverlayComponent,\n    AXUploaderZoneDirective,\n  ],\n  providers: [AXUploaderService],\n})\nexport class AXUploaderModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
+{"version":3,"file":"acorex-components-uploader.mjs","sources":["../../../../libs/components/uploader/src/lib/uploader-drop-zone.component.ts","../../../../libs/components/uploader/src/lib/uploader-drop-zone.component.html","../../../../libs/components/uploader/src/lib/uploader.service.ts","../../../../libs/components/uploader/src/lib/uploader-list.component.ts","../../../../libs/components/uploader/src/lib/uploader-list.component.html","../../../../libs/components/uploader/src/lib/uploader-overlay.component.ts","../../../../libs/components/uploader/src/lib/uploader-overlay.component.html","../../../../libs/components/uploader/src/lib/uploader-zone.directive.ts","../../../../libs/components/uploader/src/lib/uploader.module.ts","../../../../libs/components/uploader/src/acorex-components-uploader.ts"],"sourcesContent":["import { MXBaseComponent } from '@acorex/components/common';\nimport { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-uploader-drop-zone',\n  templateUrl: './uploader-drop-zone.component.html',\n  styleUrls: ['./uploader.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXUploaderDropZoneComponent extends MXBaseComponent {}\n","<div class=\"ax-uploader-drop-zone-container\">\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>Drag & Drop or <a href=\"#\">Choose file</a> to upload</span>\n    <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p>\n  </div>\n</div>\n","import { Dialog, DialogRef } from '@angular/cdk/dialog';\nimport { GlobalPositionStrategy } from '@angular/cdk/overlay';\nimport { HttpClient } from '@angular/common/http';\nimport { Injectable, inject } from '@angular/core';\nimport { AXUploaderListComponent } from './uploader-list.component';\n\n@Injectable()\nexport class AXUploaderService {\n  private dialog: Dialog = inject(Dialog);\n  private http: HttpClient = inject(HttpClient);\n  dialogRef: DialogRef;\n  files: any[] = [];\n  openDialog(data: any) {\n    this.files = [...data];\n    const positionStrategy = new GlobalPositionStrategy();\n    this.dialogRef = this.dialog.open(AXUploaderListComponent, {\n      hasBackdrop: false,\n      closeOnNavigation: false,\n      width: '320px',\n      maxWidth: 320,\n      panelClass: ['ax-uploader-list-pane', 'ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],\n      positionStrategy: positionStrategy.bottom().end('24px'),\n      data,\n    }) as DialogRef;\n  }\n\n  closeDialog() {\n    this.dialogRef.close();\n  }\n\n  upload(requestUrl: string, file: File, options?: any) {\n    const formData = new FormData();\n    formData.append(file.name, file);\n    return this.http.post(requestUrl, formData, options);\n  }\n}\n","import { AXComponentCloseEvent, MXBaseComponent } from '@acorex/components/common';\nimport { AUTO_STYLE, animate, state, style, transition, trigger } from '@angular/animations';\nimport { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';\nimport { Component, ViewEncapsulation, afterNextRender, inject } from '@angular/core';\nimport { AXUploaderService } from './uploader.service';\n\nexport interface AXUploaderItem {\n  type: 'picture' | 'doc' | 'pdf' | 'archive' | 'video' | 'unknow';\n  name: string;\n  size: number;\n  description?: string;\n}\n\n@Component({\n  selector: 'ax-uploader-list',\n  templateUrl: './uploader-list.component.html',\n  styleUrls: ['./uploader-list.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  animations: [\n    trigger('collapse', [\n      state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),\n      state('true', style({ height: '0', visibility: 'hidden' })),\n      transition('false => true', animate(150 + 'ms ease-in')),\n      transition('true => false', animate(150 + 'ms ease-out')),\n    ]),\n  ],\n})\nexport class AXUploaderListComponent extends MXBaseComponent {\n  items: any[] = inject(DIALOG_DATA);\n  private uploadService: AXUploaderService = inject(AXUploaderService);\n\n  leftTime = 5;\n  isCollapsed = false;\n  constructor(private dialogRef: DialogRef<AXComponentCloseEvent>) {\n    super();\n    afterNextRender(() => {\n      this.uploadService.upload('http://api.acorexui.com/api/v1/files', this.items[0]).subscribe({\n        next: (e: any) => {\n          console.log(e);\n        },\n        error: (err: any) => {\n          console.error(err);\n        },\n      });\n    });\n  }\n\n  toggle() {\n    this.isCollapsed = !this.isCollapsed;\n  }\n  close() {\n    this.dialogRef.close();\n  }\n}\n","<div class=\"ax-uploader-list-header\">\n  <div>Uploader list</div>\n  <div>\n    <i\n      class=\"ax-icon\"\n      [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n      (click)=\"toggle()\"\n    ></i>\n\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n\n<div [@collapse]=\"isCollapsed\">\n  <div class=\"ax-uploader-progress-status\">\n    <div>{{ leftTime }}min left</div>\n    <button>{{ 'common.cancel' | trans }}</button>\n  </div>\n  <ul class=\"ax-uploader-list-items\">\n    <ng-container *ngFor=\"let item of items\">\n      <li>\n        <div>\n          <i class=\"ax-icon ax-icon-inbox\"></i>\n          <div class=\"ax-uploader-item-text\">\n            <strong>{{ item.name }}</strong>\n            <small>{{ item.size }}</small>\n          </div>\n        </div>\n        <div></div>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n","import { MXBaseComponent } from '@acorex/components/common';\nimport { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-uploader-overlay',\n  templateUrl: './uploader-overlay.component.html',\n  styleUrls: ['./uploader.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXUploaderOverlayComponent extends MXBaseComponent {}\n","<div\n    class=\"ax-flex ax-flex-col ax-gap-4 ax-items-center ax-justify-center ax-h-[95vh] hover:ax-bg-primary-50 ax-m-2 hover:ax-border-2 ax-rounded-lg hover:ax-border-primary-500\">\n\n</div>","import { AXFileService } from '@acorex/core/file';\nimport { AXTranslator } from '@acorex/core/translation';\nimport { Directive, ElementRef, HostBinding, Input, OnDestroy, inject } from '@angular/core';\nimport { AXUploaderService } from './uploader.service';\n@Directive({\n  selector: '[axUploaderZone]',\n})\nexport class AXUploaderZoneDirective implements OnDestroy {\n  private fileService: AXFileService = inject(AXFileService);\n  private uploadService: AXUploaderService = inject(AXUploaderService);\n  private element: HTMLElement;\n\n  @Input() multiple = true;\n\n  stateClass = 'ax-uploader-overlay-state';\n  overlayElement: HTMLDivElement;\n  files: File[] = [];\n  initElement() {\n    this.element = this.elementRef.nativeElement as HTMLElement;\n    this.element.style.position = 'relative';\n  }\n\n  constructor(private elementRef: ElementRef) {\n    this.initElement();\n    this.element.addEventListener('dragenter', this.handleDragEnter.bind(this));\n    this.element.addEventListener('dragover', this.handleDragOver.bind(this));\n    this.element.addEventListener('drop', this.handleOnDrop.bind(this));\n    this.element.addEventListener('dragleave', this.handleDragLeave.bind(this));\n  }\n\n  ngOnDestroy(): void {\n    this.element.removeEventListener('dragenter', this.handleDragEnter.bind(this));\n    this.element.removeEventListener('drop', this.handleOnDrop.bind(this));\n    this.element.removeEventListener('dragover', this.handleDragOver.bind(this));\n    this.element.removeEventListener('dragleave', this.handleDragLeave.bind(this));\n  }\n  private handleDragEnter(event: Event) {\n    this.createZone();\n    event.preventDefault();\n  }\n  private handleOnDrop(event: DragEvent) {\n    event.preventDefault();\n    this.uploadService.openDialog(event.dataTransfer?.files);\n    this.removeZone();\n  }\n\n  private handleDragOver(event: Event) {\n    event.preventDefault();\n  }\n\n  private handleDragLeave(event: Event) {\n    event.preventDefault();\n    this.removeZone();\n  }\n\n  private createZone() {\n    this.overlayElement = document.createElement('div');\n    this.overlayElement.classList.add('ax-uploader-overlay-state');\n\n    const icon: HTMLSpanElement = document.createElement('span');\n    icon.classList.add('ax-icon', 'ax-icon-upload');\n\n    const text = document.createElement('span');\n    text.innerText = AXTranslator.get('uploader.zone.text');\n\n    this.overlayElement.appendChild(icon);\n    this.overlayElement.appendChild(text);\n\n    this.element.appendChild(this.overlayElement);\n  }\n  private removeZone() {\n    this.overlayElement.remove();\n  }\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `ax-drop-zone`;\n  }\n}\n","import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { AXFileService } from '@acorex/core/file';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { HttpClientModule } from '@angular/common/http';\nimport { AXUploaderDropZoneComponent } from './uploader-drop-zone.component';\nimport { AXUploaderListComponent } from './uploader-list.component';\nimport { AXUploaderOverlayComponent } from './uploader-overlay.component';\nimport { AXUploaderZoneDirective } from './uploader-zone.directive';\nimport { AXUploaderService } from './uploader.service';\n\n@NgModule({\n  declarations: [\n    AXUploaderDropZoneComponent,\n    AXUploaderListComponent,\n    AXUploaderOverlayComponent,\n    AXUploaderZoneDirective,\n  ],\n  imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule, HttpClientModule],\n  exports: [\n    AXUploaderDropZoneComponent,\n    AXUploaderListComponent,\n    AXUploaderOverlayComponent,\n    AXUploaderZoneDirective,\n  ],\n  providers: [AXUploaderService, AXFileService],\n})\nexport class AXUploaderModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/components",
-  "version": "7.8.13",
+  "version": "7.8.15",
   "sideEffects": false,
   "peerDependencies": {
     "@angular/common": ">=16.2.0",
@@ -280,18 +280,18 @@
       "esm": "./esm2022/scheduler/acorex-components-scheduler.mjs",
       "default": "./fesm2022/acorex-components-scheduler.mjs"
     },
-    "./search-box": {
-      "types": "./search-box/index.d.ts",
-      "esm2022": "./esm2022/search-box/acorex-components-search-box.mjs",
-      "esm": "./esm2022/search-box/acorex-components-search-box.mjs",
-      "default": "./fesm2022/acorex-components-search-box.mjs"
-    },
     "./select-box": {
       "types": "./select-box/index.d.ts",
       "esm2022": "./esm2022/select-box/acorex-components-select-box.mjs",
       "esm": "./esm2022/select-box/acorex-components-select-box.mjs",
       "default": "./fesm2022/acorex-components-select-box.mjs"
     },
+    "./search-box": {
+      "types": "./search-box/index.d.ts",
+      "esm2022": "./esm2022/search-box/acorex-components-search-box.mjs",
+      "esm": "./esm2022/search-box/acorex-components-search-box.mjs",
+      "default": "./fesm2022/acorex-components-search-box.mjs"
+    },
     "./selection-list": {
       "types": "./selection-list/index.d.ts",
       "esm2022": "./esm2022/selection-list/acorex-components-selection-list.mjs",

package/uploader/lib/uploader-list.component.d.ts

@@ -9,8 +9,10 @@ export interface AXUploaderItem {
 }
 export declare class AXUploaderListComponent extends MXBaseComponent {
     private dialogRef;
-    items: AXUploaderItem[];
+    items: any[];
+    private uploadService;
     leftTime: number;
+    isCollapsed: boolean;
     constructor(dialogRef: DialogRef<AXComponentCloseEvent>);
     toggle(): void;
     close(): void;

package/uploader/lib/uploader-zone.directive.d.ts

@@ -1,18 +1,24 @@
-import { ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { ElementRef, OnDestroy } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class AXUploaderZoneDirective implements OnInit, OnDestroy {
+export declare class AXUploaderZoneDirective implements OnDestroy {
     private elementRef;
+    private fileService;
+    private uploadService;
     private element;
+    multiple: boolean;
     stateClass: string;
     overlayElement: HTMLDivElement;
+    files: File[];
+    initElement(): void;
     constructor(elementRef: ElementRef);
-    ngOnInit(): void;
-    init(): void;
     ngOnDestroy(): void;
     private handleDragEnter;
+    private handleOnDrop;
+    private handleDragOver;
     private handleDragLeave;
     private createZone;
     private removeZone;
+    get __hostClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXUploaderZoneDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AXUploaderZoneDirective, "[axUploaderZone]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AXUploaderZoneDirective, "[axUploaderZone]", never, { "multiple": { "alias": "multiple"; "required": false; }; }, {}, never, never, false, never>;
 }

package/uploader/lib/uploader.module.d.ts

@@ -7,8 +7,9 @@ import * as i5 from "@angular/common";
 import * as i6 from "@acorex/components/decorators";
 import * as i7 from "@acorex/components/button";
 import * as i8 from "@acorex/core/translation";
+import * as i9 from "@angular/common/http";
 export declare class AXUploaderModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXUploaderModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXUploaderModule, [typeof i1.AXUploaderDropZoneComponent, typeof i2.AXUploaderListComponent, typeof i3.AXUploaderOverlayComponent, typeof i4.AXUploaderZoneDirective], [typeof i5.CommonModule, typeof i6.AXDecoratorModule, typeof i7.AXButtonModule, typeof i8.AXTranslationModule], [typeof i1.AXUploaderDropZoneComponent, typeof i2.AXUploaderListComponent, typeof i3.AXUploaderOverlayComponent, typeof i4.AXUploaderZoneDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXUploaderModule, [typeof i1.AXUploaderDropZoneComponent, typeof i2.AXUploaderListComponent, typeof i3.AXUploaderOverlayComponent, typeof i4.AXUploaderZoneDirective], [typeof i5.CommonModule, typeof i6.AXDecoratorModule, typeof i7.AXButtonModule, typeof i8.AXTranslationModule, typeof i9.HttpClientModule], [typeof i1.AXUploaderDropZoneComponent, typeof i2.AXUploaderListComponent, typeof i3.AXUploaderOverlayComponent, typeof i4.AXUploaderZoneDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXUploaderModule>;
 }

package/uploader/lib/uploader.service.d.ts

@@ -2,9 +2,12 @@ import { DialogRef } from '@angular/cdk/dialog';
 import * as i0 from "@angular/core";
 export declare class AXUploaderService {
     private dialog;
+    private http;
     dialogRef: DialogRef;
-    openDialog(): void;
+    files: any[];
+    openDialog(data: any): void;
     closeDialog(): void;
+    upload(requestUrl: string, file: File, options?: any): import("rxjs").Observable<ArrayBuffer>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXUploaderService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AXUploaderService>;
 }