@progress/kendo-angular-upload 16.3.0-develop.1 → 16.3.0-develop.11

package/esm2020/upload.component.mjs

@@ -5,9 +5,9 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { HttpHeaders } from '@angular/common/http';
-import { Component, ContentChild, ElementRef, EventEmitter, forwardRef, HostBinding, Input, NgZone, Output, Renderer2, ViewChild, isDevMode, ChangeDetectorRef, Injector } from '@angular/core';
-import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { guid, isDocumentAvailable, KendoInput, Keys, isChanged, isControlRequired } from '@progress/kendo-angular-common';
+import { Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, NgZone, Output, Renderer2, ViewChild, isDevMode, ChangeDetectorRef, Injector } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { isDocumentAvailable, KendoInput, Keys, isChanged } from '@progress/kendo-angular-common';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { fromEvent, merge } from 'rxjs';
 import { filter } from 'rxjs/operators';
@@ -15,11 +15,10 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
 import { FileState } from './types';
 import { NavigationService } from './navigation.service';
-import { FileTemplateDirective } from './templates/file-template.directive';
 import { UploadService } from './upload.service';
 import { hasClasses, IGNORE_TARGET_CLASSES, isFocusable, UPLOAD_CLASSES, validateInitialFileInfo } from './common/util';
 import { DropZoneService } from './dropzone.service';
-import { FileInfoTemplateDirective } from './templates/file-info-template.directive';
+import { UploadFileSelectBase } from './common/base';
 import * as i0 from "@angular/core";
 import * as i1 from "./upload.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -45,8 +44,9 @@ let idx = 0;
 /**
  * Represents the [Kendo UI Upload component for Angular]({% slug overview_upload %}).
  */
