@progress/kendo-angular-upload 9.0.4 → 11.0.0-develop.101

package/{esm2015/types/file-map.js → esm2020/types/file-map.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { FileState } from '../types';
@@ -11,7 +11,7 @@ export class FileMap {
         this._files = {};
     }
     add(file) {
-        let uid = file.uid;
+        const uid = file.uid;
         if (this.has(uid)) {
             if (file.validationErrors && file.validationErrors.length > 0) {
                 this._files[uid].unshift(file);
@@ -31,10 +31,10 @@ export class FileMap {
         }
     }
     clear() {
-        let allFiles = this._files;
-        for (let uid in allFiles) {
+        const allFiles = this._files;
+        for (const uid in allFiles) {
             if (allFiles.hasOwnProperty(uid)) {
-                for (let file of allFiles[uid]) {
+                for (const file of allFiles[uid]) {
                     if (file.httpSubscription) {
                         file.httpSubscription.unsubscribe();
                     }
@@ -51,7 +51,7 @@ export class FileMap {
         return this._files[uid];
     }
     setFilesState(files, state) {
-        for (let file of files) {
+        for (const file of files) {
             this.setFilesStateByUid(file.uid, state);
         }
     }
@@ -64,9 +64,9 @@ export class FileMap {
         return Object.getOwnPropertyNames(this._files).length;
     }
     get files() {
-        let initial = this._files;
-        let transformed = [];
-        for (let uid in initial) {
+        const initial = this._files;
+        const transformed = [];
+        for (const uid in initial) {
             if (initial.hasOwnProperty(uid)) {
                 transformed.push(initial[uid]);
             }
@@ -74,11 +74,11 @@ export class FileMap {
         return transformed;
     }
     get filesFlat() {
-        let initial = this._files;
-        let transformed = [];
-        for (let uid in initial) {
+        const initial = this._files;
+        const transformed = [];
+        for (const uid in initial) {
             if (initial.hasOwnProperty(uid)) {
-                let current = initial[uid];
+                const current = initial[uid];
                 current.forEach((file) => {
                     transformed.push(file);
                 });
@@ -87,13 +87,13 @@ export class FileMap {
         return transformed;
     }
     get filesToUpload() {
-        let files = this._files;
-        let notUploaded = [];
-        for (let uid in files) {
+        const files = this._files;
+        const notUploaded = [];
+        for (const uid in files) {
             if (files.hasOwnProperty(uid)) {
-                let currentFiles = files[uid];
+                const currentFiles = files[uid];
                 let currentFilesValid = true;
-                for (let file of currentFiles) {
+                for (const file of currentFiles) {
                     if (file.state !== FileState.Selected || (file.validationErrors && file.validationErrors.length > 0)) {
                         currentFilesValid = false;
                     }
@@ -106,12 +106,12 @@ export class FileMap {
         return notUploaded;
     }
     get firstFileToUpload() {
-        let files = this._files;
-        for (let uid in files) {
+        const files = this._files;
+        for (const uid in files) {
             if (files.hasOwnProperty(uid)) {
-                let currentFiles = files[uid];
+                const currentFiles = files[uid];
                 let currentFilesValid = true;
-                for (let file of currentFiles) {
+                for (const file of currentFiles) {
                     if (file.state !== FileState.Selected || (file.validationErrors && file.validationErrors.length > 0)) {
                         currentFilesValid = false;
                     }
@@ -127,11 +127,11 @@ export class FileMap {
         return this.filesFlat.filter(file => file.state === state);
     }
     hasFileWithState(fileStates) {
-        let files = this._files;
-        for (let uid in files) {
+        const files = this._files;
+        for (const uid in files) {
             if (files.hasOwnProperty(uid)) {
-                let currentFiles = files[uid];
-                for (let file of currentFiles) {
+                const currentFiles = files[uid];
+                for (const file of currentFiles) {
                     if (fileStates.indexOf(file.state) >= 0) {
                         return true;
                     }

package/esm2020/types/file-restrictions.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/{esm2015/types/file-state.js → esm2020/types/file-state.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**

package/esm2020/types/operation-type.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/{esm2015/types.js → esm2020/types.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 export { FileState } from './types/file-state';

package/{esm2015/upload.component.js → esm2020/upload.component.mjs}

@@ -1,8 +1,11 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ContentChild, EventEmitter, forwardRef, HostBinding, HostListener, Input, Output, ViewChild, isDevMode } from '@angular/core';
+/* 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 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { guid, isDocumentAvailable, KendoInput, Keys, isChanged } from '@progress/kendo-angular-common';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
@@ -22,13 +25,14 @@ import * as i1 from "./upload.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "./navigation.service";
 import * as i4 from "./dropzone.service";
-import * as i5 from "./rendering/upload-status-total.component";
-import * as i6 from "./rendering/file-list.component";
-import * as i7 from "./rendering/upload-action-buttons.component";
-import * as i8 from "./localization/localized-messages.directive";
-import * as i9 from "./dropzone-internal.directive";
-import * as i10 from "./file-select.directive";
-import * as i11 from "@angular/common";
+import * as i5 from "@progress/kendo-angular-buttons";
+import * as i6 from "./rendering/upload-status-total.component";
+import * as i7 from "./rendering/file-list.component";
+import * as i8 from "./rendering/upload-action-buttons.component";
+import * as i9 from "./localization/localized-messages.directive";
+import * as i10 from "./dropzone-internal.directive";
+import * as i11 from "./file-select.directive";
+import * as i12 from "@angular/common";
 /**
  * @hidden
  */
@@ -37,16 +41,17 @@ export const UPLOAD_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => UploadComponent)
 };
+let idx = 0;
 /**
  * Represents the [Kendo UI Upload component for Angular]({% slug overview_upload %}).
  */
 export class UploadComponent {
-    constructor(uploadService, localization, navigation, dropZoneService, _ngZone, renderer, cdr, wrapper) {
+    constructor(uploadService, localization, navigation, dropZoneService, zone, renderer, cdr, wrapper) {
         this.uploadService = uploadService;
         this.localization = localization;
         this.navigation = navigation;
         this.dropZoneService = dropZoneService;
-        this._ngZone = _ngZone;
+        this.zone = zone;
         this.renderer = renderer;
         this.cdr = cdr;
         /**
@@ -311,7 +316,7 @@ export class UploadComponent {
      * Sets the restrictions for selected files ([see example]({% slug api_upload_filerestrictions %})).
      */
     set restrictions(restrictions) {
-        let parsedRestrictions = Object.assign({}, this._restrictions, restrictions);
+        const parsedRestrictions = Object.assign({}, this._restrictions, restrictions);
         this._restrictions = parsedRestrictions;
     }
     get restrictions() {
@@ -330,6 +335,25 @@ export class UploadComponent {
         if (this.zoneId) {
             this.dropZoneService.addComponent(this, this.zoneId);
         }
+        const button = this.fileSelectButton.nativeElement;
+        const input = this.fileSelectInput.nativeElement;
+        this.subs.add(this.renderer.listen(input, 'mouseenter', () => {
+            this.renderer.addClass(button, 'k-hover');
+        }));
+        this.subs.add(this.renderer.listen(input, 'mouseleave', () => {
+            this.renderer.removeClass(button, 'k-hover');
+        }));
+        this.zone.runOutsideAngular(() => {
+            this.subs.add(this.renderer.listen(this.wrapper, 'keydown', event => this.handleKeydown(event)));
+        });
+    }
+    ngAfterViewInit() {
+        const { buttonId, inputId } = this.getIds();
+        const button = this.fileSelectButton.nativeElement;
+        const input = this.fileSelectInput.nativeElement;
+        this.renderer.setAttribute(button, 'id', buttonId);
+        this.renderer.setAttribute(button, 'aria-controls', inputId);
+        this.renderer.setAttribute(input, 'id', inputId);
     }
     ngOnChanges(changes) {
         if (isChanged("chunkable", changes)) {
@@ -361,24 +385,6 @@ export class UploadComponent {
             this.subs.unsubscribe();
         }
     }
-    /**
-     * @hidden
-     */
-    handleKeydown(event) {
-        if (this.disabled) {
-            return;
-        }
-        if ((event.keyCode === Keys.Enter || event.keyCode === Keys.Space) &&
-            event.target === this.fileSelectButton.nativeElement) {
-            event.preventDefault();
-            this.fileSelect.nativeElement.click();
-            return;
-        }
-        if (hasClasses(event.target, UPLOAD_CLASSES) ||
-            (!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES))) {
-            this.navigation.process(event);
-        }
-    }
     /**
      * @hidden
      */
@@ -477,6 +483,16 @@ export class UploadComponent {
     textFor(key) {
         return this.localization.get(key);
     }
+    /**
+     * @hidden
+     */
+    getIds() {
+        const id = ++idx;
+        const buttonId = `k-upload-button-${id}`;
+        const inputId = `k-upload-input-${id}`;
+        return { buttonId, inputId };
+    }
+    ;
     /**
      * Focuses the underlying input element.
      */
@@ -587,13 +603,13 @@ export class UploadComponent {
         if (!isDocumentAvailable()) {
             return;
         }
-        this._ngZone.runOutsideAngular(() => {
+        this.zone.runOutsideAngular(() => {
             this.documentClick = fromEvent(document, 'click').pipe(filter((event) => {
                 return !(this.wrapper !== event.target && this.wrapper.contains(event.target));
             }));
             this.blurSubscription = merge(this.documentClick, this.navigation.onTab).subscribe(() => {
                 if (this.navigation.focused) {
-                    this._ngZone.run(() => {
+                    this.zone.run(() => {
                         this.navigation.focused = false;
                         this.onTouchedCallback();
                         this.onBlur.emit();
@@ -602,6 +618,21 @@ export class UploadComponent {
             });
         });
     }
+    handleKeydown(event) {
+        if (this.disabled) {
+            return;
+        }
+        if ((event.keyCode === Keys.Enter || event.keyCode === Keys.Space) &&
+            event.target === this.fileSelectButton.nativeElement) {
+            event.preventDefault();
+            this.fileSelectInput.nativeElement.click();
+            return;
+        }
+        if (hasClasses(event.target, UPLOAD_CLASSES) ||
+            (!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES))) {
+            this.navigation.process(event);
+        }
+    }
     subscribeFocus() {
         this.wrapperFocusSubscription = this.navigation.onWrapperFocus.subscribe(() => {
             this.onFocus.emit();
@@ -650,8 +681,8 @@ export class UploadComponent {
         }));
     }
 }
-UploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 }], target: i0.ɵɵFactoryTarget.Component });
-UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class.k-widget": "this.hostDefaultClasses", "class.k-upload": "this.hostDefaultClasses", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir" } }, providers: [
+UploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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 }], target: i0.ɵɵFactoryTarget.Component });
+UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir" } }, providers: [
         LocalizationService,
         NavigationService,
         UploadService,
@@ -665,7 +696,7 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.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: "fileSelect", first: true, predicate: ["fileSelect"], descendants: true, static: true }, { propertyName: "fileSelectButton", first: true, predicate: ["fileSelectButton"], descendants: true, static: true }], exportAs: ["kendoUpload"], usesOnChanges: true, ngImport: i0, template: `
+    ], 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: `
     <ng-container kendoUploadLocalizedMessages
       i18n-cancel="kendo.upload.cancel|The text for the Cancel button"
       cancel="Cancel"
@@ -731,25 +762,35 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
     <div kendoUploadInternalDropZone
       [restrictions]="restrictions"
       [multiple]="multiple"
-      [disabled]="disabled">
-        <div role="button" #fileSelectButton
-             [id]="focusableId"
-             [attr.aria-label]="textFor('select')"
-             [attr.tabindex]="selectButtonTabIndex"
-             (focus)="onFileSelectButtonFocus($event)"
-             (blur)="onFileSelectButtonBlur($event)"
-             class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-upload-button">
-          <input #fileSelect kendoFileSelect
-            [attr.accept]="accept ? accept : null"
-            [attr.aria-hidden]="true"
-            [dir]="direction"
-            [restrictions]="restrictions"
-            [multiple]="multiple"
-            [disabled]="disabled" />
-          <span>{{textFor('select')}}</span>
+      [disabled]="disabled"
+    >
+        <div class="k-upload-button-wrap">
+            <button 
+                kendoButton
+                #fileSelectButton
+                class="k-upload-button"
+                role="button"
+                [id]="focusableId"
+                [attr.aria-label]="textFor('select')"
+                [attr.tabindex]="selectButtonTabIndex"
+                (focus)="onFileSelectButtonFocus($event)"
+                (blur)="onFileSelectButtonBlur($event)"
+            >
+                {{textFor('select')}}
+            </button>
+            <input
+                #fileSelectInput
+                kendoFileSelect
+                [attr.accept]="accept ? accept : null"
+                [attr.aria-hidden]="true"
+                [dir]="direction"
+                [restrictions]="restrictions"
+                [multiple]="multiple"
+                [disabled]="disabled"
+            />
         </div>
         <kendo-upload-status-total *ngIf="showTotalStatus"
-          class="k-upload-status k-upload-status-total"
+          class="k-upload-status"
           [fileList]="fileList">
         </kendo-upload-status-total>
         <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
@@ -766,8 +807,8 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
       [disabled]="disabled"
       [actionsLayout]="actionsLayout">
     </kendo-upload-action-buttons>
-  `, isInline: true, components: [{ type: i5.UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: ["fileList"] }, { type: i6.FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { type: i7.UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: ["disabled", "actionsLayout"] }], directives: [{ type: i8.LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: i9.DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { type: i10.FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadComponent, decorators: [{
+  `, isInline: true, components: [{ type: i5.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i6.UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: ["fileList"] }, { type: i7.FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { type: i8.UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: ["disabled", "actionsLayout"] }], directives: [{ type: i9.LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: i10.DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { type: i11.FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoUpload',
@@ -853,25 +894,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
     <div kendoUploadInternalDropZone
       [restrictions]="restrictions"
       [multiple]="multiple"
-      [disabled]="disabled">
-        <div role="button" #fileSelectButton
-             [id]="focusableId"
-             [attr.aria-label]="textFor('select')"
-             [attr.tabindex]="selectButtonTabIndex"
-             (focus)="onFileSelectButtonFocus($event)"
-             (blur)="onFileSelectButtonBlur($event)"
-             class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-upload-button">
-          <input #fileSelect kendoFileSelect
-            [attr.accept]="accept ? accept : null"
-            [attr.aria-hidden]="true"
-            [dir]="direction"
-            [restrictions]="restrictions"
-            [multiple]="multiple"
-            [disabled]="disabled" />
-          <span>{{textFor('select')}}</span>
+      [disabled]="disabled"
+    >
+        <div class="k-upload-button-wrap">
+            <button 
+                kendoButton
+                #fileSelectButton
+                class="k-upload-button"
+                role="button"
+                [id]="focusableId"
+                [attr.aria-label]="textFor('select')"
+                [attr.tabindex]="selectButtonTabIndex"
+                (focus)="onFileSelectButtonFocus($event)"
+                (blur)="onFileSelectButtonBlur($event)"
+            >
+                {{textFor('select')}}
+            </button>
+            <input
+                #fileSelectInput
+                kendoFileSelect
+                [attr.accept]="accept ? accept : null"
+                [attr.aria-hidden]="true"
+                [dir]="direction"
+                [restrictions]="restrictions"
+                [multiple]="multiple"
+                [disabled]="disabled"
+            />
         </div>
         <kendo-upload-status-total *ngIf="showTotalStatus"
-          class="k-upload-status k-upload-status-total"
+          class="k-upload-status"
           [fileList]="fileList">
         </kendo-upload-status-total>
         <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
@@ -945,12 +996,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], fileInfoTemplate: [{
                 type: ContentChild,
                 args: [FileInfoTemplateDirective, { static: false }]
-            }], fileSelect: [{
+            }], fileSelectInput: [{
                 type: ViewChild,
-                args: ['fileSelect', { static: true }]
+                args: ['fileSelectInput', { static: true }]
             }], fileSelectButton: [{
                 type: ViewChild,
-                args: ['fileSelectButton', { static: true }]
+                args: ['fileSelectButton', { static: true, read: ElementRef }]
             }], onBlur: [{
                 type: Output,
                 args: ['blur']
@@ -982,9 +1033,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], valueChange: [{
                 type: Output
             }], hostDefaultClasses: [{
-                type: HostBinding,
-                args: ['class.k-widget']
-            }, {
                 type: HostBinding,
                 args: ['class.k-upload']
             }], hostDisabledClass: [{
@@ -993,7 +1041,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], dir: [{
                 type: HostBinding,
                 args: ['attr.dir']
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }] } });

package/{esm2015/upload.module.js → esm2020/upload.module.mjs}

@@ -1,11 +1,12 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
 import { UploadComponent } from './upload.component';
 import { UploadActionButtonsComponent } from './rendering/upload-action-buttons.component';
 import { UploadStatusTotalComponent } from './rendering/upload-status-total.component';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { SharedModule, PUBLIC_DIRECTIVES } from './shared.module';
 import * as i0 from "@angular/core";
 import * as i1 from "./templates/file-template.directive";
@@ -23,14 +24,14 @@ const UPLOAD_DECLARATIONS = [
  */
 export class UploadModule {
 }
-UploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadModule, declarations: [UploadComponent,
+UploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, declarations: [UploadComponent,
         UploadActionButtonsComponent,
-        UploadStatusTotalComponent], imports: [SharedModule], exports: [i1.FileTemplateDirective, i2.FileInfoTemplateDirective, i3.CustomMessagesComponent, i4.UploadDropZoneDirective, i5.UploadDropZoneComponent, UploadComponent,
+        UploadStatusTotalComponent], imports: [SharedModule, IconsModule], exports: [i1.FileTemplateDirective, i2.FileInfoTemplateDirective, i3.CustomMessagesComponent, i4.UploadDropZoneDirective, i5.UploadDropZoneComponent, UploadComponent,
         UploadActionButtonsComponent,
         UploadStatusTotalComponent] });
-UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadModule, imports: [[SharedModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadModule, decorators: [{
+UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, imports: [[SharedModule, IconsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [UPLOAD_DECLARATIONS],
@@ -38,6 +39,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         PUBLIC_DIRECTIVES,
                         UPLOAD_DECLARATIONS
                     ],
-                    imports: [SharedModule]
+                    imports: [SharedModule, IconsModule]
                 }]
         }] });