@progress/kendo-angular-upload 11.0.0-develop.96 → 11.0.0-develop.98

package/esm2020/rendering/file-list-single-item.component.mjs

@@ -10,14 +10,17 @@ import { UploadService } from '../upload.service';
 import { getFileGroupCssClass, isPresent } from '../common/util';
 import { FileInfoTemplateDirective } from '../templates/file-info-template.directive';
 import { animate, state, style, transition, trigger } from '@angular/animations';
+import { fileIcon } from '@progress/kendo-svg-icons';
+import { fileGroupMap, fileSVGGroupMap } from '../types/file-groups';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../upload.service";
 import * as i3 from "@progress/kendo-angular-progressbar";
-import * as i4 from "./file-list-item-action-button.component";
-import * as i5 from "@angular/common";
-import * as i6 from "@progress/kendo-angular-buttons";
-import * as i7 from "../templates/template-context.directive";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "./file-list-item-action-button.component";
+import * as i6 from "@angular/common";
+import * as i7 from "@progress/kendo-angular-buttons";
+import * as i8 from "../templates/template-context.directive";
 /**
  * @hidden
  */
@@ -51,6 +54,17 @@ export class FileListSingleItemComponent extends FileListItemBase {
     get fileGroupClass() {
         return getFileGroupCssClass(this.file.extension ? this.file.extension : '');
     }
+    get fileSVGGroupIcon() {
+        const initial = fileIcon;
+        if (this.file.extension) {
+            for (const group in fileGroupMap) {
+                if (fileGroupMap[group].indexOf(this.file.extension) >= 0) {
+                    return fileSVGGroupMap[group];
+                }
+            }
+        }
+        return initial;
+    }
     get isUploadSuccessful() {
         return this.file.state === FileState.Uploaded;
     }
@@ -70,7 +84,12 @@ FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         >
         </kendo-progressbar>
         <span class="k-file-icon-wrapper"> 
-            <span class="k-file-icon k-icon" [ngClass]="fileGroupClass"></span>
+            <kendo-icon-wrapper
+                [name]="fileGroupClass"
+                [svgIcon]="fileSVGGroupIcon"
+                innerCssClass="k-file-icon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span class="k-file-info">
             <ng-container *ngIf="!fileInfoTemplate">
@@ -95,7 +114,7 @@ FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             [disabled]='disabled'
             [progress]='progressComplete'>
         </kendo-upload-file-list-item-action-button>
-    `, 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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
+    `, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i8.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
         trigger('progressState', [
             state('active', style({ opacity: 1 })),
             state('inactive', style({ opacity: 0 })),
@@ -125,7 +144,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         >
         </kendo-progressbar>
         <span class="k-file-icon-wrapper"> 
-            <span class="k-file-icon k-icon" [ngClass]="fileGroupClass"></span>
+            <kendo-icon-wrapper
+                [name]="fileGroupClass"
+                [svgIcon]="fileSVGGroupIcon"
+                innerCssClass="k-file-icon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span class="k-file-info">
             <ng-container *ngIf="!fileInfoTemplate">

package/esm2020/rendering/upload-status-total.component.mjs

@@ -6,15 +6,48 @@ import { Component, Input } from '@angular/core';
 import { FileMap } from '../types/file-map';
 import { FileState } from '../types';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { checkIcon, exclamationCircleIcon, pauseSmIcon, uploadIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-icons";
 /**
  * @hidden
  */
 export class UploadStatusTotalComponent {
     constructor(localization) {
         this.localization = localization;
+        this.checkmarkIcon = checkIcon;
+        this.exceptionSVGIcon = exclamationCircleIcon;
+        this.uploadSVGIcon = uploadIcon;
+        this.pauseSVGIcon = pauseSmIcon;
+    }
+    get iconClass() {
+        if (!this.isUploading && !this.isFailed) {
+            return 'checkmark';
+        }
+        if (!this.isUploading && this.isFailed) {
+            return 'exception';
+        }
+        if (this.isUploading) {
+            return 'upload';
+        }
+        if (this.isPaused) {
+            return 'pause-sm';
+        }
+    }
+    get SVGIconClass() {
+        if (!this.isUploading && !this.isFailed) {
+            return this.checkmarkIcon;
+        }
+        if (!this.isUploading && this.isFailed) {
+            return this.exceptionSVGIcon;
+        }
+        if (this.isUploading) {
+            return this.uploadSVGIcon;
+        }
+        if (this.isPaused) {
+            return this.pauseSVGIcon;
+        }
     }
     ngDoCheck() {
         this.isPaused = this.fileList.hasFileWithState([FileState.Paused]);
@@ -31,29 +64,23 @@ export class UploadStatusTotalComponent {
 }
 UploadStatusTotalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadStatusTotalComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 UploadStatusTotalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: { fileList: "fileList" }, ngImport: i0, template: `
-        <span class="k-icon"
-            [ngClass]="{
-                'k-i-checkmark': !this.isUploading && !this.isFailed,
-                'k-i-exception': !this.isUploading && this.isFailed,
-                'k-i-upload': this.isUploading,
-                'k-i-pause-sm': this.isPaused
-            }">
-        </span>
+        <kendo-icon-wrapper
+            [name]="iconClass"
+            [svgIcon]="SVGIconClass"
+        >
+        </kendo-icon-wrapper>
         {{statusText}}
-    `, isInline: true, directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadStatusTotalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-upload-status-total',
                     template: `
-        <span class="k-icon"
-            [ngClass]="{
-                'k-i-checkmark': !this.isUploading && !this.isFailed,
-                'k-i-exception': !this.isUploading && this.isFailed,
-                'k-i-upload': this.isUploading,
-                'k-i-pause-sm': this.isPaused
-            }">
-        </span>
+        <kendo-icon-wrapper
+            [name]="iconClass"
+            [svgIcon]="SVGIconClass"
+        >
+        </kendo-icon-wrapper>
         {{statusText}}
     `
                 }]

package/esm2020/shared.module.mjs

@@ -20,6 +20,7 @@ import { UploadDropZoneDirective } from './dropzone-external.directive';
 import { UploadDropZoneComponent } from './dropzone.component';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -63,7 +64,7 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FileListSingleItemComponent,
         FileSelectDirective,
         LocalizedMessagesDirective,
-        TemplateContextDirective], imports: [CommonModule, ButtonsModule, ProgressBarModule], exports: [FileTemplateDirective,
+        TemplateContextDirective], imports: [CommonModule, ButtonsModule, ProgressBarModule, IconsModule], exports: [FileTemplateDirective,
         FileInfoTemplateDirective,
         CustomMessagesComponent,
         UploadDropZoneDirective,
@@ -77,7 +78,7 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         LocalizedMessagesDirective,
         TemplateContextDirective, CommonModule,
         ButtonsModule] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[CommonModule, ButtonsModule, ProgressBarModule], CommonModule,
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[CommonModule, ButtonsModule, ProgressBarModule, IconsModule], CommonModule,
         ButtonsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
@@ -92,6 +93,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         CommonModule,
                         ButtonsModule
                     ],
-                    imports: [CommonModule, ButtonsModule, ProgressBarModule]
+                    imports: [CommonModule, ButtonsModule, ProgressBarModule, IconsModule]
                 }]
         }] });

package/esm2020/types/file-groups.mjs

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { fileAudioIcon, fileConfigIcon, fileDiscImageIcon, fileExcelIcon, fileImageIcon, filePdfIcon, filePresentationIcon, fileProgrammingIcon, fileTxtIcon, fileVideoIcon, fileZipIcon } from "@progress/kendo-svg-icons";
 /**
  * @hidden
  */
@@ -41,3 +42,20 @@ export const fileGroupMap = {
         ".dmg", ".iso", ".toast", ".vcd", ".bin", ".cue", ".mdf"
     ]
 };
+;
+/**
+ * @hidden
+ */
+export const fileSVGGroupMap = {
+    audio: fileAudioIcon,
+    video: fileVideoIcon,
+    image: fileImageIcon,
+    txt: fileTxtIcon,
+    presentation: filePresentationIcon,
+    data: fileExcelIcon,
+    programming: fileProgrammingIcon,
+    pdf: filePdfIcon,
+    config: fileConfigIcon,
+    zip: fileZipIcon,
+    discImage: fileDiscImageIcon
+};

package/esm2020/upload.module.mjs

@@ -6,6 +6,7 @@ import { NgModule } from '@angular/core';
 import { UploadComponent } from './upload.component';
 import { UploadActionButtonsComponent } from './rendering/upload-action-buttons.component';
 import { UploadStatusTotalComponent } from './rendering/upload-status-total.component';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { SharedModule, PUBLIC_DIRECTIVES } from './shared.module';
 import * as i0 from "@angular/core";
 import * as i1 from "./templates/file-template.directive";
@@ -26,10 +27,10 @@ export class UploadModule {
 UploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 UploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, declarations: [UploadComponent,
         UploadActionButtonsComponent,
-        UploadStatusTotalComponent], imports: [SharedModule], exports: [i1.FileTemplateDirective, i2.FileInfoTemplateDirective, i3.CustomMessagesComponent, i4.UploadDropZoneDirective, i5.UploadDropZoneComponent, UploadComponent,
+        UploadStatusTotalComponent], imports: [SharedModule, IconsModule], exports: [i1.FileTemplateDirective, i2.FileInfoTemplateDirective, i3.CustomMessagesComponent, i4.UploadDropZoneDirective, i5.UploadDropZoneComponent, UploadComponent,
         UploadActionButtonsComponent,
         UploadStatusTotalComponent] });
-UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, imports: [[SharedModule]] });
+UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, imports: [[SharedModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, decorators: [{
             type: NgModule,
             args: [{
@@ -38,6 +39,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         PUBLIC_DIRECTIVES,
                         UPLOAD_DECLARATIONS
                     ],
-                    imports: [SharedModule]
+                    imports: [SharedModule, IconsModule]
                 }]
         }] });