@progress/kendo-angular-upload 25.0.0 → 25.1.0-develop.10

package/fesm2022/progress-kendo-angular-upload.mjs

@@ -5,13 +5,13 @@
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpRequest, HttpEventType, HttpResponse } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Directive, ElementRef, Output, HostBinding, Input, ViewChild, ContentChild, Component, HostListener, ViewChildren, Inject, forwardRef, isDevMode, NgModule } from '@angular/core';
-import { guid, isDocumentAvailable, normalizeKeys, Keys, isControlRequired, isChanged, KendoInput, KENDO_WEBMCP_HOST, provideComponentName, ResizeBatchService } from '@progress/kendo-angular-common';
+import { EventEmitter, Injectable, Directive, signal, ElementRef, Output, HostBinding, Input, ViewChild, ContentChild, ChangeDetectionStrategy, Component, HostListener, ViewChildren, Inject, forwardRef, isDevMode, NgModule } from '@angular/core';
+import { guid, isDocumentAvailable, normalizeKeys, Keys, isControlRequired, KendoInput, KENDO_WEBMCP_HOST, provideComponentName, ResizeBatchService } from '@progress/kendo-angular-common';
 import { fileCsvIcon, filePsdIcon, fileDiscImageIcon, fileZipIcon, fileConfigIcon, filePdfIcon, fileProgrammingIcon, fileDataIcon, filePresentationIcon, fileTxtIcon, fileImageIcon, fileVideoIcon, fileAudioIcon, fileIcon, arrowRotateCwIcon, playIcon, pauseIcon, cancelIcon, xIcon, copyIcon, checkIcon, exclamationCircleIcon, uploadIcon } from '@progress/kendo-svg-icons';
 import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { fromEvent, merge } from 'rxjs';
+import { merge, fromEvent } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import { trigger, state, style, transition, animate } from '@angular/animations';
@@ -1591,8 +1591,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1786525831,
-    version: '25.0.0',
+    publishDate: 1787669927,
+    version: '25.1.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1688,50 +1688,85 @@ class UploadFileSelectBase {
     /**
      * Sets the `accept` attribute of the internal `input` element of the component.
      */
-    accept;
+    set accept(value) {
+        this._accept.set(value);
+    }
+    get accept() {
+        return this._accept();
+    }
     /**
      * Disables the component.
      *
      * @default false
      */
-    disabled = false;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     /**
      * Allows you to select multiple files.
      * When you set this to `false`, you can select only one file at a time.
      *
      * @default true
      */
-    multiple = true;
+    set multiple(value) {
+        this._multiple.set(value);
+    }
+    get multiple() {
+        return this._multiple();
+    }
     /**
      * Controls the visibility of the file list.
      *
      * @default true
      */
-    showFileList = true;
+    set showFileList(value) {
+        this._showFileList.set(value);
+    }
+    get showFileList() {
+        return this._showFileList();
+    }
     /**
      * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      *
      * @default 0
      */
-    tabindex = 0;
+    set tabindex(value) {
+        this._tabindex.set(value);
+    }
+    get tabindex() {
+        return this._tabindex();
+    }
     /**
      * Sets the restrictions for selected files.
      */
     set restrictions(restrictions) {
         const parsedRestrictions = Object.assign({}, this.restrictions, restrictions);
-        this._restrictions = parsedRestrictions;
+        this._restrictionsSignal.set(parsedRestrictions);
     }
     get restrictions() {
-        return this._restrictions;
+        return this._restrictionsSignal();
     }
     /**
      * Sets the `id` of the external drop zone that you want to associate with the component.
      */
-    zoneId;
+    set zoneId(value) {
+        this._zoneId.set(value);
+    }
+    get zoneId() {
+        return this._zoneId();
+    }
     /**
      * @hidden
      */
-    focusableId = `k-${guid()}`;
+    set focusableId(value) {
+        this._focusableId.set(value);
+    }
+    get focusableId() {
+        return this._focusableId();
+    }
     /**
      * @hidden
      */
