ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
1,464 lines • 50.6 kB
JavaScript
import { ENTER } from '@angular/cdk/keycodes';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';
import { animate, style, transition, trigger } from '@angular/animations';
import { Platform } from '@angular/cdk/platform';
import { __values, __assign, __spread, __decorate, __metadata } from 'tslib';
import { of, Observable, Subscription } from 'rxjs';
import { switchMap, filter } from 'rxjs/operators';
import { NzUpdateHostClassService, toBoolean, InputBoolean, InputNumber } from 'ng-zorro-antd/core';
import { CommonModule } from '@angular/common';
import { Component, ElementRef, HostListener, Input, Optional, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, Output, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzI18nService, NzI18nModule } from 'ng-zorro-antd/i18n';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzProgressModule } from 'ng-zorro-antd/progress';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzUploadBtnComponent = /** @class */ (function () {
// #endregion
function NzUploadBtnComponent(http, el, updateHostClassService) {
this.http = http;
this.el = el;
this.updateHostClassService = updateHostClassService;
this.reqs = {};
this.inited = false;
this.destroy = false;
// #region fields
this.classes = {};
// #region styles
this.prefixCls = 'ant-upload';
if (!http) {
throw new Error("Not found 'HttpClient', You can import 'HttpClientModule' in your root module.");
}
}
// #endregion
// #endregion
/**
* @return {?}
*/
NzUploadBtnComponent.prototype.onClick =
// #endregion
/**
* @return {?}
*/
function () {
if (this.options.disabled || !this.options.openFileDialogOnClick) {
return;
}
((/** @type {?} */ (this.file.nativeElement))).click();
};
/**
* @param {?} e
* @return {?}
*/
NzUploadBtnComponent.prototype.onKeyDown = /**
* @param {?} e
* @return {?}
*/
function (e) {
if (this.options.disabled) {
return;
}
if (e.key === 'Enter' || e.keyCode === ENTER) {
this.onClick();
}
};
/**
* @param {?} e
* @return {?}
*/
NzUploadBtnComponent.prototype.onFileDrop = /**
* @param {?} e
* @return {?}
*/
function (e) {
var _this = this;
if (this.options.disabled || e.type === 'dragover') {
e.preventDefault();
return;
}
if (this.options.directory) {
this.traverseFileTree((/** @type {?} */ (e.dataTransfer)).items);
}
else {
/** @type {?} */
var files = Array.prototype.slice
.call((/** @type {?} */ (e.dataTransfer)).files)
.filter((/**
* @param {?} file
* @return {?}
*/
function (file) { return _this.attrAccept(file, _this.options.accept); }));
if (files.length) {
this.uploadFiles(files);
}
}
e.preventDefault();
};
/**
* @param {?} e
* @return {?}
*/
NzUploadBtnComponent.prototype.onChange = /**
* @param {?} e
* @return {?}
*/
function (e) {
if (this.options.disabled) {
return;
}
/** @type {?} */
var hie = (/** @type {?} */ (e.target));
this.uploadFiles((/** @type {?} */ (hie.files)));
hie.value = '';
};
/**
* @private
* @param {?} files
* @return {?}
*/
NzUploadBtnComponent.prototype.traverseFileTree = /**
* @private
* @param {?} files
* @return {?}
*/
function (files) {
var _this = this;
var e_1, _a;
// tslint:disable-next-line:no-any
/** @type {?} */
var _traverseFileTree = (/**
* @param {?} item
* @param {?} path
* @return {?}
*/
function (item, path) {
if (item.isFile) {
item.file((/**
* @param {?} file
* @return {?}
*/
function (file) {
if (_this.attrAccept(file, _this.options.accept)) {
_this.uploadFiles([file]);
}
}));
}
else if (item.isDirectory) {
/** @type {?} */
var dirReader = item.createReader();
// tslint:disable-next-line:no-any
dirReader.readEntries((/**
* @param {?} entries
* @return {?}
*/
function (entries) {
var e_2, _a;
try {
for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
var entrieItem = entries_1_1.value;
_traverseFileTree(entrieItem, "" + path + item.name + "/");
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
}
finally { if (e_2) throw e_2.error; }
}
}));
}
});
try {
// tslint:disable-next-line:no-any
for (var _b = __values((/** @type {?} */ (files))), _c = _b.next(); !_c.done; _c = _b.next()) {
var file = _c.value;
_traverseFileTree(file.webkitGetAsEntry(), '');
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
};
/**
* @private
* @param {?} file
* @param {?=} acceptedFiles
* @return {?}
*/
NzUploadBtnComponent.prototype.attrAccept = /**
* @private
* @param {?} file
* @param {?=} acceptedFiles
* @return {?}
*/
function (file, acceptedFiles) {
if (file && acceptedFiles) {
/** @type {?} */
var acceptedFilesArray = Array.isArray(acceptedFiles) ? acceptedFiles : acceptedFiles.split(',');
/** @type {?} */
var fileName_1 = '' + file.name;
/** @type {?} */
var mimeType_1 = '' + file.type;
/** @type {?} */
var baseMimeType_1 = mimeType_1.replace(/\/.*$/, '');
return acceptedFilesArray.some((/**
* @param {?} type
* @return {?}
*/
function (type) {
/** @type {?} */
var validType = type.trim();
if (validType.charAt(0) === '.') {
return (fileName_1
.toLowerCase()
.indexOf(validType.toLowerCase(), fileName_1.toLowerCase().length - validType.toLowerCase().length) !== -1);
}
else if (/\/\*$/.test(validType)) {
// This is something like a image/* mime type
return baseMimeType_1 === validType.replace(/\/.*$/, '');
}
return mimeType_1 === validType;
}));
}
return true;
};
/**
* @private
* @param {?} file
* @return {?}
*/
NzUploadBtnComponent.prototype.attachUid = /**
* @private
* @param {?} file
* @return {?}
*/
function (file) {
if (!file.uid) {
file.uid = Math.random()
.toString(36)
.substring(2);
}
return file;
};
/**
* @param {?} fileList
* @return {?}
*/
NzUploadBtnComponent.prototype.uploadFiles = /**
* @param {?} fileList
* @return {?}
*/
function (fileList) {
var _this = this;
/** @type {?} */
var filters$ = of(Array.prototype.slice.call(fileList));
if (this.options.filters) {
this.options.filters.forEach((/**
* @param {?} f
* @return {?}
*/
function (f) {
filters$ = filters$.pipe(switchMap((/**
* @param {?} list
* @return {?}
*/
function (list) {
/** @type {?} */
var fnRes = f.fn(list);
return fnRes instanceof Observable ? fnRes : of(fnRes);
})));
}));
}
filters$.subscribe((/**
* @param {?} list
* @return {?}
*/
function (list) {
list.forEach((/**
* @param {?} file
* @return {?}
*/
function (file) {
_this.attachUid(file);
_this.upload(file, list);
}));
}), (/**
* @param {?} e
* @return {?}
*/
function (e) {
console.warn("Unhandled upload filter error", e);
}));
};
/**
* @private
* @param {?} file
* @param {?} fileList
* @return {?}
*/
NzUploadBtnComponent.prototype.upload = /**
* @private
* @param {?} file
* @param {?} fileList
* @return {?}
*/
function (file, fileList) {
var _this = this;
if (!this.options.beforeUpload) {
return this.post(file);
}
/** @type {?} */
var before = this.options.beforeUpload(file, fileList);
if (before instanceof Observable) {
before.subscribe((/**
* @param {?} processedFile
* @return {?}
*/
function (processedFile) {
/** @type {?} */
var processedFileType = Object.prototype.toString.call(processedFile);
if (processedFileType === '[object File]' || processedFileType === '[object Blob]') {
_this.attachUid(processedFile);
_this.post(processedFile);
}
else if (typeof processedFile === 'boolean' && processedFile !== false) {
_this.post(file);
}
}), (/**
* @param {?} e
* @return {?}
*/
function (e) {
console.warn("Unhandled upload beforeUpload error", e);
}));
}
else if (before !== false) {
return this.post(file);
}
};
/**
* @private
* @param {?} file
* @return {?}
*/
NzUploadBtnComponent.prototype.post = /**
* @private
* @param {?} file
* @return {?}
*/
function (file) {
var _this = this;
if (this.destroy) {
return;
}
/** @type {?} */
var opt = this.options;
var uid = file.uid;
var data = opt.data, headers = opt.headers;
if (typeof data === 'function') {
data = ((/** @type {?} */ (data)))(file);
}
if (typeof headers === 'function') {
headers = ((/** @type {?} */ (headers)))(file);
}
/** @type {?} */
var args = {
action: opt.action,
name: opt.name,
headers: headers,
file: file,
data: data,
withCredentials: opt.withCredentials,
onProgress: opt.onProgress
? (/**
* @param {?} e
* @return {?}
*/
function (e) {
(/** @type {?} */ (opt.onProgress))(e, file);
})
: undefined,
onSuccess: (/**
* @param {?} ret
* @param {?} xhr
* @return {?}
*/
function (ret, xhr) {
_this.clean(uid);
(/** @type {?} */ (opt.onSuccess))(ret, file, xhr);
}),
onError: (/**
* @param {?} xhr
* @return {?}
*/
function (xhr) {
_this.clean(uid);
(/** @type {?} */ (opt.onError))(xhr, file);
})
};
/** @type {?} */
var req$ = (opt.customRequest || this.xhr).call(this, args);
if (!(req$ instanceof Subscription)) {
console.warn("Must return Subscription type in '[nzCustomRequest]' property");
}
this.reqs[uid] = req$;
(/** @type {?} */ (opt.onStart))(file);
};
/**
* @private
* @param {?} args
* @return {?}
*/
NzUploadBtnComponent.prototype.xhr = /**
* @private
* @param {?} args
* @return {?}
*/
function (args) {
var _this = this;
/** @type {?} */
var formData = new FormData();
// tslint:disable-next-line:no-any
formData.append((/** @type {?} */ (args.name)), (/** @type {?} */ (args.file)));
if (args.data) {
Object.keys(args.data).map((/**
* @param {?} key
* @return {?}
*/
function (key) {
formData.append(key, (/** @type {?} */ (args.data))[key]);
}));
}
if (!args.headers) {
args.headers = {};
}
if (args.headers['X-Requested-With'] !== null) {
args.headers['X-Requested-With'] = "XMLHttpRequest";
}
else {
delete args.headers['X-Requested-With'];
}
/** @type {?} */
var req = new HttpRequest('POST', (/** @type {?} */ (args.action)), formData, {
reportProgress: true,
withCredentials: args.withCredentials,
headers: new HttpHeaders(args.headers)
});
return this.http.request(req).subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
if (event.type === HttpEventType.UploadProgress) {
if ((/** @type {?} */ (event.total)) > 0) {
// tslint:disable-next-line:no-any
((/** @type {?} */ (event))).percent = (event.loaded / (/** @type {?} */ (event.total))) * 100;
}
(/** @type {?} */ (args.onProgress))(event, args.file);
}
else if (event instanceof HttpResponse) {
(/** @type {?} */ (args.onSuccess))(event.body, args.file, event);
}
}), (/**
* @param {?} err
* @return {?}
*/
function (err) {
_this.abort(args.file);
(/** @type {?} */ (args.onError))(err, args.file);
}));
};
/**
* @private
* @param {?} uid
* @return {?}
*/
NzUploadBtnComponent.prototype.clean = /**
* @private
* @param {?} uid
* @return {?}
*/
function (uid) {
/** @type {?} */
var req$ = this.reqs[uid];
if (req$ instanceof Subscription) {
req$.unsubscribe();
}
delete this.reqs[uid];
};
/**
* @param {?=} file
* @return {?}
*/
NzUploadBtnComponent.prototype.abort = /**
* @param {?=} file
* @return {?}
*/
function (file) {
var _this = this;
if (file) {
this.clean(file && file.uid);
}
else {
Object.keys(this.reqs).forEach((/**
* @param {?} uid
* @return {?}
*/
function (uid) { return _this.clean(uid); }));
}
};
/**
* @private
* @return {?}
*/
NzUploadBtnComponent.prototype.setClassMap = /**
* @private
* @return {?}
*/
function () {
var _a;
/** @type {?} */
var classMap = __assign((_a = {}, _a[this.prefixCls] = true, _a[this.prefixCls + "-disabled"] = this.options.disabled, _a), this.classes);
this.updateHostClassService.updateHostClass(this.el.nativeElement, classMap);
};
/**
* @return {?}
*/
NzUploadBtnComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.inited = true;
this.setClassMap();
};
/**
* @return {?}
*/
NzUploadBtnComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
if (this.inited) {
this.setClassMap();
}
};
/**
* @return {?}
*/
NzUploadBtnComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy = true;
this.abort();
};
NzUploadBtnComponent.decorators = [
{ type: Component, args: [{
selector: '[nz-upload-btn]',
exportAs: 'nzUploadBtn',
template: "<input type=\"file\" #file (change)=\"onChange($event)\"\n [attr.accept]=\"options.accept\"\n [attr.directory]=\"options.directory ? 'directory': null\"\n [attr.webkitdirectory]=\"options.directory ? 'webkitdirectory': null\"\n [multiple]=\"options.multiple\" style=\"display: none;\">\n<ng-content></ng-content>",
host: {
'[attr.tabindex]': '"0"',
'[attr.role]': '"button"'
},
providers: [NzUpdateHostClassService],
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
NzUploadBtnComponent.ctorParameters = function () { return [
{ type: HttpClient, decorators: [{ type: Optional }] },
{ type: ElementRef },
{ type: NzUpdateHostClassService }
]; };
NzUploadBtnComponent.propDecorators = {
file: [{ type: ViewChild, args: ['file',] }],
classes: [{ type: Input }],
options: [{ type: Input }],
onClick: [{ type: HostListener, args: ['click',] }],
onKeyDown: [{ type: HostListener, args: ['keydown', ['$event'],] }],
onFileDrop: [{ type: HostListener, args: ['drop', ['$event'],] }, { type: HostListener, args: ['dragover', ['$event'],] }]
};
return NzUploadBtnComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzUploadListComponent = /** @class */ (function () {
// #endregion
function NzUploadListComponent(el, cdr, updateHostClassService, platform) {
this.el = el;
this.cdr = cdr;
this.updateHostClassService = updateHostClassService;
this.platform = platform;
this.imageTypes = ['image', 'webp', 'png', 'svg', 'gif', 'jpg', 'jpeg', 'bmp'];
// #region fields
// tslint:disable-next-line:no-any
this.locale = {};
// #endregion
// #region styles
this.prefixCls = 'ant-upload-list';
}
Object.defineProperty(NzUploadListComponent.prototype, "showPic", {
get: /**
* @return {?}
*/
function () {
return this.listType === 'picture' || this.listType === 'picture-card';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NzUploadListComponent.prototype, "items", {
get: /**
* @return {?}
*/
function () {
return this._items;
},
set: /**
* @param {?} list
* @return {?}
*/
function (list) {
list.forEach((/**
* @param {?} file
* @return {?}
*/
function (file) {
file.linkProps = typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
}));
this._items = list;
},
enumerable: true,
configurable: true
});
/**
* @private
* @return {?}
*/
NzUploadListComponent.prototype.setClassMap = /**
* @private
* @return {?}
*/
function () {
var _a;
/** @type {?} */
var classMap = (_a = {},
_a[this.prefixCls] = true,
_a[this.prefixCls + "-" + this.listType] = true,
_a);
this.updateHostClassService.updateHostClass(this.el.nativeElement, classMap);
};
// #endregion
// #region render
// #endregion
// #region render
/**
* @private
* @param {?} url
* @return {?}
*/
NzUploadListComponent.prototype.extname =
// #endregion
// #region render
/**
* @private
* @param {?} url
* @return {?}
*/
function (url) {
/** @type {?} */
var temp = url.split('/');
/** @type {?} */
var filename = temp[temp.length - 1];
/** @type {?} */
var filenameWithoutSuffix = filename.split(/#|\?/)[0];
return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [''])[0];
};
/**
* @param {?} file
* @return {?}
*/
NzUploadListComponent.prototype.isImageUrl = /**
* @param {?} file
* @return {?}
*/
function (file) {
if (~this.imageTypes.indexOf(file.type)) {
return true;
}
/** @type {?} */
var url = (/** @type {?} */ ((file.thumbUrl || file.url || '')));
if (!url) {
return false;
}
/** @type {?} */
var extension = this.extname(url);
if (/^data:image\//.test(url) || /(webp|svg|png|gif|jpg|jpeg|bmp)$/i.test(extension)) {
return true;
}
else if (/^data:/.test(url)) {
// other file types of base64
return false;
}
else if (extension) {
// other file types which have extension
return false;
}
return true;
};
/**
* @private
* @param {?} file
* @param {?} callback
* @return {?}
*/
NzUploadListComponent.prototype.previewFile = /**
* @private
* @param {?} file
* @param {?} callback
* @return {?}
*/
function (file, callback) {
if (file.type && this.imageTypes.indexOf(file.type) === -1) {
callback('');
}
/** @type {?} */
var reader = new FileReader();
// https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
reader.onloadend = (/**
* @return {?}
*/
function () { return callback((/** @type {?} */ (reader.result))); });
reader.readAsDataURL(file);
};
/**
* @private
* @return {?}
*/
NzUploadListComponent.prototype.genThumb = /**
* @private
* @return {?}
*/
function () {
var _this = this;
if (!this.platform.isBrowser) {
return;
}
// tslint:disable-next-line:no-any
/** @type {?} */
var win = (/** @type {?} */ (window));
if (!this.showPic ||
typeof document === 'undefined' ||
typeof win === 'undefined' ||
!win.FileReader ||
!win.File) {
return;
}
this.items
.filter((/**
* @param {?} file
* @return {?}
*/
function (file) { return file.originFileObj instanceof File && file.thumbUrl === undefined; }))
.forEach((/**
* @param {?} file
* @return {?}
*/
function (file) {
file.thumbUrl = '';
_this.previewFile((/** @type {?} */ (file.originFileObj)), (/**
* @param {?} previewDataUrl
* @return {?}
*/
function (previewDataUrl) {
file.thumbUrl = previewDataUrl;
_this.detectChanges();
}));
}));
};
/**
* @param {?} file
* @return {?}
*/
NzUploadListComponent.prototype.showPreview = /**
* @param {?} file
* @return {?}
*/
function (file) {
var _a = this.icons, showPreviewIcon = _a.showPreviewIcon, hidePreviewIconInNonImage = _a.hidePreviewIconInNonImage;
if (!showPreviewIcon) {
return false;
}
return this.isImageUrl(file) ? true : !hidePreviewIconInNonImage;
};
/**
* @param {?} file
* @param {?} e
* @return {?}
*/
NzUploadListComponent.prototype.handlePreview = /**
* @param {?} file
* @param {?} e
* @return {?}
*/
function (file, e) {
if (!this.onPreview) {
return;
}
e.preventDefault();
return this.onPreview(file);
};
/**
* @param {?} file
* @param {?} e
* @return {?}
*/
NzUploadListComponent.prototype.handleRemove = /**
* @param {?} file
* @param {?} e
* @return {?}
*/
function (file, e) {
e.preventDefault();
if (this.onRemove) {
this.onRemove(file);
}
return;
};
/**
* @return {?}
*/
NzUploadListComponent.prototype.detectChanges = /**
* @return {?}
*/
function () {
this.cdr.detectChanges();
};
/**
* @return {?}
*/
NzUploadListComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.setClassMap();
this.genThumb();
};
NzUploadListComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-upload-list',
exportAs: 'nzUploadList',
template: "<div *ngFor=\"let file of items\" class=\"ant-upload-list-item ant-upload-list-item-{{file.status}}\" @itemState>\n <ng-template #icon>\n <ng-container *ngIf=\"showPic; else noPicTpl\">\n <div *ngIf=\"listType === 'picture-card' && file.status === 'uploading'; else thumbUrlCheck\" class=\"ant-upload-list-item-uploading-text\">{{ locale.uploading }}</div>\n </ng-container>\n <ng-template #thumbUrlCheck>\n <i *ngIf=\"!file.thumbUrl && !file.url; else thumbTpl\"\n class=\"ant-upload-list-item-thumbnail\" nz-icon nzType=\"picture\" theme=\"twotone\"></i>\n </ng-template>\n <ng-template #thumbTpl>\n <a class=\"ant-upload-list-item-thumbnail\" target=\"_blank\" rel=\"noopener noreferrer\"\n [href]=\"file.thumbUrl || file.url\"\n (click)=\"handlePreview(file, $event)\">\n <img *ngIf=\"isImageUrl(file); else noThumbTpl\" [src]=\"file.thumbUrl || file.url\" [attr.alt]=\"file.name\" />\n </a>\n </ng-template>\n <ng-template #noThumbTpl><i class=\"ant-upload-list-item-icon\" nz-icon nzType=\"file\" theme=\"twotone\"></i></ng-template>\n <ng-template #noPicTpl><i nz-icon [nzType]=\"file.status === 'uploading' ? 'loading' : 'paper-clip'\"></i></ng-template>\n </ng-template>\n <ng-template #preview>\n <ng-container *ngIf=\"file.url; else prevText\">\n <a [href]=\"file.thumbUrl || file.url\" target=\"_blank\" rel=\"noopener noreferrer\" [attr.download]=\"file.linkProps && file.linkProps.download\"\n (click)=\"handlePreview(file, $event)\" class=\"ant-upload-list-item-name\" title=\"{{ file.name }}\">{{ file.name }}</a>\n </ng-container>\n <ng-template #prevText>\n <span (click)=\"handlePreview(file, $event)\" class=\"ant-upload-list-item-name\" title=\"{{ file.name }}\">{{ file.name }}</span>\n </ng-template>\n </ng-template>\n <div class=\"ant-upload-list-item-info\">\n <span *ngIf=\"file.status === 'error'\" nz-tooltip [nzTitle]=\"file.message\">\n <ng-template [ngTemplateOutlet]=\"icon\"></ng-template>\n <ng-template [ngTemplateOutlet]=\"preview\"></ng-template>\n </span>\n <span *ngIf=\"file.status !== 'error'\">\n <ng-template [ngTemplateOutlet]=\"icon\"></ng-template>\n <ng-template [ngTemplateOutlet]=\"preview\"></ng-template>\n </span>\n </div>\n <ng-container *ngIf=\"listType === 'picture-card' && file.status !== 'uploading'; else close\">\n <span class=\"ant-upload-list-item-actions\">\n <a *ngIf=\"showPreview(file)\" [href]=\"file.thumbUrl || file.url\"\n target=\"_blank\" rel=\"noopener noreferrer\"\n title=\"{{ locale.previewFile }}\"\n [ngStyle]=\"!(file.url || file.thumbUrl) && {'opacity': .5, 'pointer-events': 'none'}\"\n (click)=\"handlePreview(file, $event)\">\n <i nz-icon nzType=\"eye-o\"></i>\n </a>\n <i *ngIf=\"icons.showRemoveIcon\" (click)=\"handleRemove(file, $event)\" nz-icon nzType=\"delete\" title=\"{{ locale.removeFile }}\"></i>\n </span>\n </ng-container>\n <ng-template #close>\n <i *ngIf=\"icons.showRemoveIcon\" (click)=\"handleRemove(file, $event)\" nz-icon nzType=\"close\" title=\"{{ locale.removeFile }}\"></i>\n </ng-template>\n <div *ngIf=\"file.status === 'uploading'\" class=\"ant-upload-list-item-progress\">\n <nz-progress [nzPercent]=\"file.percent\" [nzShowInfo]=\"false\" [nzStrokeWidth]=\"2\"></nz-progress>\n </div>\n</div>",
providers: [NzUpdateHostClassService],
animations: [
trigger('itemState', [
transition(':enter', [
style({ height: '0', width: '0', opacity: 0 }),
animate(150, style({ height: '*', width: '*', opacity: 1 }))
]),
transition(':leave', [animate(150, style({ height: '0', width: '0', opacity: 0 }))])
])
],
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
}] }
];
/** @nocollapse */
NzUploadListComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: ChangeDetectorRef },
{ type: NzUpdateHostClassService },
{ type: Platform }
]; };
NzUploadListComponent.propDecorators = {
locale: [{ type: Input }],
listType: [{ type: Input }],
items: [{ type: Input }],
icons: [{ type: Input }],
onPreview: [{ type: Input }],
onRemove: [{ type: Input }]
};
return NzUploadListComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzUploadComponent = /** @class */ (function () {
// #endregion
function NzUploadComponent(cdr, i18n) {
var _this = this;
this.cdr = cdr;
this.i18n = i18n;
// tslint:disable-next-line:no-any
this.locale = {};
// #region fields
this.nzType = 'select';
this.nzLimit = 0;
this.nzSize = 0;
this.nzDirectory = false;
this.nzOpenFileDialogOnClick = true;
this.nzFilter = [];
this.nzFileList = [];
this.nzDisabled = false;
this.nzListType = 'text';
this.nzMultiple = false;
this.nzName = 'file';
this._showUploadList = true;
this.nzShowButton = true;
this.nzWithCredentials = false;
this.nzChange = new EventEmitter();
this.nzFileListChange = new EventEmitter();
this.onStart = (/**
* @param {?} file
* @return {?}
*/
function (file) {
if (!_this.nzFileList) {
_this.nzFileList = [];
}
/** @type {?} */
var targetItem = _this.fileToObject(file);
targetItem.status = 'uploading';
_this.nzFileList = _this.nzFileList.concat(targetItem);
_this.nzFileListChange.emit(_this.nzFileList);
_this.nzChange.emit({ file: targetItem, fileList: _this.nzFileList, type: 'start' });
_this.detectChangesList();
});
this.onProgress = (/**
* @param {?} e
* @param {?} file
* @return {?}
*/
function (e, file) {
/** @type {?} */
var fileList = _this.nzFileList;
/** @type {?} */
var targetItem = _this.getFileItem(file, fileList);
targetItem.percent = e.percent;
_this.nzChange.emit({
event: e,
file: __assign({}, targetItem),
fileList: _this.nzFileList,
type: 'progress'
});
_this.detectChangesList();
});
this.onSuccess = (/**
* @param {?} res
* @param {?} file
* @return {?}
*/
function (res, file) {
/** @type {?} */
var fileList = _this.nzFileList;
/** @type {?} */
var targetItem = _this.getFileItem(file, fileList);
targetItem.status = 'done';
targetItem.response = res;
_this.nzChange.emit({
file: __assign({}, targetItem),
fileList: fileList,
type: 'success'
});
_this.detectChangesList();
});
this.onError = (/**
* @param {?} err
* @param {?} file
* @return {?}
*/
function (err, file) {
/** @type {?} */
var fileList = _this.nzFileList;
/** @type {?} */
var targetItem = _this.getFileItem(file, fileList);
targetItem.error = err;
targetItem.status = 'error';
targetItem.message = _this.genErr(targetItem);
_this.nzChange.emit({
file: __assign({}, targetItem),
fileList: fileList,
type: 'error'
});
_this.detectChangesList();
});
this.onRemove = (/**
* @param {?} file
* @return {?}
*/
function (file) {
_this.uploadComp.abort(file);
file.status = 'removed';
/** @type {?} */
var fnRes = typeof _this.nzRemove === 'function' ? _this.nzRemove(file) : _this.nzRemove == null ? true : _this.nzRemove;
(fnRes instanceof Observable ? fnRes : of(fnRes)).pipe(filter((/**
* @param {?} res
* @return {?}
*/
function (res) { return res; }))).subscribe((/**
* @return {?}
*/
function () {
_this.nzFileList = _this.removeFileItem(file, _this.nzFileList);
_this.nzChange.emit({
file: file,
fileList: _this.nzFileList,
type: 'removed'
});
_this.nzFileListChange.emit(_this.nzFileList);
_this.cdr.detectChanges();
}));
});
// #endregion
// #region styles
this.prefixCls = 'ant-upload';
this.classList = [];
}
Object.defineProperty(NzUploadComponent.prototype, "nzShowUploadList", {
get: /**
* @return {?}
*/
function () {
return this._showUploadList;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._showUploadList = typeof value === 'boolean' ? toBoolean(value) : value;
},
enumerable: true,
configurable: true
});
/**
* @private
* @template THIS
* @this {THIS}
* @return {THIS}
*/
NzUploadComponent.prototype.zipOptions = /**
* @private
* @template THIS
* @this {THIS}
* @return {THIS}
*/
function () {
var _this = this;
if (typeof (/** @type {?} */ (this)).nzShowUploadList === 'boolean' && (/** @type {?} */ (this)).nzShowUploadList) {
(/** @type {?} */ (this)).nzShowUploadList = {
showPreviewIcon: true,
showRemoveIcon: true,
hidePreviewIconInNonImage: false
};
}
// filters
/** @type {?} */
var filters = (/** @type {?} */ (this)).nzFilter.slice();
if ((/** @type {?} */ (this)).nzMultiple && (/** @type {?} */ (this)).nzLimit > 0 && filters.findIndex((/**
* @param {?} w
* @return {?}
*/
function (w) { return w.name === 'limit'; })) === -1) {
filters.push({
name: 'limit',
fn: (/**
* @param {?} fileList
* @return {?}
*/
function (fileList) { return fileList.slice(-(/** @type {?} */ (_this)).nzLimit); })
});
}
if ((/** @type {?} */ (this)).nzSize > 0 && filters.findIndex((/**
* @param {?} w
* @return {?}
*/
function (w) { return w.name === 'size'; })) === -1) {
filters.push({
name: 'size',
fn: (/**
* @param {?} fileList
* @return {?}
*/
function (fileList) { return fileList.filter((/**
* @param {?} w
* @return {?}
*/
function (w) { return w.size / 1024 <= (/** @type {?} */ (_this)).nzSize; })); })
});
}
if ((/** @type {?} */ (this)).nzFileType && (/** @type {?} */ (this)).nzFileType.length > 0 && filters.findIndex((/**
* @param {?} w
* @return {?}
*/
function (w) { return w.name === 'type'; })) === -1) {
/** @type {?} */
var types_1 = (/** @type {?} */ (this)).nzFileType.split(',');
filters.push({
name: 'type',
fn: (/**
* @param {?} fileList
* @return {?}
*/
function (fileList) { return fileList.filter((/**
* @param {?} w
* @return {?}
*/
function (w) { return ~types_1.indexOf(w.type); })); })
});
}
(/** @type {?} */ (this))._btnOptions = {
disabled: (/** @type {?} */ (this)).nzDisabled,
accept: (/** @type {?} */ (this)).nzAccept,
action: (/** @type {?} */ (this)).nzAction,
directory: (/** @type {?} */ (this)).nzDirectory,
openFileDialogOnClick: (/** @type {?} */ (this)).nzOpenFileDialogOnClick,
beforeUpload: (/** @type {?} */ (this)).nzBeforeUpload,
customRequest: (/** @type {?} */ (this)).nzCustomRequest,
data: (/** @type {?} */ (this)).nzData,
headers: (/** @type {?} */ (this)).nzHeaders,
name: (/** @type {?} */ (this)).nzName,
multiple: (/** @type {?} */ (this)).nzMultiple,
withCredentials: (/** @type {?} */ (this)).nzWithCredentials,
filters: filters,
onStart: (/** @type {?} */ (this)).onStart,
onProgress: (/** @type {?} */ (this)).onProgress,
onSuccess: (/** @type {?} */ (this)).onSuccess,
onError: (/** @type {?} */ (this)).onError
};
return (/** @type {?} */ (this));
};
// #region upload
// #region upload
/**
* @private
* @param {?} file
* @return {?}
*/
NzUploadComponent.prototype.fileToObject =
// #region upload
/**
* @private
* @param {?} file
* @return {?}
*/
function (file) {
return {
lastModified: file.lastModified,
lastModifiedDate: file.lastModifiedDate,
name: file.filename || file.name,
size: file.size,
type: file.type,
uid: file.uid,
response: file.response,
error: file.error,
percent: 0,
// tslint:disable-next-line:no-any
originFileObj: (/** @type {?} */ (file))
};
};
/**
* @private
* @param {?} file
* @param {?} fileList
* @return {?}
*/
NzUploadComponent.prototype.getFileItem = /**
* @private
* @param {?} file
* @param {?} fileList
* @return {?}
*/
function (file, fileList) {
return fileList.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.uid === file.uid; }))[0];
};
/**
* @private
* @param {?} file
* @param {?} fileList
* @return {?}
*/
NzUploadComponent.prototype.removeFileItem = /**
* @private
* @param {?} file
* @param {?} fileList
* @return {?}
*/
function (file, fileList) {
return fileList.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.uid !== file.uid; }));
};
/**
* @private
* @param {?} file
* @return {?}
*/
NzUploadComponent.prototype.genErr = /**
* @private
* @param {?} file
* @return {?}
*/
function (file) {
return file.response && typeof file.response === 'string'
? file.response
: (file.error && file.error.statusText) || this.locale.uploadError;
};
/**
* @param {?} e
* @return {?}
*/
NzUploadComponent.prototype.fileDrop = /**
* @param {?} e
* @return {?}
*/
function (e) {
if (e.type === this.dragState) {
return;
}
this.dragState = e.type;
this.setClassMap();
};
// #endregion
// #region list
// #endregion
// #region list
/**
* @private
* @return {?}
*/
NzUploadComponent.prototype.detectChangesList =
// #endregion
// #region list
/**
* @private
* @return {?}
*/
function () {
this.cdr.detectChanges();
this.listComp.detectChanges();
};
/**
* @private
* @return {?}
*/
NzUploadComponent.prototype.setClassMap = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var subCls = [];
if (this.nzType === 'drag') {
if (this.nzFileList.some((/**
* @param {?} file
* @return {?}
*/
function (file) { return file.status === 'uploading'; }))) {
subCls.push(this.prefixCls + "-drag-uploading");
}
if (this.dragState === 'dragover') {
subCls.push(this.prefixCls + "-drag-hover");
}
}
else {
subCls = [this.prefixCls + "-select-" + this.nzListType];
}
this.classList = __spread([
this.prefixCls,
this.prefixCls + "-" + this.nzType
], subCls, [
(this.nzDisabled && this.prefixCls + "-disabled") || ''
]).filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return !!item; }));
this.cdr.detectChanges();
};
// #endregion
// #endregion
/**
* @return {?}
*/
NzUploadComponent.prototype.ngOnInit =
// #endregion
/**
* @return {?}
*/
function () {
var _this = this;
this.i18n$ = this.i18n.localeChange.subscribe((/**
* @return {?}
*/
function () {
_this.locale = _this.i18n.getLocaleData('Upload');
_this.detectChangesList();
}));
};
/**
* @param {?} changes
* @return {?}
*/
NzUploadComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
var _this = this;
if (changes.nzFileList) {
(this.nzFileList || []).forEach((/**
* @param {?} file
* @return {?}
*/
function (file) { return (file.message = _this.genErr(file)); }));
}
this.zipOptions().setClassMap();
};
/**
* @return {?}
*/
NzUploadComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.i18n$.unsubscribe();
};
NzUploadComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-upload',
exportAs: 'nzUpload',
template: "<ng-template #list>\n <nz-upload-list #listComp [style.display]=\"nzShowUploadList ? '' : 'none'\"\n [locale]=\"locale\"\n [listType]=\"nzListType\"\n [items]=\"nzFileList || []\"\n [icons]=\"nzShowUploadList\"\n [onPreview]=\"nzPreview\"\n [onRemove]=\"onRemove\"></nz-upload-list>\n</ng-template>\n<ng-template #con><ng-content></ng-content></ng-template>\n<ng-template #btn>\n <div [ngClass]=\"classList\" [style.display]=\"nzShowButton ? '' : 'none'\">\n <div nz-upload-btn #uploadComp [options]=\"_btnOptions\">\n <ng-template [ngTemplateOutlet]=\"con\"></ng-template>\n </div>\n </div>\n</ng-template>\n<ng-container *ngIf=\"nzType === 'drag'; else select\">\n <div [ngClass]=\"classList\"\n (drop)=\"fileDrop($event)\"\n (dragover)=\"fileDrop($event)\"\n (dragleave)=\"fileDrop($event)\">\n <div nz-upload-btn #uploadComp [options]=\"_btnOptions\" [classes]=\"{'ant-upload-btn': true}\">\n <div class=\"ant-upload-drag-container\">\n <ng-template [ngTemplateOutlet]=\"con\"></ng-template>\n </div>\n </div>\n </div>\n <ng-template [ngTemplateOutlet]=\"list\"></ng-template>\n</ng-container>\n<ng-template #select>\n <ng-container *ngIf=\"nzListType === 'picture-card'; else pic\">\n <ng-template [ngTemplateOutlet]=\"list\"></ng-template>\n <ng-template [ngTemplateOutlet]=\"btn\"></ng-template>\n </ng-container>\n</ng-template>\n<ng-template #pic>\n <ng-template [ngTemplateOutlet]=\"btn\"></ng-template>\n <ng-template [ngTemplateOutlet]=\"list\"></ng-template>\n</ng-template>",
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
}] }
];
/** @nocollapse */
NzUploadComponent.ctorParameters = function () { return [
{ type: ChangeDetectorRef },
{ type: NzI18nService }
]; };
NzUploadComponent.propDecorators = {
uploadComp: [{ type: ViewChild, args: ['uploadComp',] }],
listComp: [{ type: ViewChild, args: ['listComp',] }],
nzType: [{ type: Input }],
nzLimit: [{ type: Input }],
nzSize: [{ type: Input }],
nzFileType: [{ type: Input }],
nzAccept: [{ type: Input }],
nzAction: [{ type: Input }],
nzDirectory: [{ type: Input }],
nzOpenFileDialogOnClick: [{ type: Input }],
nzBeforeUpload: [{ type: Input }],
nzCustomRequest: [{ type: Input }],
nzData: [{ type: Input }],
nzFilter: [{ type: Input }],
nzFileList: [{ type: Input }],
nzDisabled: [{ type: Input }],
nzHeaders: [{ type: Input }],
nzListType: [{ type: Input }],
nzMultiple: [{ type: Input }],
nzName: [{ type: Input }],
nzShowUploadList: [{ type: Input }],
nzShowButton: [{ type: Input }],
nzWithCredentials: [{ type: Input }],
nzRemove: [{ type: Input }],
nzPreview: [{ type: Input }],
nzChange: [{ type: Output }],
nzFileListChange: [{ type: Output }]
};
__decorate([
InputNumber(),
__metadata("design:type", Object)
], NzUploadComponent.prototype, "nzLimit", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], NzUploadComponent.prototype, "nzSize", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzUploadComponent.prototype, "nzDirectory", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzUploadComponent.prototype, "nzOpenFileDialogOnClick", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzUploadComponent.prototype, "nzDisabled", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzUploadComponent.prototype, "nzMultiple", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzUploadComponent.prototype, "nzShowButton", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzUploadComponent.prototype, "nzWithCredentials", void 0);
return NzUploadComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzUploadModule = /** @class */ (function () {
function NzUploadModule() {
}
NzUploadModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, FormsModule, NzToolTipModule, NzProgressModule, NzI18nModule, NzIconModule],
declarations: [NzUploadComponent, NzUploadBtnComponent, NzUploadListComponent],
exports: [NzUploadComponent]
},] }
];
return NzUploadModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzUploadBtnComponent, NzUploadListComponent, NzUploadComponent, NzUploadModule };
//# sourceMappingURL=ng-zorro-antd-upload.js.map