@progress/kendo-angular-upload 16.3.0-develop.3 → 16.3.0-develop.4

package/esm2020/fileselect.component.mjs

@@ -2,10 +2,10 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, HostBinding, forwardRef, Renderer2, ViewChild, ElementRef, Output, EventEmitter, NgZone, ContentChild, ChangeDetectorRef, Injector } from "@angular/core";
-import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { Component, HostBinding, forwardRef, Renderer2, ViewChild, ElementRef, NgZone, ChangeDetectorRef, Injector, Input, Output, EventEmitter } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { KendoInput, guid, Keys, isDocumentAvailable, isControlRequired } from '@progress/kendo-angular-common';
+import { KendoInput, Keys, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { fromEvent, merge } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -13,10 +13,9 @@ import { packageMetadata } from './package-metadata';
 import { UploadService } from './upload.service';
 import { NavigationService } from './navigation.service';
 import { UPLOAD_CLASSES, hasClasses, isFocusable, IGNORE_TARGET_CLASSES, validateInitialFileSelectFile } from './common/util';
-import { FileTemplateDirective } from './templates/file-template.directive';
 import { FileState } from './types/file-state';
 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";
@@ -37,8 +36,9 @@ export const FILESELECT_VALUE_ACCESSOR = {
     useExisting: forwardRef(() => FileSelectComponent)
 };
 let idx = 0;
-export class FileSelectComponent {
+export class FileSelectComponent extends UploadFileSelectBase {
     constructor(uploadService, localization, navigation, dropZoneService, ngZone, renderer, cdr, wrapper, injector) {
+        super(uploadService, navigation, cdr, injector, ngZone);
         this.uploadService = uploadService;
         this.localization = localization;
         this.navigation = navigation;
@@ -47,54 +47,10 @@ export class FileSelectComponent {
         this.renderer = renderer;
         this.cdr = cdr;
         this.injector = injector;
-        /**
-         * Disables the FileSelect.
-         * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_fileselect#toc-managing-the-fileselect-disabled-state-in-reactive-forms).
-         * @default false
-         */
-        this.disabled = 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;
-        /**
-         * 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 FileSelect.
-         * @default 0
-         */
-        this.tabindex = 0;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
-        /**
-         * Fires when the user navigates outside the component.
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * Fires when the component is focused.
-         */
-        this.onFocus = 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 a file is about to be removed. If prevented, the file will remain in the list.
-         */
-        this.remove = new EventEmitter();
         /**
          * Fires when the value of the component has changed as a result of a successful `select` or `remove` operation.
          */
         this.valueChange = new EventEmitter();
-        this.hostDefaultClasses = true;
         /**
          * @hidden
          */
@@ -103,13 +59,10 @@ export class FileSelectComponent {
             maxFileSize: 0,
             minFileSize: 0
         };
-        this.onTouchedCallback = (_) => { };
-        this.onChangeCallback = (_) => { };
         validatePackage(packageMetadata);
         this.wrapper = wrapper.nativeElement;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.navigation.computeKeys();
-        this.fileList = this.uploadService.files;
         this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
@@ -118,6 +71,9 @@ export class FileSelectComponent {
         this.attachEventHandlers();
         this.setDefaultSettings();
     }
+    get dir() {
+        return this.direction;
+    }
     /**
      * Sets the `name` attribute of the `input` element of the FileSelect.
      */
@@ -127,42 +83,10 @@ export class FileSelectComponent {
     get name() {
         return this.uploadService.async.saveField;
     }
-    /**
-     * Sets the restrictions for selected files.
-     */
-    set restrictions(restrictions) {
-        const parsedRestrictions = Object.assign({}, this._restrictions, restrictions);
-        this._restrictions = parsedRestrictions;
-    }
-    get restrictions() {
-        return this._restrictions;
-    }
-    get hostDisabledClass() {
-        return this.disabled;
-    }
-    get dir() {
-        return this.direction;
-    }
-    get hostRole() {
-        return 'application';
-    }
-    /**
-     * @hidden
-     */
-    get formControl() {
-        const ngControl = this.injector.get(NgControl, null);
-        return ngControl?.control || null;
-    }
-    /**
-     * @hidden
-     */
-    get isControlRequired() {
-        return isControlRequired(this.formControl);
-    }
     ngOnInit() {
-        const { buttonId, inputId } = this.getIds();
+        const { buttonId, fileListId } = this.getIds();
         this.focusableId = buttonId;
-        this.inputElementId = inputId;
+        this.fileListId = fileListId;
         if (this.zoneId) {
             this.dropZoneService.addComponent(this, this.zoneId);
         }
@@ -182,16 +106,6 @@ export class FileSelectComponent {
     textFor(key) {
         return this.localization.get(key);
     }
-    /**
-     * Focuses the underlying input element.
-     */
-    focus() {
-        setTimeout(() => {
-            this.fileSelectButton.nativeElement.focus();
-            this.navigation.focused = true;
-            this.onFocus.emit();
-        });
-    }
     ngOnDestroy() {
         this.fileList.clear();
         if (this.blurSubscription) {
@@ -210,52 +124,6 @@ export class FileSelectComponent {
             this.subs.unsubscribe();
         }
     }
-    /**
-     * @hidden
-     */
-    writeValue(newValue) {
-        let isValid = true;
-        if (newValue instanceof Array) {
-            newValue.forEach((file) => {
-                if (!validateInitialFileSelectFile(file)) {
-                    isValid = false;
-                }
-            });
-            if (isValid) {
-                this.uploadService.addInitialFileSelectFiles(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;
-        }
-    }
     /**
      * Removes specific file from the file list.
      */
@@ -294,8 +162,14 @@ export class FileSelectComponent {
     getIds() {
         const id = ++idx;
         const buttonId = `k-fileselect-button-${id}`;
-        const inputId = `k-fileselect-input-${id}`;
-        return { buttonId, inputId };
+        const fileListId = `k-fileselect-file-list-${id}`;
+        return { buttonId, fileListId };
+    }
+    /**
+     * @hidden
+     */
+    writeValue(newValue) {
+        super.writeValue(newValue, validateInitialFileSelectFile, 'addInitialFileSelectFiles');
     }
     subscribeBlur() {
         if (!isDocumentAvailable()) {
@@ -370,7 +244,7 @@ export class FileSelectComponent {
     }
 }
 FileSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectComponent, 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 });
-FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileSelectComponent, selector: "kendo-fileselect", inputs: { accept: "accept", disabled: "disabled", multiple: "multiple", name: "name", showFileList: "showFileList", tabindex: "tabindex", restrictions: "restrictions", zoneId: "zoneId", focusableId: "focusableId" }, outputs: { onBlur: "blur", onFocus: "focus", select: "select", remove: "remove", valueChange: "valueChange" }, host: { properties: { "class.k-upload": "this.hostDefaultClasses", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir", "attr.role": "this.hostRole" } }, providers: [
+FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileSelectComponent, selector: "kendo-fileselect", inputs: { name: "name" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
         LocalizationService,
         NavigationService,
         UploadService,
@@ -384,7 +258,7 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             provide: KendoInput,
             useExisting: forwardRef(() => FileSelectComponent)
         }
-    ], 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: ["kendoFileSelect"], ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }], exportAs: ["kendoFileSelect"], usesInheritance: true, ngImport: i0, template: `
         <ng-container kendoFileSelectLocalizedMessages
             i18n-dropFilesHere="kendo.fileselect.dropFilesHere|The drop zone hint"
             dropFilesHere="Drop files here to select"
@@ -421,12 +295,12 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="tabindex"
-                [attr.aria-controls]="inputElementId"
+                [attr.aria-expanded]="hasFileList"
+                [attr.aria-controls]="hasFileList ? fileListId : undefined"
             >
                 {{textFor('select')}}
             </button>
             <input kendoFileSelect #fileSelectInput
-                [id]="inputElementId"
                 [dir]="direction"
                 [accept]="accept"
                 [restrictions]="restrictions"
@@ -439,11 +313,12 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         </div>
         <ul kendo-upload-file-list
             class="k-upload-files k-reset"
-            *ngIf="showFileList && fileList.count > 0"
+            *ngIf="hasFileList"
             [disabled]="disabled"
             [fileList]="fileList.files"
             [fileTemplate]="fileTemplate"
-            [fileInfoTemplate]="fileInfoTemplate">
+            [fileInfoTemplate]="fileInfoTemplate"
+            [id]="fileListId">
         </ul>
     `, isInline: true, dependencies: [{ kind: "directive", type: i5.DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { kind: "component", type: i6.FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { kind: "directive", type: i7.FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { kind: "directive", type: i8.LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectComponent, decorators: [{
@@ -503,12 +378,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="tabindex"
-                [attr.aria-controls]="inputElementId"
+                [attr.aria-expanded]="hasFileList"
+                [attr.aria-controls]="hasFileList ? fileListId : undefined"
             >
                 {{textFor('select')}}
             </button>
             <input kendoFileSelect #fileSelectInput
-                [id]="inputElementId"
                 [dir]="direction"
                 [accept]="accept"
                 [restrictions]="restrictions"
@@ -521,66 +396,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </div>
         <ul kendo-upload-file-list
             class="k-upload-files k-reset"
-            *ngIf="showFileList && fileList.count > 0"
+            *ngIf="hasFileList"
             [disabled]="disabled"
             [fileList]="fileList.files"
             [fileTemplate]="fileTemplate"
-            [fileInfoTemplate]="fileInfoTemplate">
+            [fileInfoTemplate]="fileInfoTemplate"
+            [id]="fileListId">
         </ul>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.UploadService }, { type: i2.LocalizationService }, { type: i3.NavigationService }, { type: i4.DropZoneService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Injector }]; }, propDecorators: { accept: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], showFileList: [{
-                type: Input
-            }], tabindex: [{
-                type: Input
-            }], restrictions: [{
-                type: Input
-            }], zoneId: [{
-                type: Input
-            }], focusableId: [{
-                type: Input
-            }], fileTemplate: [{
-                type: ContentChild,
-                args: [FileTemplateDirective]
-            }], fileInfoTemplate: [{
-                type: ContentChild,
-                args: [FileInfoTemplateDirective]
-            }], fileSelectInput: [{
+        }], ctorParameters: function () { return [{ type: i1.UploadService }, { type: i2.LocalizationService }, { type: i3.NavigationService }, { type: i4.DropZoneService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Injector }]; }, propDecorators: { fileSelectInput: [{
                 type: ViewChild,
                 args: ['fileSelectInput', { static: true }]
-            }], fileSelectButton: [{
-                type: ViewChild,
-                args: ['fileSelectButton', { static: true, read: ElementRef }]
-            }], onBlur: [{
-                type: Output,
-                args: ['blur']
-            }], onFocus: [{
-                type: Output,
-                args: ['focus']
-            }], select: [{
-                type: Output
-            }], remove: [{
-                type: Output
-            }], valueChange: [{
-                type: Output
-            }], hostDefaultClasses: [{
-                type: HostBinding,
-                args: ['class.k-upload']
-            }], hostDisabledClass: [{
-                type: HostBinding,
-                args: ['class.k-disabled']
             }], dir: [{
                 type: HostBinding,
                 args: ['attr.dir']
-            }], hostRole: [{
-                type: HostBinding,
-                args: ['attr.role']
+            }], name: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
             }] } });

package/esm2020/navigation.service.mjs

@@ -21,7 +21,9 @@ export class NavigationService {
         this.onWrapperFocus = new EventEmitter();
         this.onSelectButtonFocus = new EventEmitter();
         this.actionButtonsVisible = false;
+        this.fileListVisible = false;
         this.focused = false;
+        this.focusedFileIndex = 0;
         this._focusedIndex = -1;
     }
     action(event) {
@@ -40,9 +42,9 @@ export class NavigationService {
             [Keys.Enter]: () => this.handleEnter(),
             [Keys.Escape]: () => this.handleEscape(),
             [Keys.Delete]: () => this.handleDelete(),
-            [Keys.Tab]: (event, component) => this.handleTab(event.shiftKey, component),
-            [Keys.ArrowUp]: (event) => this.handleUp(event),
-            [Keys.ArrowDown]: (event) => this.handleDown(event)
+            [Keys.Tab]: (event, component) => this.handleTab(event, component),
+            [Keys.ArrowUp]: (event) => this.handleUpDown(event, -1),
+            [Keys.ArrowDown]: (event) => this.handleUpDown(event, 1)
         };
     }
     focusSelectButton() {
@@ -70,10 +72,13 @@ export class NavigationService {
             this.zone.run(() => this.onFileAction.emit(Keys.Escape));
         }
     }
-    handleTab(shifted, component) {
+    handleTab(event, component) {
+        const shifted = event.shiftKey;
         /* Select Files button is focused */
-        if (this.focusedIndex === -1 && this.actionButtonsVisible && !shifted) {
-            this.focusedIndex = this.lastFileIndex + 1;
+        if (this.focusedIndex === -1 && this.fileListVisible && !shifted) {
+            this.focusedIndex = this.focusedFileIndex;
+            event.preventDefault();
+            this.onFileFocus.emit(this.focusedFileIndex);
             return;
         }
         /* File in the list is focused */
@@ -88,7 +93,11 @@ export class NavigationService {
         }
         /* Clear button is focused */
         if (this.focusedIndex === this.lastFileIndex + 1) {
-            this.focusedIndex = shifted ? -1 : this.lastIndex;
+            this.focusedIndex = shifted ? this.focusedFileIndex : this.lastIndex;
+            if (shifted) {
+                event.preventDefault();
+                this.onFileFocus.emit(this.focusedFileIndex);
+            }
             return;
         }
         /* Upload button is focused */
@@ -98,35 +107,15 @@ export class NavigationService {
         }
         this.onTabOut.emit();
     }
-    handleDown(event) {
-        if (this.lastIndex >= 0 && this.focusedIndex < this.lastIndex) {
-            event.preventDefault();
-            this.zone.run(() => {
-                if (this.focusedIndex < this.lastFileIndex) {
-                    this.focusedIndex += 1;
-                    this.onFileFocus.emit(this.focusedIndex);
-                    return;
-                }
-            });
-        }
-    }
-    handleUp(event) {
-        if (this.lastIndex >= 0 && this.focusedIndex > -1) {
+    handleUpDown(event, direction) {
+        const focusOnFileList = this.focusedIndex > -1 && this.uploadService.files.count >= 0;
+        const nextFocusableIndexInBoundaries = direction > 0 ? this.focusedFileIndex < this.lastFileIndex : this.focusedFileIndex > 0;
+        const focusNextFile = focusOnFileList && nextFocusableIndexInBoundaries;
+        if (focusNextFile) {
             event.preventDefault();
             this.zone.run(() => {
-                this.focusedIndex -= 1;
-                if (this.focusedIndex === -1) {
-                    this.onSelectButtonFocus.emit();
-                    return;
-                }
-                if (this.focusedIndex <= this.lastFileIndex) {
-                    this.onFileFocus.emit(this.focusedIndex);
-                    return;
-                }
-                if (this.actionButtonsVisible && this.focusedIndex <= this.lastIndex) {
-                    this.focusedIndex = this.lastFileIndex;
-                    this.onFileFocus.emit(this.focusedIndex);
-                }
+                this.focusedIndex += direction;
+                this.focusedFileIndex += direction;
             });
         }
     }

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1718186280,
-    version: '16.3.0-develop.3',
+    publishDate: 1718190520,
+    version: '16.3.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };