@seniorsistemas/angular-components 15.0.0 → 15.0.1
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/bundles/seniorsistemas-angular-components.umd.js +72 -64
- package/bundles/seniorsistemas-angular-components.umd.js.map +1 -1
- package/bundles/seniorsistemas-angular-components.umd.min.js +2 -2
- package/bundles/seniorsistemas-angular-components.umd.min.js.map +1 -1
- package/components/file-upload/file-upload.component.d.ts +17 -33
- package/components/file-upload/index.d.ts +3 -2
- package/components/file-upload/models/file-dto.d.ts +11 -0
- package/components/file-upload/models/index.d.ts +2 -0
- package/components/file-upload/models/validate-errors.d.ts +4 -0
- package/esm2015/components/file-upload/file-upload.component.js +49 -63
- package/esm2015/components/file-upload/file-upload.module.js +7 -2
- package/esm2015/components/file-upload/index.js +4 -3
- package/esm2015/components/file-upload/models/file-dto.js +1 -0
- package/esm2015/components/file-upload/models/index.js +2 -0
- package/esm2015/components/file-upload/models/validate-errors.js +6 -0
- package/esm5/components/file-upload/file-upload.component.js +65 -67
- package/esm5/components/file-upload/file-upload.module.js +7 -2
- package/esm5/components/file-upload/index.js +4 -3
- package/esm5/components/file-upload/models/file-dto.js +1 -0
- package/esm5/components/file-upload/models/index.js +2 -0
- package/esm5/components/file-upload/models/validate-errors.js +6 -0
- package/fesm2015/seniorsistemas-angular-components.js +57 -61
- package/fesm2015/seniorsistemas-angular-components.js.map +1 -1
- package/fesm5/seniorsistemas-angular-components.js +72 -64
- package/fesm5/seniorsistemas-angular-components.js.map +1 -1
- package/package.json +1 -1
- package/seniorsistemas-angular-components.metadata.json +1 -1
|
@@ -2875,6 +2875,12 @@
|
|
|
2875
2875
|
return EmptyStateModule;
|
|
2876
2876
|
}());
|
|
2877
2877
|
|
|
2878
|
+
|
|
2879
|
+
(function (ValidateErrors) {
|
|
2880
|
+
ValidateErrors["MAX_FILE_SIZE"] = "MAX_FILE_SIZE";
|
|
2881
|
+
ValidateErrors["MAX_FILE_LIMIT"] = "MAX_FILE_LIMIT";
|
|
2882
|
+
})(exports.ValidateErrors || (exports.ValidateErrors = {}));
|
|
2883
|
+
|
|
2878
2884
|
var Breakpoints = {
|
|
2879
2885
|
SM_MIN: 0,
|
|
2880
2886
|
SM_MAX: 767,
|
|
@@ -2981,14 +2987,10 @@
|
|
|
2981
2987
|
return ExportUtils;
|
|
2982
2988
|
}());
|
|
2983
2989
|
|
|
2984
|
-
|
|
2985
|
-
(function (ValidateErrors) {
|
|
2986
|
-
ValidateErrors["MAX_FILE_SIZE"] = "MAX_FILE_SIZE";
|
|
2987
|
-
ValidateErrors["MAX_FILE_LIMIT"] = "MAX_FILE_LIMIT";
|
|
2988
|
-
})(exports.ValidateErrors || (exports.ValidateErrors = {}));
|
|
2989
2990
|
var FileUploadComponent = /** @class */ (function () {
|
|
2990
2991
|
function FileUploadComponent(sanitizer) {
|
|
2991
2992
|
this.sanitizer = sanitizer;
|
|
2993
|
+
this.inputValue = "";
|
|
2992
2994
|
this.id = "s-file-upload-" + FileUploadComponent_1.nextId++;
|
|
2993
2995
|
this.chooseLabel = "Anexar arquivos";
|
|
2994
2996
|
this.removeLabel = "Remover";
|
|
@@ -3001,12 +3003,10 @@
|
|
|
3001
3003
|
this.cancelUpload = new core.EventEmitter();
|
|
3002
3004
|
this.downloadFile = new core.EventEmitter();
|
|
3003
3005
|
this.validateErros = new core.EventEmitter();
|
|
3004
|
-
this.uploadedFileCount = 0;
|
|
3005
3006
|
this._files = [];
|
|
3006
3007
|
this.ngUsubscribe = new rxjs.Subject();
|
|
3007
3008
|
}
|
|
3008
3009
|
FileUploadComponent_1 = FileUploadComponent;
|
|
3009
|
-
FileUploadComponent.prototype.ngOnInit = function () { };
|
|
3010
3010
|
FileUploadComponent.prototype.ngOnDestroy = function () {
|
|
3011
3011
|
this.ngUsubscribe.next();
|
|
3012
3012
|
this.ngUsubscribe.complete();
|
|
@@ -3017,91 +3017,94 @@
|
|
|
3017
3017
|
FileUploadComponent.prototype.onResize = function () {
|
|
3018
3018
|
this.update();
|
|
3019
3019
|
};
|
|
3020
|
-
FileUploadComponent.prototype.update = function () {
|
|
3021
|
-
var windowWidth = window.innerWidth;
|
|
3022
|
-
this.isSmallDevice = windowWidth <= Breakpoints.SM_MAX;
|
|
3023
|
-
};
|
|
3024
3020
|
FileUploadComponent.prototype.onFileSelect = function (files) {
|
|
3025
|
-
var
|
|
3021
|
+
var e_1, _a;
|
|
3022
|
+
var newFiles = [];
|
|
3026
3023
|
if (!this.multiple) {
|
|
3027
3024
|
this.files = [];
|
|
3028
3025
|
}
|
|
3029
|
-
if (this.
|
|
3030
|
-
this.
|
|
3031
|
-
|
|
3032
|
-
this.uploadedFileCount -= this.files.length;
|
|
3033
|
-
this.validateErros.emit(exports.ValidateErrors.MAX_FILE_LIMIT);
|
|
3034
|
-
return;
|
|
3035
|
-
}
|
|
3026
|
+
if (this.isFileLimitExceeded(files)) {
|
|
3027
|
+
this.validateErros.emit(exports.ValidateErrors.MAX_FILE_LIMIT);
|
|
3028
|
+
return;
|
|
3036
3029
|
}
|
|
3037
|
-
|
|
3038
|
-
var
|
|
3039
|
-
|
|
3040
|
-
this.
|
|
3041
|
-
|
|
3042
|
-
|
|
3030
|
+
try {
|
|
3031
|
+
for (var files_1 = __values(files), files_1_1 = files_1.next(); !files_1_1.done; files_1_1 = files_1.next()) {
|
|
3032
|
+
var file = files_1_1.value;
|
|
3033
|
+
if (this.isFileSizeExceeded(file)) {
|
|
3034
|
+
this.validateErros.emit(exports.ValidateErrors.MAX_FILE_SIZE);
|
|
3035
|
+
return;
|
|
3036
|
+
}
|
|
3037
|
+
newFiles.push(file);
|
|
3043
3038
|
}
|
|
3044
|
-
|
|
3045
|
-
|
|
3039
|
+
}
|
|
3040
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
3041
|
+
finally {
|
|
3042
|
+
try {
|
|
3043
|
+
if (files_1_1 && !files_1_1.done && (_a = files_1.return)) _a.call(files_1);
|
|
3046
3044
|
}
|
|
3045
|
+
finally { if (e_1) throw e_1.error; }
|
|
3047
3046
|
}
|
|
3048
|
-
if (
|
|
3049
|
-
this.
|
|
3047
|
+
if (newFiles.length) {
|
|
3048
|
+
this.files = this.files.concat(newFiles);
|
|
3049
|
+
this.uploadHandler.emit({
|
|
3050
|
+
files: newFiles,
|
|
3051
|
+
});
|
|
3050
3052
|
this.inputUpload.nativeElement.value = "";
|
|
3051
3053
|
}
|
|
3052
3054
|
};
|
|
3053
|
-
FileUploadComponent.prototype.onRemoveFile = function (
|
|
3054
|
-
this.files.
|
|
3055
|
-
this.
|
|
3056
|
-
|
|
3057
|
-
|
|
3058
|
-
|
|
3059
|
-
FileUploadComponent.prototype.onCancelUpload = function (event, index) {
|
|
3060
|
-
this.uploadedFileCount -= 1;
|
|
3061
|
-
this.files.splice(index, 1);
|
|
3062
|
-
this.cancelUpload.emit(index);
|
|
3063
|
-
event.preventDefault();
|
|
3055
|
+
FileUploadComponent.prototype.onRemoveFile = function (file) {
|
|
3056
|
+
var fileIndex = this.files.indexOf(file);
|
|
3057
|
+
var removedFiles = this.files.splice(fileIndex, 1);
|
|
3058
|
+
if (removedFiles.length) {
|
|
3059
|
+
this.removeFile.emit({ file: file });
|
|
3060
|
+
}
|
|
3064
3061
|
};
|
|
3065
|
-
FileUploadComponent.prototype.
|
|
3066
|
-
this.
|
|
3067
|
-
|
|
3062
|
+
FileUploadComponent.prototype.onCancelUpload = function (index) {
|
|
3063
|
+
var removedFiles = this.files.splice(index, 1);
|
|
3064
|
+
if (removedFiles.length) {
|
|
3065
|
+
this.cancelUpload.emit(index);
|
|
3066
|
+
}
|
|
3068
3067
|
};
|
|
3069
|
-
FileUploadComponent.prototype.
|
|
3070
|
-
|
|
3068
|
+
FileUploadComponent.prototype.onDowloadFile = function (index) {
|
|
3069
|
+
this.downloadFile.emit({
|
|
3070
|
+
index: index,
|
|
3071
|
+
anchor: this.anchor,
|
|
3072
|
+
});
|
|
3071
3073
|
};
|
|
3072
3074
|
Object.defineProperty(FileUploadComponent.prototype, "files", {
|
|
3073
3075
|
get: function () {
|
|
3074
3076
|
return this._files;
|
|
3075
3077
|
},
|
|
3076
3078
|
set: function (files) {
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3081
|
-
file.objectURL = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(files[i]));
|
|
3079
|
+
var _this = this;
|
|
3080
|
+
this._files = files.map(function (file) {
|
|
3081
|
+
if (_this.isImage(file)) {
|
|
3082
|
+
file.objectURL = _this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(file));
|
|
3082
3083
|
}
|
|
3083
|
-
|
|
3084
|
-
}
|
|
3084
|
+
return file;
|
|
3085
|
+
});
|
|
3085
3086
|
},
|
|
3086
3087
|
enumerable: true,
|
|
3087
3088
|
configurable: true
|
|
3088
3089
|
});
|
|
3089
|
-
FileUploadComponent.prototype.
|
|
3090
|
-
|
|
3090
|
+
FileUploadComponent.prototype.update = function () {
|
|
3091
|
+
var windowWidth = window.innerWidth;
|
|
3092
|
+
this.isSmallDevice = windowWidth <= Breakpoints.SM_MAX;
|
|
3091
3093
|
};
|
|
3092
3094
|
FileUploadComponent.prototype.isImage = function (file) {
|
|
3093
3095
|
return /^image\//.test(file.type);
|
|
3094
3096
|
};
|
|
3095
|
-
FileUploadComponent.prototype.
|
|
3096
|
-
this.
|
|
3097
|
-
|
|
3098
|
-
|
|
3099
|
-
|
|
3100
|
-
FileUploadComponent.prototype.isFileLimitExceeded = function () {
|
|
3101
|
-
return this.fileLimit && this.fileLimit < this.files.length + this.uploadedFileCount;
|
|
3097
|
+
FileUploadComponent.prototype.isFileLimitExceeded = function (files) {
|
|
3098
|
+
if (!this.fileLimit) {
|
|
3099
|
+
return false;
|
|
3100
|
+
}
|
|
3101
|
+
return this.files.length + files.length > this.fileLimit;
|
|
3102
3102
|
};
|
|
3103
3103
|
FileUploadComponent.prototype.isFileSizeExceeded = function (file) {
|
|
3104
|
-
|
|
3104
|
+
if (!this.maxFileSize) {
|
|
3105
|
+
return false;
|
|
3106
|
+
}
|
|
3107
|
+
return file.size > this.maxFileSize;
|
|
3105
3108
|
};
|
|
3106
3109
|
var FileUploadComponent_1;
|
|
3107
3110
|
FileUploadComponent.nextId = 0;
|
|
@@ -3186,7 +3189,7 @@
|
|
|
3186
3189
|
FileUploadComponent = FileUploadComponent_1 = __decorate([
|
|
3187
3190
|
core.Component({
|
|
3188
3191
|
selector: "s-file-upload",
|
|
3189
|
-
template: "<div
|
|
3192
|
+
template: "<div\n [id]=\"id\"\n class=\"s-fileupload\">\n <div class=\"s-fileupload-choose\">\n <input\n #inputUpload\n [id]=\"id+'input-upload'\"\n type=\"file\"\n name=\"file\"\n [accept]=\"accept\"\n [multiple]=\"multiple\"\n (change)=\"onFileSelect($event.dataTransfer\n ? $event.dataTransfer.files\n : $event.target.files)\"> \n <s-button\n [id]=\"id + 'upload-button'\"\n [label]=\"chooseLabel\"\n (onClick)=\"inputUpload.click()\"\n priority=\"primary\"\n [disabled]=\"disabled || !!formGroup?.disabled\"\n [auxiliary]=\"false\">\n </s-button>\n </div>\n\n <section\n *ngIf=\"files.length\" \n [id]=\"id + 'fileupload-list'\"\n class=\"s-fileupload-list\"\n role=\"grid\">\n <ng-container *ngFor=\"let file of files; let i = index\">\n <div\n class=\"s-fileupload-list-file\"\n role=\"row\">\n <div\n [id]=\"id + '-file-' + i + '-name'\"\n class=\"s-fileupload-list-file-name\"\n role=\"gridcell\">\n <ng-container *ngTemplateOutlet=\"file.savedFile || file.progress === 100\n ? descriptionUrl\n : description; context: {\n $implicit: file,\n index: i\n }\">\n </ng-container>\n </div>\n <div\n class=\"s-fileupload-list-file-status\"\n role=\"gridcell\">\n <p-progressBar\n *ngIf=\"file.isUploading && !isSmallDevice\"\n [style]=\"{ 'width': '250px', 'background-color': '#d8d8d8', 'border-radius': '0px', 'height': '14px'}\"\n [value]=\"file.progress\"\n [showValue]=\"false\"\n role=\"alert\"\n [attr.aria-label]=\"ariaLabelProgress\">\n </p-progressBar>\n <span\n *ngIf=\"file.isUploading && isSmallDevice\" \n [id]=\"id + '-file-' + i + '-spin'\"\n class=\"fas fa-circle-notch fa-spin\"\n [attr.aria-label]=\"ariaLabelProgress\">\n </span>\n <span\n *ngIf=\"!file.isUploading && !file.error && file.progress === 100\"\n [id]=\"id + '-file-' + i + '-check'\"\n class=\"fas fa-check\"\n role=\"alert\"\n [attr.aria-label]=\"ariaLabelSuccess || successTooltip\"\n [pTooltip]=\"successTooltip\"\n tooltipPosition=\"top\"\n showDelay=\"500\"\n [appendTo]=\"'body'\">\n </span>\n <span\n *ngIf=\"file.error?.message\" \n [id]=\"id + '-file-' + i + '-error'\"\n class=\"fas fa-times\"\n role=\"alert\"\n [pTooltip]=\"file.error?.message\"\n tooltipPosition=\"top\"\n showDelay=\"500\"\n [appendTo]=\"'body'\">\n </span>\n </div>\n <div\n class=\"s-fileupload-list-file-actions\"\n role=\"gridcell\">\n <a\n *ngIf=\"file.isUploading\"\n [id]=\"id + '-file-' + i + '-cancel'\"\n class=\"s-fileupload-list-file-actions-action\"\n (click)=\"onCancelUpload(i)\">\n {{cancelLabel}}\n </a>\n <a\n *ngIf=\"!file.isUploading && !(disabled || !!formGroup?.disabled)\"\n role=\"button\"\n tabindex=\"0\"\n [id]=\"id + '-file-' + i + '-remove'\"\n class=\"s-fileupload-list-file-actions-action\"\n (click)=\"onRemoveFile(file)\"\n [attr.aria-label]=\"ariaLabelRemove || removeLabel\">\n {{removeLabel}}\n </a>\n </div>\n </div>\n </ng-container>\n </section>\n</div>\n\n<ng-template\n #descriptionUrl\n let-file\n let-i = index>\n <a\n [id]=\"id + '-file-' + i + '-name-link'\"\n tabindex=\"0\"\n (click)=\"onDowloadFile(i)\"\n [attr.aria-label]=\"ariaLabelFileName || file.name\">{{file.name}}\n </a>\n <a\n style=\"display: none;\"\n [href]=\"file.objectURL\"\n target=\"_blank\"\n download\n #anchor>\n </a>\n</ng-template>\n\n<ng-template\n #description\n let-file>\n <span\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabelFileName || file.name\">\n {{file.name}}\n </span>\n</ng-template>\n",
|
|
3190
3193
|
styles: [".s-fileupload .s-fileupload-choose{position:relative;margin:15px 0;width:-webkit-max-content;width:max-content}.s-fileupload input[type=file]{display:none}.s-fileupload-list{border:1px solid #ccc}.s-fileupload-list-file:not(:first-child){border-top:1px solid #ccc}.s-fileupload-list .s-fileupload-list-file{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between;padding:15px}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name>a{cursor:pointer;text-decoration:none}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-status{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.s-fileupload-list .s-fileupload-list-file .fas.fa-circle-notch{color:#d8d8d8;font-size:12px}.s-fileupload-list .s-fileupload-list-file .fas.fa-check{color:#0c9348;font-size:12px}.s-fileupload-list .s-fileupload-list-file .fas.fa-times{color:#c13018;font-size:12px}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions{margin-top:15px;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;width:100%}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action{text-decoration:none;color:#428bca}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action :focus,.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action :visited,.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action:hover{text-decoration:none}@media (min-width:768px){.s-fileupload-list .s-fileupload-list-file{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name{width:auto;-ms-flex-positive:2;flex-grow:2}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-status{margin:0 15px}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions{margin:0;width:auto}}"]
|
|
3191
3194
|
})
|
|
3192
3195
|
], FileUploadComponent);
|
|
@@ -3199,7 +3202,12 @@
|
|
|
3199
3202
|
FileUploadModule = __decorate([
|
|
3200
3203
|
core.NgModule({
|
|
3201
3204
|
declarations: [FileUploadComponent],
|
|
3202
|
-
imports: [
|
|
3205
|
+
imports: [
|
|
3206
|
+
common.CommonModule,
|
|
3207
|
+
ButtonModule,
|
|
3208
|
+
tooltip.TooltipModule,
|
|
3209
|
+
progressbar.ProgressBarModule,
|
|
3210
|
+
],
|
|
3203
3211
|
exports: [FileUploadComponent],
|
|
3204
3212
|
})
|
|
3205
3213
|
], FileUploadModule);
|