@acorex/components 6.5.9 → 6.5.11

package/fesm2020/acorex-components.mjs

@@ -15637,11 +15637,39 @@ class AXUploadFileComponent extends AXBaseComponent {
         this.injectionService = injectionService;
         this.rendrer = rendrer;
         this.cdr = cdr;
+        this.contentType = 'image';
         this.size = "md";
         this.type = 'inline';
         this.disabled = false;
         this.onLoad = new EventEmitter();
         this.onProgress = new EventEmitter();
+        this.onRemove = new EventEmitter();
+        this.fileTypes = [
+            {
+                type: 'image',
+                accept: ['image/gif', 'image/jpeg', 'image/png'],
+            },
+            {
+                type: 'audio',
+                accept: ['audio/mp3'],
+            },
+            {
+                type: 'ebook',
+                accept: ['application/pdf'],
+            },
+            {
+                type: 'excel',
+                accept: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
+            },
+            {
+                type: 'video',
+                accept: ['video/*'],
+            },
+            {
+                type: 'video/image',
+                accept: ['image/gif', 'image/jpeg', 'image/png', 'video/*'],
+            },
+        ];
         this.files = [];
         this.fileName = '';
     }
@@ -15655,10 +15683,13 @@ class AXUploadFileComponent extends AXBaseComponent {
         this.fileInput.nativeElement.value = null;
     }
     open() {
-        this.fileInput.nativeElement.click();
+        this.fileInput.nativeElement.click({ accept: this.accessTypes });
     }
     remove() {
+        this.fileInput.nativeElement.value = '';
         this.files = [];
+        this.fileName = null;
+        this.onRemove.emit();
     }
     ngAfterViewInit() {
         if (this.dropRef != null) {
@@ -15761,13 +15792,18 @@ class AXUploadFileComponent extends AXBaseComponent {
         reader.readAsDataURL(file);
         this.files.push(file);
     }
+    get accessTypes() {
+        return this.fileTypes.find((item) => item.type == this.contentType).accept;
+    }
 }
 AXUploadFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXUploadFileComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXUploadFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXUploadFileComponent, selector: "ax-upload-file", inputs: { dropRef: "dropRef", progressRef: "progressRef", label: "label", size: "size", type: "type", template: "template", disabled: "disabled" }, outputs: { onLoad: "onLoad", onProgress: "onProgress" }, host: { styleAttribute: "display: block; width:100%; position: relative" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input #fileInput type=\"file\" accept=\"image/*\" style=\"display: none;\" (change)=\"onFileChange($event)\" />\r\n\r\n<ng-container *ngIf=\"type == 'inline'; else elseTemplate\">\r\n  <ax-form-group size=\"{{size}}\">\r\n    <ax-text-box [value]=\"fileName\" readonly=\"true\" [disabled]=\"disabled\"></ax-text-box>\r\n    <ax-button type=\"blank light\" icon=\"far fa-times\" (click)=\"remove()\" *ngIf=\"fileName\" [tabIndex]=\"-1\">\r\n    </ax-button>\r\n    <ax-button type=\"primary blank\" icon=\"far fa-upload\" (click)=\"open()\" [disabled]=\"disabled\" [tabIndex]=\"-1\">\r\n    </ax-button>\r\n  </ax-form-group>\r\n</ng-container>\r\n\r\n<ng-template #elseTemplate>\r\n  <div class=\"ax upload-file-box\" (click)=\"open()\" #dropRef>\r\n  </div>\r\n</ng-template>", components: [{ type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+AXUploadFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXUploadFileComponent, selector: "ax-upload-file", inputs: { contentType: "contentType", dropRef: "dropRef", progressRef: "progressRef", label: "label", size: "size", type: "type", template: "template", disabled: "disabled" }, outputs: { onLoad: "onLoad", onProgress: "onProgress", onRemove: "onRemove" }, host: { styleAttribute: "display: block; width:100%; position: relative" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input #fileInput type=\"file\" [accept]=\"accessTypes.join(',')\" style=\"display: none;\" (change)=\"onFileChange($event)\" />\r\n\r\n<ng-container *ngIf=\"type == 'inline'; else elseTemplate\">\r\n  <ax-form-group size=\"{{size}}\">\r\n    <ax-text-box [value]=\"fileName\" readonly=\"true\" [disabled]=\"disabled\"></ax-text-box>\r\n    <ax-button type=\"blank light\" icon=\"far fa-times\" (click)=\"remove()\" *ngIf=\"fileName\" [tabIndex]=\"-1\">\r\n    </ax-button>\r\n    <ax-button type=\"primary blank\" icon=\"far fa-upload\" (click)=\"open()\" [disabled]=\"disabled\" [tabIndex]=\"-1\">\r\n    </ax-button>\r\n  </ax-form-group>\r\n</ng-container>\r\n\r\n<ng-template #elseTemplate>\r\n  <div class=\"ax upload-file-box\" (click)=\"open()\" #dropRef>\r\n  </div>\r\n</ng-template>\r\n", components: [{ type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXUploadFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-upload-file', encapsulation: ViewEncapsulation.None, host: { style: 'display: block; width:100%; position: relative' }, template: "<input #fileInput type=\"file\" accept=\"image/*\" style=\"display: none;\" (change)=\"onFileChange($event)\" />\r\n\r\n<ng-container *ngIf=\"type == 'inline'; else elseTemplate\">\r\n  <ax-form-group size=\"{{size}}\">\r\n    <ax-text-box [value]=\"fileName\" readonly=\"true\" [disabled]=\"disabled\"></ax-text-box>\r\n    <ax-button type=\"blank light\" icon=\"far fa-times\" (click)=\"remove()\" *ngIf=\"fileName\" [tabIndex]=\"-1\">\r\n    </ax-button>\r\n    <ax-button type=\"primary blank\" icon=\"far fa-upload\" (click)=\"open()\" [disabled]=\"disabled\" [tabIndex]=\"-1\">\r\n    </ax-button>\r\n  </ax-form-group>\r\n</ng-container>\r\n\r\n<ng-template #elseTemplate>\r\n  <div class=\"ax upload-file-box\" (click)=\"open()\" #dropRef>\r\n  </div>\r\n</ng-template>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.AXRenderService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dropRef: [{
+            args: [{ selector: 'ax-upload-file', encapsulation: ViewEncapsulation.None, host: { style: 'display: block; width:100%; position: relative' }, template: "<input #fileInput type=\"file\" [accept]=\"accessTypes.join(',')\" style=\"display: none;\" (change)=\"onFileChange($event)\" />\r\n\r\n<ng-container *ngIf=\"type == 'inline'; else elseTemplate\">\r\n  <ax-form-group size=\"{{size}}\">\r\n    <ax-text-box [value]=\"fileName\" readonly=\"true\" [disabled]=\"disabled\"></ax-text-box>\r\n    <ax-button type=\"blank light\" icon=\"far fa-times\" (click)=\"remove()\" *ngIf=\"fileName\" [tabIndex]=\"-1\">\r\n    </ax-button>\r\n    <ax-button type=\"primary blank\" icon=\"far fa-upload\" (click)=\"open()\" [disabled]=\"disabled\" [tabIndex]=\"-1\">\r\n    </ax-button>\r\n  </ax-form-group>\r\n</ng-container>\r\n\r\n<ng-template #elseTemplate>\r\n  <div class=\"ax upload-file-box\" (click)=\"open()\" #dropRef>\r\n  </div>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.AXRenderService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { contentType: [{
+                type: Input
+            }], dropRef: [{
                 type: Input
             }], progressRef: [{
                 type: Input
@@ -15788,6 +15824,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }], onProgress: [{
                 type: Output
+            }], onRemove: [{
+                type: Output
             }] } });
 
 class AXUploadFileModule {