-export class UploadComponent {
+export class UploadComponent extends UploadFileSelectBase {
     constructor(uploadService, localization, navigation, dropZoneService, zone, renderer, cdr, wrapper, injector) {
+        super(uploadService, navigation, cdr, injector, zone);
         this.uploadService = uploadService;
         this.localization = localization;
         this.navigation = navigation;
@@ -61,41 +61,15 @@ export class UploadComponent {
          * @default false
          */
         this.chunkable = false;
-        /**
-         * Enables the selection of multiple files
-         * ([see example]({% slug fileprocessing_upload %}#toc-upload-of-sinlge-or-multiple-files)).
-         * If set to `false`, only one file can be selected at a time.
-         * @default true
-         */
-        this.multiple = true;
-        /**
-         * Disables the Upload ([see example]({% slug disabledstate_upload %})).
-         * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_upload#toc-managing-the-upload-disabled-state-in-reactive-forms).
-         * @default false
-         */
-        this.disabled = false;
         /**
          * Toggles the visibility of the file list.
          * @default true
          */
         this.showFileList = true;
-        /**
-         * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
-         * @default 0
-         */
-        this.tabindex = 0;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
         /**
          * Specifies the possible layout of the action buttons.
          */
         this.actionsLayout = 'end';
-        /**
-         * Fires when the user navigates outside the component.
-         */
-        this.onBlur = new EventEmitter();
         /**
          * Fires when the upload is canceled while in progress.
          */
@@ -112,26 +86,14 @@ export class UploadComponent {
          * Fires when an `upload` or `remove` operation has failed.
          */
         this.error = new EventEmitter();
-        /**
-         * Fires when the component is focused.
-         */
-        this.onFocus = new EventEmitter();
         /**
          * Fires when the upload of a file has been paused.
          */
         this.pause = new EventEmitter();
-        /**
-         * Fires when an uploaded file is about to be removed. If prevented, the files will remain in the list.
-         */
-        this.remove = new EventEmitter();
         /**
          * Fires when the upload of a file has been resumed.
          */
         this.resume = new EventEmitter();
-        /**
-         * Fires when files are selected. If prevented, the selected files will not be added to the list.
-         */
-        this.select = new EventEmitter();
         /**
          * Fires when an `upload` or `remove` operation is successfully completed.
          */
@@ -148,17 +110,6 @@ export class UploadComponent {
          * Fires when the value of the component has changed as a result of a successful `upload`, `remove` or `clear` operation.
          */
         this.valueChange = new EventEmitter();
-        this.hostDefaultClasses = true;
-        /**
-         * @hidden
-         */
-        this._restrictions = {
-            allowedExtensions: [],
-            maxFileSize: 0,
-            minFileSize: 0
-        };
-        this.onTouchedCallback = (_) => { };
-        this.onChangeCallback = (_) => { };
         validatePackage(packageMetadata);
         this.fileList = this.uploadService.files;
         this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
@@ -316,42 +267,14 @@ export class UploadComponent {
     get tabIndex() {
         return this.tabindex;
     }
-    /**
-     * Sets the restrictions for selected files ([see example]({% slug api_upload_filerestrictions %})).
-     */
-    set restrictions(restrictions) {
-        const parsedRestrictions = Object.assign({}, this._restrictions, restrictions);
-        this._restrictions = parsedRestrictions;
-    }
-    get restrictions() {
-        return this._restrictions;
-    }
-    get hostRole() {
-        return 'application';
-    }
-    get hostDisabledClass() {
-        return this.disabled;
-    }
     get dir() {
         return this.direction;
     }
-    /**
-     * @hidden
-     */
-    get formControl() {
-        const ngControl = this.injector.get(NgControl, null);
-        return ngControl?.control || null;
-    }
-    /**
-     * @hidden
-     */
-    get isControlRequired() {
-        return isControlRequired(this.formControl);
-    }
     ngOnInit() {
         this.verifySettings();
-        const { buttonId } = this.getIds();
+        const { buttonId, fileListId } = this.getIds();
         this.focusableId = buttonId;
+        this.fileListId = fileListId;
         this.uploadService.setChunkSettings(this.chunkable);
         if (this.zoneId) {
             this.dropZoneService.addComponent(this, this.zoneId);
@@ -394,47 +317,7 @@ export class UploadComponent {
      * @hidden
      */
     writeValue(newValue) {
-        let isValid = true;
-        if (newValue instanceof Array) {
-            newValue.forEach((file) => {
-                if (!validateInitialFileInfo(file)) {
-                    isValid = false;
-                }
-            });
-            if (isValid) {
-                this.uploadService.addInitialFiles(newValue);
-            }
-        }
-        if (newValue === null) {
-            this.fileList.clear();
-        }
-        this.cdr.markForCheck();
-    }
-    /**
-     * @hidden
-     */
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
-    }
-    /**
-     * @hidden
-     */
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    /**
-     * @hidden
-     */
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    /**
-     * @hidden
-     */
-    onFileSelectButtonFocus() {
-        if (!this.navigation.focused) {
-            this.navigation.focusedIndex = -1;
-        }
+        super.writeValue(newValue, validateInitialFileInfo, 'addInitialFiles');
     }
     /**
      * @hidden
@@ -481,42 +364,8 @@ export class UploadComponent {
     getIds() {
         const id = ++idx;
         const buttonId = `k-upload-button-${id}`;
-        const inputId = `k-upload-input-${id}`;
-        return { buttonId, inputId };
-    }
-    /**
-     * Focuses the underlying input element.
-     */
-    focus() {
-        setTimeout(() => {
-            this.fileSelectButton.nativeElement.focus();
-            this.navigation.focused = true;
-            this.onFocus.emit();
-        });
-    }
-    /**
-     * @hidden
-     * @deprecated
-     */
-    focusComponent() {
-        this.focus();
-    }
-    /**
-     * Blurs the Upload if it was previously focused.
-     */
-    blur() {
-        if (this.navigation.focused) {
-            this.navigation.focused = false;
-            document.activeElement.blur();
-            this.onBlur.emit();
-        }
-    }
-    /**
-     * @hidden
-     * @deprecated
-     */
-    blurComponent() {
-        this.blur();
+        const fileListId = `k-upload-file-list-${id}`;
+        return { buttonId, fileListId };
     }
     /**
      * Pauses the upload process of a file that is currently uploading.
@@ -674,7 +523,7 @@ export class UploadComponent {
     }
 }
 UploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadComponent, deps: [{ token: i1.UploadService }, { token: i2.LocalizationService }, { token: i3.NavigationService }, { token: i4.DropZoneService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadComponent, selector: "kendo-upload", inputs: { autoUpload: "autoUpload", batch: "batch", withCredentials: "withCredentials", saveField: "saveField", saveHeaders: "saveHeaders", saveMethod: "saveMethod", saveUrl: "saveUrl", responseType: "responseType", removeField: "removeField", removeHeaders: "removeHeaders", removeMethod: "removeMethod", removeUrl: "removeUrl", chunkable: "chunkable", concurrent: "concurrent", multiple: "multiple", disabled: "disabled", showFileList: "showFileList", tabindex: "tabindex", zoneId: "zoneId", tabIndex: "tabIndex", accept: "accept", restrictions: "restrictions", focusableId: "focusableId", actionsLayout: "actionsLayout" }, outputs: { onBlur: "blur", cancel: "cancel", clear: "clear", complete: "complete", error: "error", onFocus: "focus", pause: "pause", remove: "remove", resume: "resume", select: "select", success: "success", upload: "upload", uploadProgress: "uploadProgress", valueChange: "valueChange" }, host: { properties: { "class.k-upload": "this.hostDefaultClasses", "attr.role": "this.hostRole", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir" } }, providers: [
+UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadComponent, selector: "kendo-upload", inputs: { autoUpload: "autoUpload", batch: "batch", withCredentials: "withCredentials", saveField: "saveField", saveHeaders: "saveHeaders", saveMethod: "saveMethod", saveUrl: "saveUrl", responseType: "responseType", removeField: "removeField", removeHeaders: "removeHeaders", removeMethod: "removeMethod", removeUrl: "removeUrl", chunkable: "chunkable", concurrent: "concurrent", showFileList: "showFileList", tabIndex: "tabIndex", actionsLayout: "actionsLayout" }, outputs: { cancel: "cancel", clear: "clear", complete: "complete", error: "error", pause: "pause", resume: "resume", success: "success", upload: "upload", uploadProgress: "uploadProgress", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
         LocalizationService,
         NavigationService,
         UploadService,
@@ -688,7 +537,7 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
             provide: KendoInput,
             useExisting: forwardRef(() => UploadComponent)
         }
-    ], queries: [{ propertyName: "fileTemplate", first: true, predicate: FileTemplateDirective, descendants: true }, { propertyName: "fileInfoTemplate", first: true, predicate: FileInfoTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }, { propertyName: "fileSelectButton", first: true, predicate: ["fileSelectButton"], descendants: true, read: ElementRef, static: true }], exportAs: ["kendoUpload"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }], exportAs: ["kendoUpload"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <ng-container kendoUploadLocalizedMessages
         i18n-cancel="kendo.upload.cancel|The text for the Cancel button"
         cancel="Cancel"
@@ -762,12 +611,13 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                 #fileSelectButton
                 class="k-upload-button"
                 type="button"
-                role="button"
                 (click)="fileSelectInput.click()"
                 (focus)="onFileSelectButtonFocus()"
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="tabindex"
+                [attr.aria-expanded]="hasFileList"
+                [attr.aria-controls]="hasFileList ? fileListId : undefined"
             >
                 {{textFor('select')}}
             </button>
@@ -785,12 +635,13 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         </kendo-upload-status-total>
         <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
     </div>
-    <ul kendo-upload-file-list *ngIf="showFileList && fileList.count > 0"
+    <ul kendo-upload-file-list *ngIf="hasFileList"
         class="k-upload-files k-reset"
         [disabled]="disabled"
         [fileList]="fileList.files"
         [fileTemplate]="fileTemplate"
-        [fileInfoTemplate]="fileInfoTemplate">
+        [fileInfoTemplate]="fileInfoTemplate"
+        [id]="fileListId">
     </ul>
     <kendo-upload-action-buttons
         *ngIf="showActionButtons"
@@ -892,12 +743,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 #fileSelectButton
                 class="k-upload-button"
                 type="button"
-                role="button"
                 (click)="fileSelectInput.click()"
                 (focus)="onFileSelectButtonFocus()"
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="tabindex"
+                [attr.aria-expanded]="hasFileList"
+                [attr.aria-controls]="hasFileList ? fileListId : undefined"
             >
                 {{textFor('select')}}
             </button>
@@ -915,12 +767,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </kendo-upload-status-total>
         <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
     </div>
-    <ul kendo-upload-file-list *ngIf="showFileList && fileList.count > 0"
+    <ul kendo-upload-file-list *ngIf="hasFileList"
         class="k-upload-files k-reset"
         [disabled]="disabled"
         [fileList]="fileList.files"
         [fileTemplate]="fileTemplate"
-        [fileInfoTemplate]="fileInfoTemplate">
+        [fileInfoTemplate]="fileInfoTemplate"
+        [id]="fileListId">
     </ul>
     <kendo-upload-action-buttons
         *ngIf="showActionButtons"
@@ -957,42 +810,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], concurrent: [{
                 type: Input
-            }], multiple: [{
-                type: Input
-            }], disabled: [{
-                type: Input
             }], showFileList: [{
                 type: Input
-            }], tabindex: [{
-                type: Input
-            }], zoneId: [{
-                type: Input
             }], tabIndex: [{
                 type: Input,
                 args: ['tabIndex']
-            }], accept: [{
-                type: Input
-            }], restrictions: [{
-                type: Input
-            }], focusableId: [{
-                type: Input
             }], actionsLayout: [{
                 type: Input
-            }], fileTemplate: [{
-                type: ContentChild,
-                args: [FileTemplateDirective]
-            }], fileInfoTemplate: [{
-                type: ContentChild,
-                args: [FileInfoTemplateDirective]
             }], fileSelectInput: [{
                 type: ViewChild,
                 args: ['fileSelectInput', { static: true }]
-            }], fileSelectButton: [{
-                type: ViewChild,
-                args: ['fileSelectButton', { static: true, read: ElementRef }]
-            }], onBlur: [{
-                type: Output,
-                args: ['blur']
             }], cancel: [{
                 type: Output
             }], clear: [{
@@ -1001,17 +828,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], error: [{
                 type: Output
-            }], onFocus: [{
-                type: Output,
-                args: ['focus']
             }], pause: [{
                 type: Output
-            }], remove: [{
-                type: Output
             }], resume: [{
                 type: Output
-            }], select: [{
-                type: Output
             }], success: [{
                 type: Output
             }], upload: [{
@@ -1020,15 +840,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], valueChange: [{
                 type: Output
-            }], hostDefaultClasses: [{
-                type: HostBinding,
-                args: ['class.k-upload']
-            }], hostRole: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], hostDisabledClass: [{
-                type: HostBinding,
-                args: ['class.k-disabled']
             }], dir: [{
                 type: HostBinding,
                 args: ['attr.dir']