@@ -1768,14 +1803,18 @@ class UploadFileSelectBase {
      * Fires when you are about to remove a file. If you prevent this event, the file will remain in the list.
      */
     remove = new EventEmitter();
-    /**
-     * @hidden
-     */
-    _restrictions = {
+    _accept = signal(undefined, ...(ngDevMode ? [{ debugName: "_accept" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _multiple = signal(true, ...(ngDevMode ? [{ debugName: "_multiple" }] : []));
+    _showFileList = signal(true, ...(ngDevMode ? [{ debugName: "_showFileList" }] : []));
+    _tabindex = signal(0, ...(ngDevMode ? [{ debugName: "_tabindex" }] : []));
+    _restrictionsSignal = signal({
         allowedExtensions: [],
         maxFileSize: 0,
         minFileSize: 0
-    };
+    }, ...(ngDevMode ? [{ debugName: "_restrictionsSignal" }] : []));
+    _zoneId = signal(undefined, ...(ngDevMode ? [{ debugName: "_zoneId" }] : []));
+    _focusableId = signal(`k-${guid()}`, ...(ngDevMode ? [{ debugName: "_focusableId" }] : []));
     /**
      * @hidden
      */
@@ -1827,6 +1866,8 @@ class UploadFileSelectBase {
         if (newValue === null) {
             this.fileList.clear();
         }
+        // FileMap state is managed by UploadService and is not signal-tracked;
+        // explicit markForCheck is required to update the view after writeValue.
         this.cdr.markForCheck();
     }
     onTouchedCallback = (_) => { };
@@ -1847,7 +1888,7 @@ class UploadFileSelectBase {
      * @hidden
      */
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this._disabled.set(isDisabled);
     }
     /**
      * @hidden
@@ -1953,8 +1994,18 @@ class UploadActionButtonsComponent {
     uploadService;
     localization;
     navigation;
-    disabled;
-    actionsLayout;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
+    set actionsLayout(value) {
+        this._actionsLayout.set(value);
+    }
+    get actionsLayout() {
+        return this._actionsLayout();
+    }
     clearButton;
     uploadButton;
     hostDefaultClass = true;
@@ -1971,6 +2022,8 @@ class UploadActionButtonsComponent {
     get actionButtonsCenterClassName() {
         return this.actionsLayout === 'center';
     }
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _actionsLayout = signal('end', ...(ngDevMode ? [{ debugName: "_actionsLayout" }] : []));
     constructor(uploadService, localization, navigation) {
         this.uploadService = uploadService;
         this.localization = localization;
@@ -2015,7 +2068,7 @@ class UploadActionButtonsComponent {
             (click)="onUploadButtonClick($event)">
                 <span class="k-button-text">{{textFor('uploadSelectedFiles')}}</span>
         </button>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: UploadActionButtonsComponent, decorators: [{
             type: Component,
@@ -2032,7 +2085,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 <span class="k-button-text">{{textFor('uploadSelectedFiles')}}</span>
         </button>
     `,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: UploadService }, { type: i1$1.LocalizationService }, { type: NavigationService }], propDecorators: { disabled: [{
                 type: Input
@@ -2174,7 +2228,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
 class FileListItemBase {
     uploadService;
     cdr;
-    progressComplete = 0;
+    _progressComplete = signal(0, ...(ngDevMode ? [{ debugName: "_progressComplete" }] : []));
+    get progressComplete() {
+        return this._progressComplete();
+    }
+    set progressComplete(value) {
+        this._progressComplete.set(value);
+    }
     localization;
     uploadProgressSubscription;
     constructor(uploadService, cdr) {
@@ -2183,12 +2243,11 @@ class FileListItemBase {
     }
     subscribeUploadProgress(uploadProgressHandler) {
         this.uploadProgressSubscription = this.uploadService.uploadProgressEvent.subscribe((args) => {
-            const previousProgress = this.progressComplete;
             uploadProgressHandler(args);
-            if (this.progressComplete !== previousProgress) {
-                this.cdr.markForCheck();
-            }
         });
+        this.uploadProgressSubscription.add(merge(this.uploadService.successEvent, this.uploadService.errorEvent, this.uploadService.cancelEvent, this.uploadService.pauseEvent, this.uploadService.resumeEvent).subscribe(() => {
+            this.cdr.markForCheck();
+        }));
     }
     fileHasValidationErrors(file) {
         return fileHasValidationErrors(file);
@@ -2227,18 +2286,45 @@ class FileListItemActionButtonComponent {
     uploadService;
     localization;
     navigation;
-    file;
-    disabled;
-    progress;
+    cdr;
+    set file(value) {
+        this._file.set(value);
+    }
+    get file() {
+        return this._file();
+    }
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
+    set progress(value) {
+        this._progress.set(value);
+    }
+    get progress() {
+        return this._progress();
+    }
     retrySVGIcon = arrowRotateCwIcon;
     playSVGIcon = playIcon;
     pauseSVGIcon = pauseIcon;
     cancelSVGIcon = cancelIcon;
     deleteSVGIcon = xIcon;
-    constructor(uploadService, localization, navigation) {
+    _file = signal(undefined, ...(ngDevMode ? [{ debugName: "_file" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _progress = signal(0, ...(ngDevMode ? [{ debugName: "_progress" }] : []));
+    subs;
+    constructor(uploadService, localization, navigation, cdr) {
         this.uploadService = uploadService;
         this.localization = localization;
         this.navigation = navigation;
+        this.cdr = cdr;
+        this.subs = merge(this.uploadService.successEvent, this.uploadService.errorEvent, this.uploadService.cancelEvent, this.uploadService.pauseEvent, this.uploadService.resumeEvent).subscribe(() => {
+            this.cdr.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
     }
     onRetryClick() {
         if (this.disabled) {
@@ -2309,7 +2395,7 @@ class FileListItemActionButtonComponent {
         }
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FileListItemActionButtonComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FileListItemActionButtonComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: FileListItemActionButtonComponent, isStandalone: true, selector: "kendo-upload-file-list-item-action-button", inputs: { file: "file", disabled: "disabled", progress: "progress" }, ngImport: i0, template: `
     <span class="k-upload-actions">
       @if (isUploading || isPaused) {
@@ -2365,7 +2451,7 @@ class FileListItemActionButtonComponent {
         ></button>
       }
     </span>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FileListItemActionButtonComponent, decorators: [{
             type: Component,
@@ -2428,9 +2514,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
     </span>
     `,
                     standalone: true,
-                    imports: [ButtonComponent]
+                    imports: [ButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [{ type: UploadService }, { type: i1$1.LocalizationService }, { type: NavigationService }], propDecorators: { file: [{
+        }], ctorParameters: () => [{ type: UploadService }, { type: i1$1.LocalizationService }, { type: NavigationService }, { type: i0.ChangeDetectorRef }], propDecorators: { file: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -2443,11 +2530,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class FileListMultipleItemsComponent extends FileListItemBase {
     localization;
-    disabled;
-    files;
-    fileInfoTemplate;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
+    set files(value) {
+        this._files.set(value);
+    }
+    get files() {
+        return this._files();
+    }
+    set fileInfoTemplate(value) {
+        this._fileInfoTemplate.set(value);
+    }
+    get fileInfoTemplate() {
+        return this._fileInfoTemplate();
+    }
     filesHaveErrors;
     copySVGIcon = copyIcon;
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _files = signal([], ...(ngDevMode ? [{ debugName: "_files" }] : []));
+    _fileInfoTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_fileInfoTemplate" }] : []));
     constructor(localization, uploadService, cdr) {
         super(uploadService, cdr);
         this.localization = localization;
@@ -2545,7 +2650,7 @@ class FileListMultipleItemsComponent extends FileListItemBase {
                 transition('inactive => active', style({ opacity: 1 })),
                 transition('active => inactive', animate('1s 2s ease-out'))
             ])
-        ] });
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FileListMultipleItemsComponent, decorators: [{
             type: Component,
@@ -2610,7 +2715,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         </kendo-upload-file-list-item-action-button>
         `,
                     standalone: true,
-                    imports: [ProgressBarComponent, IconWrapperComponent, NgClass, NgTemplateOutlet, FileListItemActionButtonComponent]
+                    imports: [ProgressBarComponent, IconWrapperComponent, NgClass, NgTemplateOutlet, FileListItemActionButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i1$1.LocalizationService }, { type: UploadService }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input
@@ -2625,9 +2731,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class FileListSingleItemComponent extends FileListItemBase {
     localization;
-    disabled;
-    file;
-    fileInfoTemplate;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
+    set file(value) {
+        this._file.set(value);
+    }
+    get file() {
+        return this._file();
+    }
+    set fileInfoTemplate(value) {
+        this._fileInfoTemplate.set(value);
+    }
+    get fileInfoTemplate() {
+        return this._fileInfoTemplate();
+    }
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _file = signal(undefined, ...(ngDevMode ? [{ debugName: "_file" }] : []));
+    _fileInfoTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_fileInfoTemplate" }] : []));
     constructor(localization, uploadService, cdr) {
         super(uploadService, cdr);
         this.localization = localization;
@@ -2717,7 +2841,7 @@ class FileListSingleItemComponent extends FileListItemBase {
                 transition('inactive => active', style({ opacity: 1 })),
                 transition('active => inactive', animate('1s 2s ease-out'))
             ])
-        ] });
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FileListSingleItemComponent, decorators: [{
             type: Component,
@@ -2773,7 +2897,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         </kendo-upload-file-list-item-action-button>
         `,
                     standalone: true,
-                    imports: [ProgressBarComponent, IconWrapperComponent, NgClass, NgTemplateOutlet, FileListItemActionButtonComponent]
+                    imports: [ProgressBarComponent, IconWrapperComponent, NgClass, NgTemplateOutlet, FileListItemActionButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i1$1.LocalizationService }, { type: UploadService }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input
@@ -2789,12 +2914,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
 class FileListComponent {
     uploadService;
     navigation;
-    disabled;
-    fileList;
-    fileTemplate;
-    fileInfoTemplate;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
+    set fileList(value) {
+        this._fileList.set(value);
+    }
+    get fileList() {
+        return this._fileList();
+    }
+    set fileTemplate(value) {
+        this._fileTemplate.set(value);
+    }
+    get fileTemplate() {
+        return this._fileTemplate();
+    }
+    set fileInfoTemplate(value) {
+        this._fileInfoTemplate.set(value);
+    }
+    get fileInfoTemplate() {
+        return this._fileInfoTemplate();
+    }
     fileListItems;
     fileListRole = 'list';
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _fileList = signal([], ...(ngDevMode ? [{ debugName: "_fileList" }] : []));
+    _fileTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_fileTemplate" }] : []));
+    _fileInfoTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_fileInfoTemplate" }] : []));
     focusSubscription;
     actionSubscription;
     constructor(uploadService, navigation) {
@@ -2901,7 +3050,7 @@ class FileListComponent {
             }
           </li>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: ["files", "index"] }, { kind: "component", type: FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: ["disabled", "file", "fileInfoTemplate"] }, { kind: "component", type: FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: ["disabled", "files", "fileInfoTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: ["files", "index"] }, { kind: "component", type: FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: ["disabled", "file", "fileInfoTemplate"] }, { kind: "component", type: FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: ["disabled", "files", "fileInfoTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FileListComponent, decorators: [{
             type: Component,
@@ -2936,7 +3085,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         }
         `,
                     standalone: true,
-                    imports: [FileListItemDirective, FileListSingleItemComponent, FileListMultipleItemsComponent, NgTemplateOutlet]
+                    imports: [FileListItemDirective, FileListSingleItemComponent, FileListMultipleItemsComponent, NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: UploadService }, { type: NavigationService }], propDecorators: { disabled: [{
                 type: Input
@@ -2959,59 +3109,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class UploadStatusTotalComponent {
     localization;
+    uploadService;
     fileList;
-    isFailed;
-    isPaused;
-    isUploading;
-    statusText;
     checkmarkIcon = checkIcon;
     exceptionSVGIcon = exclamationCircleIcon;
     uploadSVGIcon = uploadIcon;
     pauseSVGIcon = pauseIcon;
-    constructor(localization) {
+    _isFailed = signal(false, ...(ngDevMode ? [{ debugName: "_isFailed" }] : []));
+    _isPaused = signal(false, ...(ngDevMode ? [{ debugName: "_isPaused" }] : []));
+    _isUploading = signal(false, ...(ngDevMode ? [{ debugName: "_isUploading" }] : []));
+    subs;
+    constructor(localization, uploadService) {
         this.localization = localization;
+        this.uploadService = uploadService;
+    }
+    ngOnInit() {
+        this._isPaused.set(this.fileList.hasFileWithState([FileState.Paused]));
+        this._isFailed.set(this.fileList.hasFileWithState([FileState.Failed]));
+        this._isUploading.set(this.fileList.hasFileWithState([FileState.Uploading]));
+        this.subs = merge(this.uploadService.cancelEvent, this.uploadService.clearEvent, this.uploadService.completeEvent, this.uploadService.errorEvent, this.uploadService.pauseEvent, this.uploadService.resumeEvent, this.uploadService.successEvent, this.uploadService.selectEvent, this.uploadService.uploadProgressEvent).subscribe(() => {
+            this._isPaused.set(this.fileList.hasFileWithState([FileState.Paused]));
+            this._isFailed.set(this.fileList.hasFileWithState([FileState.Failed]));
+            this._isUploading.set(this.fileList.hasFileWithState([FileState.Uploading]));
+        });
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
     }
     get iconClass() {
-        if (!this.isUploading && !this.isFailed) {
+        if (this._isPaused() && !this._isUploading()) {
+            return 'pause';
+        }
+        if (!this._isUploading() && !this._isFailed()) {
             return 'checkmark';
         }
-        if (!this.isUploading && this.isFailed) {
+        if (!this._isUploading() && this._isFailed()) {
             return 'exception';
         }
-        if (this.isUploading) {
+        if (this._isUploading()) {
             return 'upload';
         }
-        if (this.isPaused) {
-            return 'pause';
-        }
     }
     get SVGIconClass() {
-        if (!this.isUploading && !this.isFailed) {
+        if (this._isPaused() && !this._isUploading()) {
+            return this.pauseSVGIcon;
+        }
+        if (!this._isUploading() && !this._isFailed()) {
             return this.checkmarkIcon;
         }
-        if (!this.isUploading && this.isFailed) {
+        if (!this._isUploading() && this._isFailed()) {
             return this.exceptionSVGIcon;
         }
-        if (this.isUploading) {
+        if (this._isUploading()) {
             return this.uploadSVGIcon;
         }
-        if (this.isPaused) {
-            return this.pauseSVGIcon;
-        }
     }
-    ngDoCheck() {
-        this.isPaused = this.fileList.hasFileWithState([FileState.Paused]);
-        this.isFailed = this.fileList.hasFileWithState([FileState.Failed]);
-        this.isUploading = this.fileList.hasFileWithState([FileState.Uploading]);
-        if (this.isPaused && !this.isUploading) {
-            this.statusText = this.localization.get('headerStatusPaused');
+    get statusText() {
+        if (this._isPaused() && !this._isUploading()) {
+            return this.localization.get('headerStatusPaused');
         }
         else {
-            this.statusText = this.isUploading ? this.localization.get('headerStatusUploading')
+            return this._isUploading()
+                ? this.localization.get('headerStatusUploading')
                 : this.localization.get('headerStatusUploaded');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: UploadStatusTotalComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: UploadStatusTotalComponent, deps: [{ token: i1$1.LocalizationService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: UploadStatusTotalComponent, isStandalone: true, selector: "kendo-upload-status-total", inputs: { fileList: "fileList" }, ngImport: i0, template: `
         <kendo-icon-wrapper
             [name]="iconClass"
@@ -3019,7 +3182,7 @@ class UploadStatusTotalComponent {
         >
         </kendo-icon-wrapper>
         {{statusText}}
-    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: UploadStatusTotalComponent, decorators: [{
             type: Component,
@@ -3034,9 +3197,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         {{statusText}}
     `,
                     standalone: true,
-                    imports: [IconWrapperComponent]
+                    imports: [IconWrapperComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [{ type: i1$1.LocalizationService }], propDecorators: { fileList: [{
+        }], ctorParameters: () => [{ type: i1$1.LocalizationService }, { type: UploadService }], propDecorators: { fileList: [{
                 type: Input
             }] } });
 
@@ -3337,127 +3501,253 @@ class Messages extends ComponentMessages {
      *
      * @default 'Cancel'
      */
-    cancel;
+    set cancel(value) {
+        this._cancel.set(value);
+    }
+    get cancel() {
+        return this._cancel();
+    }
     /**
      * Sets the text for the **Clear** button.
      *
      * @default 'Clear'
      */
-    clearSelectedFiles;
+    set clearSelectedFiles(value) {
+        this._clearSelectedFiles.set(value);
+    }
+    get clearSelectedFiles() {
+        return this._clearSelectedFiles();
+    }
     /**
      * Sets the drop-zone hint.
      *
      * @default 'Drop files here to upload'
      */
-    dropFilesHere;
+    set dropFilesHere(value) {
+        this._dropFilesHere.set(value);
+    }
+    get dropFilesHere() {
+        return this._dropFilesHere();
+    }
     /**
      * Sets the external drop-zone hint.
      *
      * @default 'Drag and drop files here to upload'
      */
-    externalDropFilesHere;
+    set externalDropFilesHere(value) {
+        this._externalDropFilesHere.set(value);
+    }
+    get externalDropFilesHere() {
+        return this._externalDropFilesHere();
+    }
     /**
      * Sets the status message for a batch of files.
      *
      * @default 'files'
      */
-    filesBatchStatus;
+    set filesBatchStatus(value) {
+        this._filesBatchStatus.set(value);
+    }
+    get filesBatchStatus() {
+        return this._filesBatchStatus();
+    }
     /**
      * Sets the status message for a batch of files after failed upload.
      *
      * @default 'files failed to upload.'
      */
-    filesBatchStatusFailed;
+    set filesBatchStatusFailed(value) {
+        this._filesBatchStatusFailed.set(value);
+    }
+    get filesBatchStatusFailed() {
+        return this._filesBatchStatusFailed();
+    }
     /**
      * Sets the status message for a batch of files after successful upload.
      *
      * @default 'files successfully uploaded.'
      */
-    filesBatchStatusUploaded;
+    set filesBatchStatusUploaded(value) {
+        this._filesBatchStatusUploaded.set(value);
+    }
+    get filesBatchStatusUploaded() {
+        return this._filesBatchStatusUploaded();
+    }
     /**
      * Sets the file status message after failed upload.
      *
      * @default 'File failed to upload.'
      */
-    fileStatusFailed;
+    set fileStatusFailed(value) {
+        this._fileStatusFailed.set(value);
+    }
+    get fileStatusFailed() {
+        return this._fileStatusFailed();
+    }
     /**
      * Sets the file status message after successful upload.
      *
      * @default 'File successfully uploaded.'
      */
-    fileStatusUploaded;
+    set fileStatusUploaded(value) {
+        this._fileStatusUploaded.set(value);
+    }
+    get fileStatusUploaded() {
+        return this._fileStatusUploaded();
+    }
     /**
      * Sets the header status message when the file upload is paused.
      *
      * @default 'Paused'
      */
-    headerStatusPaused;
+    set headerStatusPaused(value) {
+        this._headerStatusPaused.set(value);
+    }
+    get headerStatusPaused() {
+        return this._headerStatusPaused();
+    }
     /**
      * Sets the header status message after the file upload completes.
      *
      * @default 'Done'
      */
-    headerStatusUploaded;
+    set headerStatusUploaded(value) {
+        this._headerStatusUploaded.set(value);
+    }
+    get headerStatusUploaded() {
+        return this._headerStatusUploaded();
+    }
     /**
      * Sets the header status message during the upload of the file.
      *
      * @default 'Uploading...'
      */
-    headerStatusUploading;
+    set headerStatusUploading(value) {
+        this._headerStatusUploading.set(value);
+    }
+    get headerStatusUploading() {
+        return this._headerStatusUploading();
+    }
     /**
      * Sets the text for the invalid `allowedExtensions` restriction message.
      *
      * @default 'File type not allowed.'
      */
-    invalidFileExtension;
+    set invalidFileExtension(value) {
+        this._invalidFileExtension.set(value);
+    }
+    get invalidFileExtension() {
+        return this._invalidFileExtension();
+    }
     /**
      * Sets the text for the invalid `maxFileSize` restriction message.
      *
      * @default 'File size too large.'
      */
-    invalidMaxFileSize;
+    set invalidMaxFileSize(value) {
+        this._invalidMaxFileSize.set(value);
+    }
+    get invalidMaxFileSize() {
+        return this._invalidMaxFileSize();
+    }
     /**
      * Sets the text for the invalid `minFileSize` restriction message.
      *
      * @default 'File size too small.'
      */
-    invalidMinFileSize;
+    set invalidMinFileSize(value) {
+        this._invalidMinFileSize.set(value);
+    }
+    get invalidMinFileSize() {
+        return this._invalidMinFileSize();
+    }
     /**
      * Sets the text for the **Pause** button.
      *
      * @default 'Pause'
      */
-    pause;
+    set pause(value) {
+        this._pause.set(value);
+    }
+    get pause() {
+        return this._pause();
+    }
     /**
      * Sets the text for the **Remove** button.
      *
      * @default 'Remove'
      */
-    remove;
+    set remove(value) {
+        this._remove.set(value);
+    }
+    get remove() {
+        return this._remove();
+    }
     /**
      * Sets the text for the **Resume** button.
      *
      * @default 'Resume'
      */
-    resume;
+    set resume(value) {
+        this._resume.set(value);
+    }
+    get resume() {
+        return this._resume();
+    }
     /**
      * Sets the text for the **Retry** button.
      *
      * @default 'Retry'
      */
-    retry;
+    set retry(value) {
+        this._retry.set(value);
+    }
+    get retry() {
+        return this._retry();
+    }
     /**
      * Sets the text for the **Select** button.
      *
      * @default 'Select files...'
      */
-    select;
+    set select(value) {
+        this._select.set(value);
+    }
+    get select() {
+        return this._select();
+    }
     /**
      * Sets the text for the **Upload files** button.
      *
      * @default 'Upload'
      */
-    uploadSelectedFiles;
+    set uploadSelectedFiles(value) {
+        this._uploadSelectedFiles.set(value);
+    }
+    get uploadSelectedFiles() {
+        return this._uploadSelectedFiles();
+    }
+    _cancel = signal(undefined, ...(ngDevMode ? [{ debugName: "_cancel" }] : []));
+    _clearSelectedFiles = signal(undefined, ...(ngDevMode ? [{ debugName: "_clearSelectedFiles" }] : []));
+    _dropFilesHere = signal(undefined, ...(ngDevMode ? [{ debugName: "_dropFilesHere" }] : []));
+    _externalDropFilesHere = signal(undefined, ...(ngDevMode ? [{ debugName: "_externalDropFilesHere" }] : []));
+    _filesBatchStatus = signal(undefined, ...(ngDevMode ? [{ debugName: "_filesBatchStatus" }] : []));
+    _filesBatchStatusFailed = signal(undefined, ...(ngDevMode ? [{ debugName: "_filesBatchStatusFailed" }] : []));
+    _filesBatchStatusUploaded = signal(undefined, ...(ngDevMode ? [{ debugName: "_filesBatchStatusUploaded" }] : []));
+    _fileStatusFailed = signal(undefined, ...(ngDevMode ? [{ debugName: "_fileStatusFailed" }] : []));
+    _fileStatusUploaded = signal(undefined, ...(ngDevMode ? [{ debugName: "_fileStatusUploaded" }] : []));
+    _headerStatusPaused = signal(undefined, ...(ngDevMode ? [{ debugName: "_headerStatusPaused" }] : []));
+    _headerStatusUploaded = signal(undefined, ...(ngDevMode ? [{ debugName: "_headerStatusUploaded" }] : []));
+    _headerStatusUploading = signal(undefined, ...(ngDevMode ? [{ debugName: "_headerStatusUploading" }] : []));
+    _invalidFileExtension = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidFileExtension" }] : []));
+    _invalidMaxFileSize = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidMaxFileSize" }] : []));
+    _invalidMinFileSize = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidMinFileSize" }] : []));
+    _pause = signal(undefined, ...(ngDevMode ? [{ debugName: "_pause" }] : []));
+    _remove = signal(undefined, ...(ngDevMode ? [{ debugName: "_remove" }] : []));
+    _resume = signal(undefined, ...(ngDevMode ? [{ debugName: "_resume" }] : []));
+    _retry = signal(undefined, ...(ngDevMode ? [{ debugName: "_retry" }] : []));
+    _select = signal(undefined, ...(ngDevMode ? [{ debugName: "_select" }] : []));
+    _uploadSelectedFiles = signal(undefined, ...(ngDevMode ? [{ debugName: "_uploadSelectedFiles" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Messages, isStandalone: true, inputs: { cancel: "cancel", clearSelectedFiles: "clearSelectedFiles", dropFilesHere: "dropFilesHere", externalDropFilesHere: "externalDropFilesHere", filesBatchStatus: "filesBatchStatus", filesBatchStatusFailed: "filesBatchStatusFailed", filesBatchStatusUploaded: "filesBatchStatusUploaded", fileStatusFailed: "fileStatusFailed", fileStatusUploaded: "fileStatusUploaded", headerStatusPaused: "headerStatusPaused", headerStatusUploaded: "headerStatusUploaded", headerStatusUploading: "headerStatusUploading", invalidFileExtension: "invalidFileExtension", invalidMaxFileSize: "invalidMaxFileSize", invalidMinFileSize: "invalidMinFileSize", pause: "pause", remove: "remove", resume: "resume", retry: "retry", select: "select", uploadSelectedFiles: "uploadSelectedFiles" }, usesInheritance: true, ngImport: i0 });
 }
@@ -3708,7 +3998,19 @@ class UploadComponent extends UploadFileSelectBase {
      *
      * @default false
      */
-    chunkable = false;
+    set chunkable(value) {
+        this._chunkable.set(value);
+        if (typeof value === 'boolean') {
+            this.uploadService.async.chunk = value;
+        }
+        if (typeof value === 'object' && value !== null) {
+            this.uploadService.async.chunk = true;
+            this.uploadService.chunk = Object.assign({}, this.uploadService.chunk, value);
+        }
+    }
+    get chunkable() {
+        return this._chunkable();
+    }
     /**
      * Specifies whether selected files upload simultaneously or one by one.
      *
@@ -3720,12 +4022,6 @@ class UploadComponent extends UploadFileSelectBase {
     get concurrent() {
         return this.uploadService.async.concurrent;
     }
-    /**
-     * Specifies whether the file list is visible.
-     *
-     * @default true
-     */
-    showFileList = true;
     /**
      * @hidden
      */
@@ -3740,7 +4036,12 @@ class UploadComponent extends UploadFileSelectBase {
      *
      * @default 'end'
      */
-    actionsLayout = 'end';
+    set actionsLayout(value) {
+        this._actionsLayout.set(value);
+    }
+    get actionsLayout() {
+        return this._actionsLayout();
+    }
     fileSelectInput;
     /**
      * Fires when the upload is canceled while in progress.
@@ -3790,6 +4091,8 @@ class UploadComponent extends UploadFileSelectBase {
     direction;
     wrapper;
     fileListId;
+    _chunkable = signal(false, ...(ngDevMode ? [{ debugName: "_chunkable" }] : []));
+    _actionsLayout = signal('end', ...(ngDevMode ? [{ debugName: "_actionsLayout" }] : []));
     documentClick;
     blurSubscription;
     wrapperFocusSubscription;
@@ -3831,18 +4134,6 @@ class UploadComponent extends UploadFileSelectBase {
             this.subs.add(this.renderer.listen(this.wrapper, 'keydown', event => this.handleKeydown(event)));
         });
     }
-    ngOnChanges(changes) {
-        if (isChanged("chunkable", changes)) {
-            const newChunkable = changes.chunkable.currentValue;
-            if (typeof newChunkable === 'boolean') {
-                this.uploadService.async.chunk = newChunkable;
-            }
-            if (typeof newChunkable === "object" && newChunkable !== null) {
-                this.uploadService.async.chunk = true;
-                this.uploadService.chunk = Object.assign({}, this.uploadService.chunk, newChunkable);
-            }
-        }
-    }
     ngOnDestroy() {
         this.fileList.clear();
         if (this.zoneId) {
@@ -4042,13 +4333,16 @@ class UploadComponent extends UploadFileSelectBase {
             this.cancel.emit(args);
         });
         this.subs.add(this.uploadService.changeEvent.subscribe((files) => {
+            this.cdr.markForCheck();
             this.onChangeCallback(files);
             this.valueChange.emit(files);
         }));
         this.subs.add(this.uploadService.clearEvent.subscribe((args) => {
+            this.cdr.markForCheck();
             this.clear.emit(args);
         }));
         this.subs.add(this.uploadService.completeEvent.subscribe(() => {
+            this.cdr.markForCheck();
             this.complete.emit();
         }));
         this.subs.add(this.uploadService.errorEvent.subscribe((args) => {
@@ -4056,15 +4350,19 @@ class UploadComponent extends UploadFileSelectBase {
             this.error.emit(args);
         }));
         this.subs.add(this.uploadService.pauseEvent.subscribe((args) => {
+            this.cdr.markForCheck();
             this.pause.emit(args);
         }));
         this.subs.add(this.uploadService.removeEvent.subscribe((args) => {
+            this.cdr.markForCheck();
             this.remove.emit(args);
         }));
         this.subs.add(this.uploadService.resumeEvent.subscribe((args) => {
+            this.cdr.markForCheck();
             this.resume.emit(args);
         }));
         this.subs.add(this.uploadService.selectEvent.subscribe((args) => {
+            this.cdr.markForCheck();
             this.select.emit(args);
         }));
         this.subs.add(this.uploadService.successEvent.subscribe((args) => {
@@ -4072,14 +4370,16 @@ class UploadComponent extends UploadFileSelectBase {
             this.success.emit(args);
         }));
         this.subs.add(this.uploadService.uploadEvent.subscribe((args) => {
+            this.cdr.markForCheck();
             this.upload.emit(args);
         }));
         this.subs.add(this.uploadService.uploadProgressEvent.subscribe((args) => {
+            this.cdr.markForCheck();
             this.uploadProgress.emit(args);
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: UploadComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }, { token: DropZoneService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: UploadComponent, isStandalone: true, 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: UploadComponent, isStandalone: true, 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", 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,
@@ -4098,7 +4398,7 @@ class UploadComponent extends UploadFileSelectBase {
                 useExisting: forwardRef(() => UploadComponent)
             },
             provideComponentName('upload')
-        ], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }], exportAs: ["kendoUpload"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }], exportAs: ["kendoUpload"], usesInheritance: true, ngImport: i0, template: `
     <ng-container kendoUploadLocalizedMessages
       i18n-cancel="kendo.upload.cancel|The text for the Cancel button"
       cancel="Cancel"
@@ -4214,7 +4514,7 @@ class UploadComponent extends UploadFileSelectBase {
         [actionsLayout]="actionsLayout">
       </kendo-upload-action-buttons>
     }
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { kind: "component", type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: ["fileList"] }, { kind: "component", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { kind: "component", type: UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: ["disabled", "actionsLayout"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { kind: "component", type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: ["fileList"] }, { kind: "component", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { kind: "component", type: UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: ["disabled", "actionsLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
@@ -4241,6 +4541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         provideComponentName('upload')
                     ],
                     selector: 'kendo-upload',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <ng-container kendoUploadLocalizedMessages
       i18n-cancel="kendo.upload.cancel|The text for the Cancel button"
@@ -4389,8 +4690,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 type: Input
             }], concurrent: [{
                 type: Input
-            }], showFileList: [{
-                type: Input
             }], tabIndex: [{
                 type: Input,
                 args: ['tabIndex']
@@ -4549,17 +4848,32 @@ class UploadDropZoneComponent extends DropZoneBase {
      * Specifies the id of the component.
      * Use this id to associate the DropZone with an existing Upload or FileSelect component.
      */
-    zoneId;
+    set zoneId(value) {
+        this._zoneId.set(value);
+    }
+    get zoneId() {
+        return this._zoneId();
+    }
     /**
      * Specifies the name for an existing icon in a Kendo UI theme.
      * The icon renders inside the DropZone.
      */
-    icon;
+    set icon(value) {
+        this._icon.set(value);
+    }
+    get icon() {
+        return this._icon();
+    }
     /**
      * Specifies a CSS class or multiple classes separated by spaces which apply to a span element.
      * Use this property to apply custom icons.
      */
-    iconClass;
+    set iconClass(value) {
+        this._iconClass.set(value);
+    }
+    get iconClass() {
+        return this._iconClass();
+    }
     /**
      * Specifies an SVGIcon to render inside the DropZone.
      * The input accepts either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
@@ -4568,14 +4882,17 @@ class UploadDropZoneComponent extends DropZoneBase {
         if (isDevMode() && icon && this.icon && this.iconClass) {
             throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
         }
-        this._svgIcon = icon;
+        this._svgIcon.set(icon);
     }
     get svgIcon() {
-        return this._svgIcon;
+        return this._svgIcon();
     }
     direction;
     localizationChangeSubscription;
-    _svgIcon = uploadIcon;
+    _zoneId = signal(undefined, ...(ngDevMode ? [{ debugName: "_zoneId" }] : []));
+    _icon = signal(undefined, ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    _iconClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_iconClass" }] : []));
+    _svgIcon = signal(uploadIcon, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : []));
     constructor(element, renderer, localization) {
         super(element, renderer, 'k-external-dropzone-hover');
         this.localization = localization;
@@ -4631,7 +4948,7 @@ class UploadDropZoneComponent extends DropZoneBase {
                 <ng-content></ng-content>
             </span>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: UploadDropZoneDirective, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: ["kendoUploadDropZone", "kendoFileSelectDropZone"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: UploadDropZoneDirective, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: ["kendoUploadDropZone", "kendoFileSelectDropZone"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: UploadDropZoneComponent, decorators: [{
             type: Component,
@@ -4666,7 +4983,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         </div>
     `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, UploadDropZoneDirective, IconWrapperComponent]
+                    imports: [LocalizedMessagesDirective, UploadDropZoneDirective, IconWrapperComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -4730,14 +5048,6 @@ class FileSelectComponent extends UploadFileSelectBase {
      * Fires when the component value changes after a successful `select` or `remove` operation.
      */
     valueChange = new EventEmitter();
-    /**
-     * @hidden
-     */
-    _restrictions = {
-        allowedExtensions: [],
-        maxFileSize: 0,
-        minFileSize: 0
-    };
     direction;
     wrapper;
     fileListId;
@@ -4901,7 +5211,11 @@ class FileSelectComponent extends UploadFileSelectBase {
         }
     }
     attachEventHandlers() {
+        // FileMap state is managed by UploadService and is not signal-tracked.
+        // markForCheck() is required on all events to keep the OnPush view in sync
+        // (e.g. hasFileList reads the mutable FileMap and must re-evaluate after changes).
         this.subs = this.uploadService.changeEvent.subscribe((files) => {
+            this.cdr.markForCheck();
             let model = [];
             if (files !== null) {
                 files.forEach((file) => {
@@ -4920,9 +5234,11 @@ class FileSelectComponent extends UploadFileSelectBase {
             this.valueChange.emit(model);
         });
         this.subs.add(this.uploadService.removeEvent.subscribe((args) => {
+            this.cdr.markForCheck();
             this.remove.emit(args);
         }));
         this.subs.add(this.uploadService.selectEvent.subscribe((args) => {
+            this.cdr.markForCheck();
             this.select.emit(args);
         }));
     }
@@ -5009,7 +5325,7 @@ class FileSelectComponent extends UploadFileSelectBase {
             [id]="fileListId">
           </ul>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { kind: "component", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { kind: "component", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FileSelectComponent, decorators: [{
             type: Component,
@@ -5097,7 +5413,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         }
         `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, DropZoneInternalDirective, ButtonComponent, FileSelectDirective, FileListComponent]
+                    imports: [LocalizedMessagesDirective, DropZoneInternalDirective, ButtonComponent, FileSelectDirective, FileListComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: UploadService }, { type: i1$1.LocalizationService }, { type: NavigationService }, { type: DropZoneService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Injector }], propDecorators: { fileSelectInput: [{
                 type: ViewChild,