@progress/kendo-angular-upload
Version:
Kendo UI Angular Upload Component
160 lines (159 loc) • 7.53 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, ElementRef, HostBinding, Input, isDevMode, Renderer2 } from '@angular/core';
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
import { DropZoneBase } from './dropzone-base';
import { uploadIcon } from '@progress/kendo-svg-icons';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import { UploadDropZoneDirective } from './dropzone-external.directive';
import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
/**
* Represents the [Kendo UI UploadDropZone component for Angular]({% slug overview_upload %}).
*/
export class UploadDropZoneComponent extends DropZoneBase {
localization;
hostClass = true;
get dirAttribute() {
return this.direction;
}
/**
* Defines the id of the component.
* It is used to associate it with an existing Upload or FileSelect component.
*/
zoneId;
/**
* Defines the name for an existing icon in a Kendo UI theme.
* The icon is rendered inside the DropZone.
*/
icon;
/**
* Defines a CSS class or multiple classes separated by spaces,
* which are applied to a span element.
* Allows the usage of custom icons.
*/
iconClass;
/**
* Defines an SVGIcon to be rendered inside the DropZone.
* The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
*/
set svgIcon(icon) {
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;
}
get svgIcon() {
return this._svgIcon;
}
direction;
localizationChangeSubscription;
_svgIcon = uploadIcon;
constructor(element, renderer, localization) {
super(element, renderer, 'k-external-dropzone-hover');
this.localization = localization;
this.localizationChangeSubscription = this.localization.changes.subscribe(({ rtl }) => {
this.direction = rtl ? 'rtl' : 'ltr';
});
}
/**
* @hidden
*/
textFor(key) {
return this.localization.get(key);
}
/**
* @hidden
*/
get iconClasses() {
if (this.icon) {
return `${this.icon}`;
}
if (!this.icon && !this.iconClass) {
return 'upload';
}
}
ngOnDestroy() {
if (this.localizationChangeSubscription) {
this.localizationChangeSubscription.unsubscribe();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadDropZoneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadDropZoneComponent, isStandalone: true, selector: "kendo-uploaddropzone", inputs: { zoneId: "zoneId", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon" }, host: { properties: { "class.k-external-dropzone": "this.hostClass", "attr.dir": "this.dirAttribute" } }, providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.uploaddropzone'
}
], exportAs: ["kendoUploadDropZone"], usesInheritance: true, ngImport: i0, template: `
<ng-container kendoUploadDropZoneLocalizedMessages
i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
externalDropFilesHere='Drag and drop files here to upload'>
</ng-container>
<div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
<kendo-icon-wrapper
size="xxxlarge"
innerCssClass="k-dropzone-icon"
[name]="iconClasses"
[customFontClass]="iconClass"
[svgIcon]="svgIcon"
></kendo-icon-wrapper>
<span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
<span class="k-dropzone-note">
<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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadDropZoneComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoUploadDropZone',
providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.uploaddropzone'
}
],
selector: 'kendo-uploaddropzone',
template: `
<ng-container kendoUploadDropZoneLocalizedMessages
i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
externalDropFilesHere='Drag and drop files here to upload'>
</ng-container>
<div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
<kendo-icon-wrapper
size="xxxlarge"
innerCssClass="k-dropzone-icon"
[name]="iconClasses"
[customFontClass]="iconClass"
[svgIcon]="svgIcon"
></kendo-icon-wrapper>
<span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
<span class="k-dropzone-note">
<ng-content></ng-content>
</span>
</div>
`,
standalone: true,
imports: [LocalizedMessagesDirective, UploadDropZoneDirective, IconWrapperComponent]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-external-dropzone']
}], dirAttribute: [{
type: HostBinding,
args: ['attr.dir']
}], zoneId: [{
type: Input
}], icon: [{
type: Input
}], iconClass: [{
type: Input
}], svgIcon: [{
type: Input
}] } });