@progress/kendo-angular-upload 11.0.0-develop.96 → 11.0.0-develop.97
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dropzone.component.d.ts +10 -2
- package/esm2020/common/util.mjs +4 -1
- package/esm2020/dropzone.component.mjs +57 -35
- package/esm2020/fileselect.module.mjs +4 -3
- package/esm2020/package-metadata.mjs +1 -1
- package/esm2020/rendering/file-list-item-action-button.component.mjs +115 -82
- package/esm2020/rendering/file-list-multiple-items.component.mjs +20 -7
- package/esm2020/rendering/file-list-single-item.component.mjs +31 -7
- package/esm2020/rendering/upload-status-total.component.mjs +45 -18
- package/esm2020/shared.module.mjs +4 -3
- package/esm2020/types/file-groups.mjs +18 -0
- package/esm2020/upload.module.mjs +4 -3
- package/fesm2015/progress-kendo-angular-upload.mjs +284 -151
- package/fesm2020/progress-kendo-angular-upload.mjs +284 -151
- package/fileselect.module.d.ts +7 -6
- package/package.json +7 -6
- package/rendering/file-list-item-action-button.component.d.ts +6 -0
- package/rendering/file-list-multiple-items.component.d.ts +2 -0
- package/rendering/file-list-single-item.component.d.ts +2 -0
- package/rendering/upload-status-total.component.d.ts +7 -0
- package/schematics/ngAdd/index.js +2 -0
- package/shared.module.d.ts +2 -1
- package/types/file-groups.d.ts +21 -0
- package/upload.module.d.ts +7 -6
package/dropzone.component.d.ts
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
import { ElementRef, Renderer2 } from '@angular/core';
|
|
6
6
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
7
|
import { DropZoneBase } from './dropzone-base';
|
|
8
|
+
import { SVGIcon } from '@progress/kendo-svg-icons';
|
|
8
9
|
import * as i0 from "@angular/core";
|
|
9
10
|
/**
|
|
10
11
|
* Represents the [Kendo UI UploadDropZone component for Angular]({% slug overview_upload %}).
|
|
@@ -20,7 +21,7 @@ export declare class UploadDropZoneComponent extends DropZoneBase {
|
|
|
20
21
|
zoneId: string;
|
|
21
22
|
/**
|
|
22
23
|
* Defines the name for an existing icon in a Kendo UI theme.
|
|
23
|
-
* The icon is rendered inside the DropZone
|
|
24
|
+
* The icon is rendered inside the DropZone.
|
|
24
25
|
*/
|
|
25
26
|
icon: string;
|
|
26
27
|
/**
|
|
@@ -29,8 +30,15 @@ export declare class UploadDropZoneComponent extends DropZoneBase {
|
|
|
29
30
|
* Allows the usage of custom icons.
|
|
30
31
|
*/
|
|
31
32
|
iconClass: string;
|
|
33
|
+
/**
|
|
34
|
+
* Defines an SVGIcon to be rendered inside the DropZone.
|
|
35
|
+
* The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
|
|
36
|
+
*/
|
|
37
|
+
set svgIcon(icon: SVGIcon);
|
|
38
|
+
get svgIcon(): SVGIcon;
|
|
32
39
|
private direction;
|
|
33
40
|
private localizationChangeSubscription;
|
|
41
|
+
private _svgIcon;
|
|
34
42
|
constructor(element: ElementRef, renderer: Renderer2, localization: LocalizationService);
|
|
35
43
|
/**
|
|
36
44
|
* @hidden
|
|
@@ -42,5 +50,5 @@ export declare class UploadDropZoneComponent extends DropZoneBase {
|
|
|
42
50
|
get iconClasses(): string;
|
|
43
51
|
ngOnDestroy(): void;
|
|
44
52
|
static ɵfac: i0.ɵɵFactoryDeclaration<UploadDropZoneComponent, never>;
|
|
45
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<UploadDropZoneComponent, "kendo-uploaddropzone", ["kendoUploadDropZone"], { "zoneId": "zoneId"; "icon": "icon"; "iconClass": "iconClass"; }, {}, never, ["*"]>;
|
|
53
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<UploadDropZoneComponent, "kendo-uploaddropzone", ["kendoUploadDropZone"], { "zoneId": "zoneId"; "icon": "icon"; "iconClass": "iconClass"; "svgIcon": "svgIcon"; }, {}, never, ["*"]>;
|
|
46
54
|
}
|
package/esm2020/common/util.mjs
CHANGED
|
@@ -212,9 +212,12 @@ export const isFocusable = (element, checkVisibility = true) => {
|
|
|
212
212
|
* @hidden
|
|
213
213
|
*/
|
|
214
214
|
export const getFileGroupCssClass = (fileExtension) => {
|
|
215
|
-
const initial = '
|
|
215
|
+
const initial = 'file';
|
|
216
216
|
for (const group in fileGroupMap) {
|
|
217
217
|
if (fileGroupMap[group].indexOf(fileExtension) >= 0) {
|
|
218
|
+
if (group === 'discImage') {
|
|
219
|
+
return `${initial}-disc-image`;
|
|
220
|
+
}
|
|
218
221
|
return `${initial}-${group}`;
|
|
219
222
|
}
|
|
220
223
|
}
|
|
@@ -2,14 +2,15 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
|
|
5
|
+
import { Component, ElementRef, HostBinding, Input, isDevMode, Renderer2 } from '@angular/core';
|
|
6
6
|
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
7
|
import { DropZoneBase } from './dropzone-base';
|
|
8
|
+
import { uploadIcon } from '@progress/kendo-svg-icons';
|
|
8
9
|
import * as i0 from "@angular/core";
|
|
9
10
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
10
|
-
import * as i2 from "
|
|
11
|
-
import * as i3 from "./
|
|
12
|
-
import * as i4 from "
|
|
11
|
+
import * as i2 from "@progress/kendo-angular-icons";
|
|
12
|
+
import * as i3 from "./localization/localized-messages.directive";
|
|
13
|
+
import * as i4 from "./dropzone-external.directive";
|
|
13
14
|
/**
|
|
14
15
|
* Represents the [Kendo UI UploadDropZone component for Angular]({% slug overview_upload %}).
|
|
15
16
|
*/
|
|
@@ -18,6 +19,7 @@ export class UploadDropZoneComponent extends DropZoneBase {
|
|
|
18
19
|
super(element, renderer, 'k-external-dropzone-hover');
|
|
19
20
|
this.localization = localization;
|
|
20
21
|
this.hostClass = true;
|
|
22
|
+
this._svgIcon = uploadIcon;
|
|
21
23
|
this.localizationChangeSubscription = this.localization.changes.subscribe(({ rtl }) => {
|
|
22
24
|
this.direction = rtl ? 'rtl' : 'ltr';
|
|
23
25
|
});
|
|
@@ -25,6 +27,19 @@ export class UploadDropZoneComponent extends DropZoneBase {
|
|
|
25
27
|
get dirAttribute() {
|
|
26
28
|
return this.direction;
|
|
27
29
|
}
|
|
30
|
+
/**
|
|
31
|
+
* Defines an SVGIcon to be rendered inside the DropZone.
|
|
32
|
+
* The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
|
|
33
|
+
*/
|
|
34
|
+
set svgIcon(icon) {
|
|
35
|
+
if (isDevMode() && icon && this.icon && this.iconClass) {
|
|
36
|
+
throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
|
|
37
|
+
}
|
|
38
|
+
this._svgIcon = icon;
|
|
39
|
+
}
|
|
40
|
+
get svgIcon() {
|
|
41
|
+
return this._svgIcon;
|
|
42
|
+
}
|
|
28
43
|
/**
|
|
29
44
|
* @hidden
|
|
30
45
|
*/
|
|
@@ -36,12 +51,11 @@ export class UploadDropZoneComponent extends DropZoneBase {
|
|
|
36
51
|
*/
|
|
37
52
|
get iconClasses() {
|
|
38
53
|
if (this.icon) {
|
|
39
|
-
return
|
|
54
|
+
return `${this.icon}`;
|
|
40
55
|
}
|
|
41
|
-
if (this.iconClass) {
|
|
42
|
-
return
|
|
56
|
+
if (!this.icon && !this.iconClass) {
|
|
57
|
+
return 'upload';
|
|
43
58
|
}
|
|
44
|
-
return 'k-icon k-i-upload';
|
|
45
59
|
}
|
|
46
60
|
ngOnDestroy() {
|
|
47
61
|
if (this.localizationChangeSubscription) {
|
|
@@ -50,26 +64,29 @@ export class UploadDropZoneComponent extends DropZoneBase {
|
|
|
50
64
|
}
|
|
51
65
|
}
|
|
52
66
|
UploadDropZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadDropZoneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
-
UploadDropZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UploadDropZoneComponent, selector: "kendo-uploaddropzone", inputs: { zoneId: "zoneId", icon: "icon", iconClass: "iconClass" }, host: { properties: { "class.k-external-dropzone": "this.hostClass", "attr.dir": "this.dirAttribute" } }, providers: [
|
|
67
|
+
UploadDropZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UploadDropZoneComponent, 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: [
|
|
54
68
|
LocalizationService,
|
|
55
69
|
{
|
|
56
70
|
provide: L10N_PREFIX,
|
|
57
71
|
useValue: 'kendo.uploaddropzone'
|
|
58
72
|
}
|
|
59
73
|
], exportAs: ["kendoUploadDropZone"], usesInheritance: true, ngImport: i0, template: `
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
74
|
+
<ng-container kendoUploadDropZoneLocalizedMessages
|
|
75
|
+
i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
|
|
76
|
+
externalDropFilesHere='Drag and drop files here to upload'>
|
|
77
|
+
</ng-container>
|
|
78
|
+
<div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
|
|
79
|
+
<kendo-icon-wrapper
|
|
80
|
+
[name]="iconClasses"
|
|
81
|
+
[customFontClass]="iconClass"
|
|
82
|
+
[svgIcon]="svgIcon"
|
|
83
|
+
></kendo-icon-wrapper>
|
|
84
|
+
<span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
|
|
85
|
+
<span class="k-dropzone-note">
|
|
86
|
+
<ng-content></ng-content>
|
|
87
|
+
</span>
|
|
88
|
+
</div>
|
|
89
|
+
`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.LocalizedMessagesDirective, selector: "\n [kendoUploadLocalizedMessages],\n [kendoFileSelectLocalizedMessages],\n [kendoUploadDropZoneLocalizedMessages]\n " }, { type: i4.UploadDropZoneDirective, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: ["kendoUploadDropZone"] }] });
|
|
73
90
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadDropZoneComponent, decorators: [{
|
|
74
91
|
type: Component,
|
|
75
92
|
args: [{
|
|
@@ -83,19 +100,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
83
100
|
],
|
|
84
101
|
selector: 'kendo-uploaddropzone',
|
|
85
102
|
template: `
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
103
|
+
<ng-container kendoUploadDropZoneLocalizedMessages
|
|
104
|
+
i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
|
|
105
|
+
externalDropFilesHere='Drag and drop files here to upload'>
|
|
106
|
+
</ng-container>
|
|
107
|
+
<div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
|
|
108
|
+
<kendo-icon-wrapper
|
|
109
|
+
[name]="iconClasses"
|
|
110
|
+
[customFontClass]="iconClass"
|
|
111
|
+
[svgIcon]="svgIcon"
|
|
112
|
+
></kendo-icon-wrapper>
|
|
113
|
+
<span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
|
|
114
|
+
<span class="k-dropzone-note">
|
|
115
|
+
<ng-content></ng-content>
|
|
116
|
+
</span>
|
|
117
|
+
</div>
|
|
118
|
+
`
|
|
99
119
|
}]
|
|
100
120
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
|
|
101
121
|
type: HostBinding,
|
|
@@ -109,4 +129,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
109
129
|
type: Input
|
|
110
130
|
}], iconClass: [{
|
|
111
131
|
type: Input
|
|
132
|
+
}], svgIcon: [{
|
|
133
|
+
type: Input
|
|
112
134
|
}] } });
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { NgModule } from '@angular/core';
|
|
6
6
|
import { FileSelectComponent } from './fileselect.component';
|
|
7
|
+
import { IconsModule } from '@progress/kendo-angular-icons';
|
|
7
8
|
import { SharedModule, PUBLIC_DIRECTIVES } from './shared.module';
|
|
8
9
|
import * as i0 from "@angular/core";
|
|
9
10
|
import * as i1 from "./templates/file-template.directive";
|
|
@@ -20,8 +21,8 @@ const FILESELECT_DECLARATIONS = [
|
|
|
20
21
|
export class FileSelectModule {
|
|
21
22
|
}
|
|
22
23
|
FileSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
23
|
-
FileSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectModule, declarations: [FileSelectComponent], imports: [SharedModule], exports: [i1.FileTemplateDirective, i2.FileInfoTemplateDirective, i3.CustomMessagesComponent, i4.UploadDropZoneDirective, i5.UploadDropZoneComponent, FileSelectComponent] });
|
|
24
|
-
FileSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectModule, imports: [[SharedModule]] });
|
|
24
|
+
FileSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectModule, declarations: [FileSelectComponent], imports: [SharedModule, IconsModule], exports: [i1.FileTemplateDirective, i2.FileInfoTemplateDirective, i3.CustomMessagesComponent, i4.UploadDropZoneDirective, i5.UploadDropZoneComponent, FileSelectComponent] });
|
|
25
|
+
FileSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectModule, imports: [[SharedModule, IconsModule]] });
|
|
25
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectModule, decorators: [{
|
|
26
27
|
type: NgModule,
|
|
27
28
|
args: [{
|
|
@@ -30,6 +31,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
30
31
|
PUBLIC_DIRECTIVES,
|
|
31
32
|
FILESELECT_DECLARATIONS
|
|
32
33
|
],
|
|
33
|
-
imports: [SharedModule]
|
|
34
|
+
imports: [SharedModule, IconsModule]
|
|
34
35
|
}]
|
|
35
36
|
}] });
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-upload',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
12
|
+
publishDate: 1673459179,
|
|
13
13
|
version: '',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -7,11 +7,13 @@ import { FileState } from '../types';
|
|
|
7
7
|
import { UploadService } from '../upload.service';
|
|
8
8
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
9
9
|
import { NavigationService } from './../navigation.service';
|
|
10
|
+
import { arrowRotateCwSmallIcon, cancelIcon, pauseSmIcon, playSmIcon, xIcon } from '@progress/kendo-svg-icons';
|
|
10
11
|
import * as i0 from "@angular/core";
|
|
11
12
|
import * as i1 from "../upload.service";
|
|
12
13
|
import * as i2 from "@progress/kendo-angular-l10n";
|
|
13
14
|
import * as i3 from "./../navigation.service";
|
|
14
|
-
import * as i4 from "@angular
|
|
15
|
+
import * as i4 from "@progress/kendo-angular-icons";
|
|
16
|
+
import * as i5 from "@angular/common";
|
|
15
17
|
/**
|
|
16
18
|
* @hidden
|
|
17
19
|
*/
|
|
@@ -23,6 +25,11 @@ export class FileListItemActionButtonComponent {
|
|
|
23
25
|
this.actionFocused = false;
|
|
24
26
|
this.retryFocused = false;
|
|
25
27
|
this.pauseResumeFocused = false;
|
|
28
|
+
this.retrySVGIcon = arrowRotateCwSmallIcon;
|
|
29
|
+
this.playSVGIcon = playSmIcon;
|
|
30
|
+
this.pauseSVGIcon = pauseSmIcon;
|
|
31
|
+
this.cancelSVGIcon = cancelIcon;
|
|
32
|
+
this.deleteSVGIcon = xIcon;
|
|
26
33
|
}
|
|
27
34
|
onFocus(type) {
|
|
28
35
|
if (type === 'action') {
|
|
@@ -118,106 +125,132 @@ export class FileListItemActionButtonComponent {
|
|
|
118
125
|
}
|
|
119
126
|
FileListItemActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListItemActionButtonComponent, deps: [{ token: i1.UploadService }, { token: i2.LocalizationService }, { token: i3.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
120
127
|
FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: { file: "file", disabled: "disabled", progress: "progress" }, ngImport: i0, template: `
|
|
121
|
-
|
|
128
|
+
<span class="k-upload-actions">
|
|
122
129
|
<span class="k-upload-pct" *ngIf="isUploading || isPaused">{{progress}}%</span>
|
|
123
130
|
|
|
124
|
-
<button
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
131
|
+
<button
|
|
132
|
+
*ngIf="isFailed"
|
|
133
|
+
type="button"
|
|
134
|
+
class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
|
|
135
|
+
[ngClass]="{ 'k-focus': this.retryFocused }"
|
|
136
|
+
[attr.tabIndex]="-1"
|
|
137
|
+
|
|
138
|
+
(focus)="onFocus('retry')"
|
|
139
|
+
(blur)="onBlur('retry')"
|
|
140
|
+
(click)="onRetryClick()"
|
|
141
|
+
>
|
|
142
|
+
<kendo-icon-wrapper
|
|
143
|
+
name="refresh-sm"
|
|
144
|
+
[svgIcon]="retrySVGIcon"
|
|
145
|
+
innerCssClass="k-retry"
|
|
146
|
+
[attr.aria-label]="retryButtonTitle"
|
|
147
|
+
[attr.title]="retryButtonTitle"
|
|
148
|
+
></kendo-icon-wrapper>
|
|
134
149
|
</button>
|
|
135
150
|
|
|
136
|
-
<button
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
151
|
+
<button
|
|
152
|
+
*ngIf="isResumable"
|
|
153
|
+
type="button"
|
|
154
|
+
class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
|
|
155
|
+
[ngClass]="{ 'k-focus': this.pauseResumeFocused }"
|
|
156
|
+
[attr.tabIndex]="-1"
|
|
157
|
+
(focus)="onFocus('pauseResume')"
|
|
158
|
+
(blur)="onBlur('pauseResume')"
|
|
159
|
+
(click)="onPauseResumeClick()"
|
|
160
|
+
>
|
|
161
|
+
<kendo-icon-wrapper
|
|
162
|
+
[name]="isPaused ? 'play-sm' : 'pause-sm'"
|
|
163
|
+
[svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
|
|
164
|
+
[attr.aria-label]='pauseResumeButtonTitle'
|
|
165
|
+
[attr.title]='pauseResumeButtonTitle'
|
|
166
|
+
></kendo-icon-wrapper>
|
|
150
167
|
</button>
|
|
151
168
|
|
|
152
|
-
<button
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
[ngClass]="{
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
169
|
+
<button
|
|
170
|
+
*ngIf="isActionButtonVisible"
|
|
171
|
+
class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
|
|
172
|
+
type="button"
|
|
173
|
+
[attr.tabIndex]="-1"
|
|
174
|
+
(focus)="onFocus('action')"
|
|
175
|
+
(blur)="onBlur('action')"
|
|
176
|
+
[ngClass]="{ 'k-focus': this.actionFocused }"
|
|
177
|
+
(click)="onRemoveCancelClick($event)"
|
|
178
|
+
>
|
|
179
|
+
<kendo-icon-wrapper
|
|
180
|
+
[name]="isUploading ? 'cancel' : 'x'"
|
|
181
|
+
[svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
|
|
182
|
+
[innerCssClass]="!isUploading ? 'k-delete' : ''"
|
|
183
|
+
[attr.aria-label]='actionButtonTitle'
|
|
184
|
+
[attr.title]='actionButtonTitle'
|
|
185
|
+
></kendo-icon-wrapper>
|
|
166
186
|
</button>
|
|
167
|
-
|
|
168
|
-
`, isInline: true,
|
|
187
|
+
</span>
|
|
188
|
+
`, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
169
189
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListItemActionButtonComponent, decorators: [{
|
|
170
190
|
type: Component,
|
|
171
191
|
args: [{
|
|
172
192
|
selector: 'kendo-upload-file-list-item-action-button',
|
|
173
193
|
template: `
|
|
174
|
-
|
|
194
|
+
<span class="k-upload-actions">
|
|
175
195
|
<span class="k-upload-pct" *ngIf="isUploading || isPaused">{{progress}}%</span>
|
|
176
196
|
|
|
177
|
-
<button
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
197
|
+
<button
|
|
198
|
+
*ngIf="isFailed"
|
|
199
|
+
type="button"
|
|
200
|
+
class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
|
|
201
|
+
[ngClass]="{ 'k-focus': this.retryFocused }"
|
|
202
|
+
[attr.tabIndex]="-1"
|
|
203
|
+
|
|
204
|
+
(focus)="onFocus('retry')"
|
|
205
|
+
(blur)="onBlur('retry')"
|
|
206
|
+
(click)="onRetryClick()"
|
|
207
|
+
>
|
|
208
|
+
<kendo-icon-wrapper
|
|
209
|
+
name="refresh-sm"
|
|
210
|
+
[svgIcon]="retrySVGIcon"
|
|
211
|
+
innerCssClass="k-retry"
|
|
212
|
+
[attr.aria-label]="retryButtonTitle"
|
|
213
|
+
[attr.title]="retryButtonTitle"
|
|
214
|
+
></kendo-icon-wrapper>
|
|
187
215
|
</button>
|
|
188
216
|
|
|
189
|
-
<button
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
217
|
+
<button
|
|
218
|
+
*ngIf="isResumable"
|
|
219
|
+
type="button"
|
|
220
|
+
class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
|
|
221
|
+
[ngClass]="{ 'k-focus': this.pauseResumeFocused }"
|
|
222
|
+
[attr.tabIndex]="-1"
|
|
223
|
+
(focus)="onFocus('pauseResume')"
|
|
224
|
+
(blur)="onBlur('pauseResume')"
|
|
225
|
+
(click)="onPauseResumeClick()"
|
|
226
|
+
>
|
|
227
|
+
<kendo-icon-wrapper
|
|
228
|
+
[name]="isPaused ? 'play-sm' : 'pause-sm'"
|
|
229
|
+
[svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
|
|
230
|
+
[attr.aria-label]='pauseResumeButtonTitle'
|
|
231
|
+
[attr.title]='pauseResumeButtonTitle'
|
|
232
|
+
></kendo-icon-wrapper>
|
|
203
233
|
</button>
|
|
204
234
|
|
|
205
|
-
<button
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
[ngClass]="{
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
235
|
+
<button
|
|
236
|
+
*ngIf="isActionButtonVisible"
|
|
237
|
+
class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
|
|
238
|
+
type="button"
|
|
239
|
+
[attr.tabIndex]="-1"
|
|
240
|
+
(focus)="onFocus('action')"
|
|
241
|
+
(blur)="onBlur('action')"
|
|
242
|
+
[ngClass]="{ 'k-focus': this.actionFocused }"
|
|
243
|
+
(click)="onRemoveCancelClick($event)"
|
|
244
|
+
>
|
|
245
|
+
<kendo-icon-wrapper
|
|
246
|
+
[name]="isUploading ? 'cancel' : 'x'"
|
|
247
|
+
[svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
|
|
248
|
+
[innerCssClass]="!isUploading ? 'k-delete' : ''"
|
|
249
|
+
[attr.aria-label]='actionButtonTitle'
|
|
250
|
+
[attr.title]='actionButtonTitle'
|
|
251
|
+
></kendo-icon-wrapper>
|
|
219
252
|
</button>
|
|
220
|
-
|
|
253
|
+
</span>
|
|
221
254
|
`
|
|
222
255
|
}]
|
|
223
256
|
}], ctorParameters: function () { return [{ type: i1.UploadService }, { type: i2.LocalizationService }, { type: i3.NavigationService }]; }, propDecorators: { file: [{
|
|
@@ -10,14 +10,16 @@ import { UploadService } from '../upload.service';
|
|
|
10
10
|
import { isPresent } from '../common/util';
|
|
11
11
|
import { FileInfoTemplateDirective } from '../templates/file-info-template.directive';
|
|
12
12
|
import { animate, state, style, transition, trigger } from '@angular/animations';
|
|
13
|
+
import { copyIcon } from '@progress/kendo-svg-icons';
|
|
13
14
|
import * as i0 from "@angular/core";
|
|
14
15
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
15
16
|
import * as i2 from "../upload.service";
|
|
16
17
|
import * as i3 from "@progress/kendo-angular-progressbar";
|
|
17
|
-
import * as i4 from "
|
|
18
|
-
import * as i5 from "
|
|
19
|
-
import * as i6 from "@
|
|
20
|
-
import * as i7 from "
|
|
18
|
+
import * as i4 from "@progress/kendo-angular-icons";
|
|
19
|
+
import * as i5 from "./file-list-item-action-button.component";
|
|
20
|
+
import * as i6 from "@angular/common";
|
|
21
|
+
import * as i7 from "@progress/kendo-angular-buttons";
|
|
22
|
+
import * as i8 from "../templates/template-context.directive";
|
|
21
23
|
/**
|
|
22
24
|
* @hidden
|
|
23
25
|
*/
|
|
@@ -25,6 +27,7 @@ export class FileListMultipleItemsComponent extends FileListItemBase {
|
|
|
25
27
|
constructor(localization, uploadService) {
|
|
26
28
|
super(uploadService);
|
|
27
29
|
this.localization = localization;
|
|
30
|
+
this.copySVGIcon = copyIcon;
|
|
28
31
|
this.subscribeUploadProgress((args) => {
|
|
29
32
|
if (args.files[0].uid === this.files[0].uid) {
|
|
30
33
|
this.progressComplete = args.percentComplete;
|
|
@@ -72,7 +75,12 @@ FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
72
75
|
>
|
|
73
76
|
</kendo-progressbar>
|
|
74
77
|
<span class="k-file-icon-wrapper">
|
|
75
|
-
<
|
|
78
|
+
<kendo-icon-wrapper
|
|
79
|
+
name="copy"
|
|
80
|
+
[svgIcon]="copySVGIcon"
|
|
81
|
+
innerCssClass="k-file-icon"
|
|
82
|
+
>
|
|
83
|
+
</kendo-icon-wrapper>
|
|
76
84
|
</span>
|
|
77
85
|
<span class="k-multiple-files-wrapper">
|
|
78
86
|
<ng-container *ngIf="!fileInfoTemplate">
|
|
@@ -102,7 +110,7 @@ FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
102
110
|
[disabled]='disabled'
|
|
103
111
|
[progress]='progressComplete'>
|
|
104
112
|
</kendo-upload-file-list-item-action-button>
|
|
105
|
-
`, isInline: true, components: [{ type: i3.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: i4.FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], directives: [{ type:
|
|
113
|
+
`, isInline: true, components: [{ type: i3.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i5.FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i8.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
|
|
106
114
|
trigger('progressState', [
|
|
107
115
|
state('active', style({ opacity: 1 })),
|
|
108
116
|
state('inactive', style({ opacity: 0 })),
|
|
@@ -132,7 +140,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
132
140
|
>
|
|
133
141
|
</kendo-progressbar>
|
|
134
142
|
<span class="k-file-icon-wrapper">
|
|
135
|
-
<
|
|
143
|
+
<kendo-icon-wrapper
|
|
144
|
+
name="copy"
|
|
145
|
+
[svgIcon]="copySVGIcon"
|
|
146
|
+
innerCssClass="k-file-icon"
|
|
147
|
+
>
|
|
148
|
+
</kendo-icon-wrapper>
|
|
136
149
|
</span>
|
|
137
150
|
<span class="k-multiple-files-wrapper">
|
|
138
151
|
<ng-container *ngIf="!fileInfoTemplate">
|