@smartbit4all/ng-client 4.2.123 → 4.2.124
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/esm2022/lib/smart-client/smart-component-api-client.mjs +1 -2
- package/esm2022/lib/smart-form/api/model/fileUploaderProperties.mjs +1 -1
- package/esm2022/lib/smart-form/smartfileuploader/smartfileuploader.component.mjs +12 -7
- package/esm2022/lib/smart-form/widgets/components/smart-file-editor/smart-file-editor.component.mjs +3 -3
- package/esm2022/lib/smart-form/widgets/smartformwidget/smartformwidget.component.mjs +1 -2
- package/esm2022/lib/view-context/api/model/uiActionUploadDescriptor.mjs +1 -1
- package/esm2022/lib/view-context/smart-ui-action/components/upload-widget/prime-file-uploader/prime-file-uploader.component.mjs +17 -3
- package/esm2022/lib/view-context/smart-ui-action/components/upload-widget/upload-widget.component.mjs +31 -11
- package/esm2022/lib/view-context/smart-ui-action/dialogs/ui-action-file-upload-dialog/ui-action-file-upload-dialog.component.mjs +3 -3
- package/fesm2022/smartbit4all-ng-client.mjs +59 -24
- package/fesm2022/smartbit4all-ng-client.mjs.map +1 -1
- package/lib/smart-form/api/model/fileUploaderProperties.d.ts +0 -1
- package/lib/smart-form/smartfileuploader/smartfileuploader.component.d.ts +1 -0
- package/lib/smart-form/widgets/smartformwidget/smartformwidget.component.d.ts +0 -1
- package/lib/view-context/api/model/uiActionUploadDescriptor.d.ts +1 -0
- package/lib/view-context/smart-ui-action/components/upload-widget/prime-file-uploader/prime-file-uploader.component.d.ts +3 -0
- package/lib/view-context/smart-ui-action/components/upload-widget/upload-widget.component.d.ts +2 -2
- package/package.json +1 -1
- package/smartbit4all-ng-client-4.2.124.tgz +0 -0
- package/smartbit4all-ng-client-4.2.123.tgz +0 -0
|
@@ -6421,6 +6421,7 @@ class SmartfileuploaderComponent {
|
|
|
6421
6421
|
this.autoUpload = false;
|
|
6422
6422
|
this.isDragOver = false;
|
|
6423
6423
|
this.errors = [];
|
|
6424
|
+
this.previewUrls = new Map();
|
|
6424
6425
|
}
|
|
6425
6426
|
ngOnInit() {
|
|
6426
6427
|
const defaultI18n = {
|
|
@@ -6461,9 +6462,9 @@ class SmartfileuploaderComponent {
|
|
|
6461
6462
|
}
|
|
6462
6463
|
else if (validFiles.length) {
|
|
6463
6464
|
this.files = [validFiles[0]];
|
|
6464
|
-
|
|
6465
|
-
|
|
6466
|
-
|
|
6465
|
+
}
|
|
6466
|
+
if (this.autoUpload) {
|
|
6467
|
+
this.uploadFile();
|
|
6467
6468
|
}
|
|
6468
6469
|
}
|
|
6469
6470
|
getFile(event) {
|
|
@@ -6518,10 +6519,14 @@ class SmartfileuploaderComponent {
|
|
|
6518
6519
|
return `${value} ${sizes[i]}`;
|
|
6519
6520
|
}
|
|
6520
6521
|
filePreviewUrl(file) {
|
|
6521
|
-
if (file
|
|
6522
|
-
return
|
|
6522
|
+
if (!file)
|
|
6523
|
+
return null;
|
|
6524
|
+
if (this.previewUrls.has(file)) {
|
|
6525
|
+
return this.previewUrls.get(file);
|
|
6523
6526
|
}
|
|
6524
|
-
|
|
6527
|
+
const url = URL.createObjectURL(file);
|
|
6528
|
+
this.previewUrls.set(file, url);
|
|
6529
|
+
return url;
|
|
6525
6530
|
}
|
|
6526
6531
|
downloadFile(file) {
|
|
6527
6532
|
const url = URL.createObjectURL(file);
|
|
@@ -6969,6 +6974,9 @@ class PrimeFileUploaderComponent {
|
|
|
6969
6974
|
clear() {
|
|
6970
6975
|
this.fileUploadPrime.clear();
|
|
6971
6976
|
}
|
|
6977
|
+
onFileSelect(event) {
|
|
6978
|
+
this.fileUploadPrime.onFileSelect(event);
|
|
6979
|
+
}
|
|
6972
6980
|
select(event) {
|
|
6973
6981
|
if (this.autoUpload) {
|
|
6974
6982
|
this.uploadFiles(event);
|
|
@@ -6997,12 +7005,21 @@ class PrimeFileUploaderComponent {
|
|
|
6997
7005
|
set files(files) {
|
|
6998
7006
|
this.fileUploadPrime.files = files;
|
|
6999
7007
|
}
|
|
7008
|
+
get uploadButton() {
|
|
7009
|
+
return {
|
|
7010
|
+
title: 'Feltöltés',
|
|
7011
|
+
color: 'primary',
|
|
7012
|
+
type: UiActionButtonType.RAISED,
|
|
7013
|
+
icon: 'upload',
|
|
7014
|
+
iconPosition: IconPosition.PRE,
|
|
7015
|
+
};
|
|
7016
|
+
}
|
|
7000
7017
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PrimeFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7001
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: PrimeFileUploaderComponent, selector: "prime-file-uploader", inputs: { isMultiple: "isMultiple", autoUpload: "autoUpload", maxSizeMb: "maxSizeMb", fileFormats: "fileFormats", title: "title", subTitle: "subTitle" }, outputs: { uploadFilesEvent: "uploadFilesEvent" }, viewQueries: [{ propertyName: "fileUploadPrime", first: true, predicate: ["fileUploadPrimeNg"], descendants: true }], ngImport: i0, template: "@if(isMultiple){\r\n<p-fileUpload\r\n #fileUploadPrimeNg\r\n name=\"files[]\"\r\n url=\"\"\r\n (onSend)=\"uploadFiles($event)\"\r\n [multiple]=\"isMultiple\"\r\n [accept]=\"fileFormatsString\"\r\n [maxFileSize]=\"maxSizeBytes\"\r\n uploadLabel=\"Felt\u00F6lt\u00E9s\"\r\n cancelLabel=\"M\u00E9gsem\"\r\n chooseLabel=\"V\u00E1laszt\u00E1s\"\r\n>\r\n <ng-template pTemplate=\"content\" *ngIf=\"!isMobile()\">\r\n <ng-container *ngTemplateOutlet=\"uploader\" />\r\n </ng-template>\r\n <ng-template pTemplate=\"file\" let-file let-i=\"index\">\r\n <ng-container *ngTemplateOutlet=\"fileContainer; context: { $implicit: file, i: i }\" />\r\n </ng-template>\r\n</p-fileUpload>\r\n} @else{\r\n<p-fileUpload\r\n #fileUploadPrimeNg\r\n name=\"files[]\"\r\n url=\"\"\r\n (onSelect)=\"select($event)\"\r\n (onSend)=\"uploadFiles($event)\"\r\n [multiple]=\"isMultiple\"\r\n [accept]=\"fileFormatsString\"\r\n [maxFileSize]=\"maxSizeBytes\"\r\n [ngClass]=\"{ singlePrimeNg: true, autoUpload: autoUpload }\"\r\n uploadLabel=\"Felt\u00F6lt\u00E9s\"\r\n cancelLabel=\"M\u00E9gsem\"\r\n chooseLabel=\"V\u00E1laszt\u00E1s\"\r\n>\r\n <ng-template pTemplate=\"content\" *ngIf=\"!isMobile()\">\r\n <ng-container *ngTemplateOutlet=\"uploader\" />\r\n </ng-template>\r\n <ng-template pTemplate=\"file\" let-file let-i=\"index\">\r\n <ng-container *ngTemplateOutlet=\"fileContainer; context: { $implicit: file, i: i }\" />\r\n </ng-template>\r\n</p-fileUpload>\r\n}\r\n\r\n<ng-template #uploader let-file let-i=\"index\">\r\n <div class=\"uploadField\" (click)=\"fileUploadPrime.choose()\">\r\n <smart-icon class=\"uploadIcon\" [icon]=\"'upload'\"></smart-icon>\r\n
|
|
7018
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: PrimeFileUploaderComponent, selector: "prime-file-uploader", inputs: { isMultiple: "isMultiple", autoUpload: "autoUpload", maxSizeMb: "maxSizeMb", fileFormats: "fileFormats", title: "title", subTitle: "subTitle" }, outputs: { uploadFilesEvent: "uploadFilesEvent" }, viewQueries: [{ propertyName: "fileUploadPrime", first: true, predicate: ["fileUploadPrimeNg"], descendants: true }], ngImport: i0, template: "@if(isMultiple){\r\n<p-fileUpload\r\n #fileUploadPrimeNg\r\n name=\"files[]\"\r\n url=\"\"\r\n (onSelect)=\"select($event)\"\r\n (onSend)=\"uploadFiles($event)\"\r\n [multiple]=\"isMultiple\"\r\n [accept]=\"fileFormatsString\"\r\n [maxFileSize]=\"maxSizeBytes\"\r\n uploadLabel=\"Felt\u00F6lt\u00E9s\"\r\n cancelLabel=\"M\u00E9gsem\"\r\n chooseLabel=\"V\u00E1laszt\u00E1s\"\r\n>\r\n <ng-template pTemplate=\"content\" *ngIf=\"!isMobile()\">\r\n <ng-container *ngTemplateOutlet=\"uploader\" />\r\n </ng-template>\r\n <ng-template pTemplate=\"file\" let-file let-i=\"index\">\r\n <ng-container *ngTemplateOutlet=\"fileContainer; context: { $implicit: file, i: i }\" />\r\n </ng-template>\r\n</p-fileUpload>\r\n} @else{\r\n<p-fileUpload\r\n #fileUploadPrimeNg\r\n name=\"files[]\"\r\n url=\"\"\r\n (onSelect)=\"select($event)\"\r\n (onSend)=\"uploadFiles($event)\"\r\n [multiple]=\"isMultiple\"\r\n [accept]=\"fileFormatsString\"\r\n [maxFileSize]=\"maxSizeBytes\"\r\n [ngClass]=\"{ singlePrimeNg: true, autoUpload: autoUpload }\"\r\n uploadLabel=\"Felt\u00F6lt\u00E9s\"\r\n cancelLabel=\"M\u00E9gsem\"\r\n chooseLabel=\"V\u00E1laszt\u00E1s\"\r\n>\r\n <ng-template pTemplate=\"content\" *ngIf=\"!isMobile()\">\r\n <ng-container *ngTemplateOutlet=\"uploader\" />\r\n </ng-template>\r\n <ng-template pTemplate=\"file\" let-file let-i=\"index\">\r\n <ng-container *ngTemplateOutlet=\"fileContainer; context: { $implicit: file, i: i }\" />\r\n </ng-template>\r\n</p-fileUpload>\r\n}\r\n\r\n<ng-template #uploader let-file let-i=\"index\">\r\n <div class=\"uploadField\" (click)=\"fileUploadPrime.choose()\">\r\n <div class=\"uploadData\"\r\n ><smart-icon class=\"uploadIcon\" [icon]=\"'upload'\"></smart-icon>\r\n <div class=\"dataField\">\r\n <span class=\"title message\">{{ title }}</span>\r\n <span class=\"message\">{{ subTitle }}</span>\r\n <span class=\"message\">{{ fileFormatsString }}</span>\r\n <span class=\"message\"> max {{ maxSizeMb }} Mb</span>\r\n </div>\r\n </div>\r\n @if(isMultiple == false && autoUpload == false && (files && files.length > 0)){\r\n <ui-action-button [descriptor]=\"uploadButton\" (actionClick)=\"fileUploadPrime.upload()\" />\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #fileContainer let-file let-i=\"index\">\r\n <div class=\"p-fileupload-file\">\r\n @if(file.objectURL){\r\n <img role=\"presentation\" [alt]=\"file.name\" [src]=\"file.objectURL\" width=\"50\" height=\"50\" />\r\n }@else {\r\n <i class=\"pi pi-file\" style=\"font-size: 2rem\"></i>\r\n }\r\n\r\n <div class=\"fileData\">\r\n <span class=\"fileName\">{{ file.name }}</span>\r\n <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\r\n </div>\r\n <div class=\"fileButtons\">\r\n <button\r\n pButton\r\n icon=\"pi pi-download\"\r\n class=\"p-button-text file-action\"\r\n (click)=\"downloadFile(file)\"\r\n aria-label=\"Download\"\r\n style=\"color: var(--primary-color)\"\r\n ></button>\r\n <button\r\n pButton\r\n icon=\"pi pi-times\"\r\n class=\"p-button-text file-action\"\r\n (click)=\"fileUploadPrime.remove($event, i)\"\r\n aria-label=\"Remove\"\r\n style=\"color: rgb(239, 68, 68)\"\r\n ></button\r\n ></div>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}:host ::ng-deep .p-fileupload .p-fileupload-buttonbar{display:flex!important;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:1rem}:host ::ng-deep .p-fileupload .p-fileupload-row>div{width:fit-content}:host ::ng-deep .p-fileupload .p-fileupload-content{padding:unset;align-content:center;text-align:center}.message{font-size:smaller;text-align:center;color:#6b7280}.title{font-size:unset;color:var(--primary-color)}.uploadField{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1rem;padding:.5rem 1rem;cursor:pointer}.uploadField:hover{background-color:rgb(from var(--border-color) r g b / .1)}:host ::ng-deep .p-fileupload-row{border-top:1px solid #dee2e6;border-bottom:1px solid #dee2e6}:host ::ng-deep .p-fileupload-choose,:host ::ng-deep .p-fileupload-row ::ng-deep button,:host ::ng-deep .p-fileupload-buttonbar ::ng-deep button{background-color:var(--primary-color);border-color:var(--primary-color)}:host ::ng-deep .p-fileupload-choose:hover,:host ::ng-deep .p-fileupload-row ::ng-deep button:hover,:host ::ng-deep .p-fileupload-buttonbar ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.8)}.p-fileupload-file{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border:1px solid #dee2e6}.p-file-data{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.fileSize{display:flex;justify-content:flex-start}.fileData{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-right:1rem}.uploadData{flex:1;display:flex;flex-direction:row;justify-content:flex-start;gap:1rem}.fileName{text-align:start}.singlePrimeNg ::ng-deep .uploadField{padding:1rem}.uploadIcon{align-content:center}:host ::ng-deep .uploadIcon i{font-size:2rem}:host ::ng-deep .p-fileupload-file i,:host ::ng-deep .uploadIcon i,:host ::ng-deep img{display:flex;justify-content:center;width:3rem}.dataField{display:flex;flex-direction:column;justify-content:flex-start;align-items:baseline}:host ::ng-deep .autoUpload.singlePrimeNg ::ng-deep .p-fileupload-buttonbar{display:none!important}.singlePrimeNg ::ng-deep .p-fileupload-content{display:flex;flex-direction:column-reverse}.singlePrimeNg ::ng-deep .p-fileupload-content p-progressbar,.singlePrimeNg ::ng-deep .p-fileupload .p-fileupload-buttonbar{display:none!important}.singlePrimeNg ::ng-deep .p-fileupload-file{border:unset;border-top:1px solid var(--border-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i3$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: i5.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
7002
7019
|
}
|
|
7003
7020
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PrimeFileUploaderComponent, decorators: [{
|
|
7004
7021
|
type: Component,
|
|
7005
|
-
args: [{ selector: 'prime-file-uploader', template: "@if(isMultiple){\r\n<p-fileUpload\r\n #fileUploadPrimeNg\r\n name=\"files[]\"\r\n url=\"\"\r\n (onSend)=\"uploadFiles($event)\"\r\n [multiple]=\"isMultiple\"\r\n [accept]=\"fileFormatsString\"\r\n [maxFileSize]=\"maxSizeBytes\"\r\n uploadLabel=\"Felt\u00F6lt\u00E9s\"\r\n cancelLabel=\"M\u00E9gsem\"\r\n chooseLabel=\"V\u00E1laszt\u00E1s\"\r\n>\r\n <ng-template pTemplate=\"content\" *ngIf=\"!isMobile()\">\r\n <ng-container *ngTemplateOutlet=\"uploader\" />\r\n </ng-template>\r\n <ng-template pTemplate=\"file\" let-file let-i=\"index\">\r\n <ng-container *ngTemplateOutlet=\"fileContainer; context: { $implicit: file, i: i }\" />\r\n </ng-template>\r\n</p-fileUpload>\r\n} @else{\r\n<p-fileUpload\r\n #fileUploadPrimeNg\r\n name=\"files[]\"\r\n url=\"\"\r\n (onSelect)=\"select($event)\"\r\n (onSend)=\"uploadFiles($event)\"\r\n [multiple]=\"isMultiple\"\r\n [accept]=\"fileFormatsString\"\r\n [maxFileSize]=\"maxSizeBytes\"\r\n [ngClass]=\"{ singlePrimeNg: true, autoUpload: autoUpload }\"\r\n uploadLabel=\"Felt\u00F6lt\u00E9s\"\r\n cancelLabel=\"M\u00E9gsem\"\r\n chooseLabel=\"V\u00E1laszt\u00E1s\"\r\n>\r\n <ng-template pTemplate=\"content\" *ngIf=\"!isMobile()\">\r\n <ng-container *ngTemplateOutlet=\"uploader\" />\r\n </ng-template>\r\n <ng-template pTemplate=\"file\" let-file let-i=\"index\">\r\n <ng-container *ngTemplateOutlet=\"fileContainer; context: { $implicit: file, i: i }\" />\r\n </ng-template>\r\n</p-fileUpload>\r\n}\r\n\r\n<ng-template #uploader let-file let-i=\"index\">\r\n <div class=\"uploadField\" (click)=\"fileUploadPrime.choose()\">\r\n <smart-icon class=\"uploadIcon\" [icon]=\"'upload'\"></smart-icon>\r\n
|
|
7022
|
+
args: [{ selector: 'prime-file-uploader', template: "@if(isMultiple){\r\n<p-fileUpload\r\n #fileUploadPrimeNg\r\n name=\"files[]\"\r\n url=\"\"\r\n (onSelect)=\"select($event)\"\r\n (onSend)=\"uploadFiles($event)\"\r\n [multiple]=\"isMultiple\"\r\n [accept]=\"fileFormatsString\"\r\n [maxFileSize]=\"maxSizeBytes\"\r\n uploadLabel=\"Felt\u00F6lt\u00E9s\"\r\n cancelLabel=\"M\u00E9gsem\"\r\n chooseLabel=\"V\u00E1laszt\u00E1s\"\r\n>\r\n <ng-template pTemplate=\"content\" *ngIf=\"!isMobile()\">\r\n <ng-container *ngTemplateOutlet=\"uploader\" />\r\n </ng-template>\r\n <ng-template pTemplate=\"file\" let-file let-i=\"index\">\r\n <ng-container *ngTemplateOutlet=\"fileContainer; context: { $implicit: file, i: i }\" />\r\n </ng-template>\r\n</p-fileUpload>\r\n} @else{\r\n<p-fileUpload\r\n #fileUploadPrimeNg\r\n name=\"files[]\"\r\n url=\"\"\r\n (onSelect)=\"select($event)\"\r\n (onSend)=\"uploadFiles($event)\"\r\n [multiple]=\"isMultiple\"\r\n [accept]=\"fileFormatsString\"\r\n [maxFileSize]=\"maxSizeBytes\"\r\n [ngClass]=\"{ singlePrimeNg: true, autoUpload: autoUpload }\"\r\n uploadLabel=\"Felt\u00F6lt\u00E9s\"\r\n cancelLabel=\"M\u00E9gsem\"\r\n chooseLabel=\"V\u00E1laszt\u00E1s\"\r\n>\r\n <ng-template pTemplate=\"content\" *ngIf=\"!isMobile()\">\r\n <ng-container *ngTemplateOutlet=\"uploader\" />\r\n </ng-template>\r\n <ng-template pTemplate=\"file\" let-file let-i=\"index\">\r\n <ng-container *ngTemplateOutlet=\"fileContainer; context: { $implicit: file, i: i }\" />\r\n </ng-template>\r\n</p-fileUpload>\r\n}\r\n\r\n<ng-template #uploader let-file let-i=\"index\">\r\n <div class=\"uploadField\" (click)=\"fileUploadPrime.choose()\">\r\n <div class=\"uploadData\"\r\n ><smart-icon class=\"uploadIcon\" [icon]=\"'upload'\"></smart-icon>\r\n <div class=\"dataField\">\r\n <span class=\"title message\">{{ title }}</span>\r\n <span class=\"message\">{{ subTitle }}</span>\r\n <span class=\"message\">{{ fileFormatsString }}</span>\r\n <span class=\"message\"> max {{ maxSizeMb }} Mb</span>\r\n </div>\r\n </div>\r\n @if(isMultiple == false && autoUpload == false && (files && files.length > 0)){\r\n <ui-action-button [descriptor]=\"uploadButton\" (actionClick)=\"fileUploadPrime.upload()\" />\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #fileContainer let-file let-i=\"index\">\r\n <div class=\"p-fileupload-file\">\r\n @if(file.objectURL){\r\n <img role=\"presentation\" [alt]=\"file.name\" [src]=\"file.objectURL\" width=\"50\" height=\"50\" />\r\n }@else {\r\n <i class=\"pi pi-file\" style=\"font-size: 2rem\"></i>\r\n }\r\n\r\n <div class=\"fileData\">\r\n <span class=\"fileName\">{{ file.name }}</span>\r\n <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\r\n </div>\r\n <div class=\"fileButtons\">\r\n <button\r\n pButton\r\n icon=\"pi pi-download\"\r\n class=\"p-button-text file-action\"\r\n (click)=\"downloadFile(file)\"\r\n aria-label=\"Download\"\r\n style=\"color: var(--primary-color)\"\r\n ></button>\r\n <button\r\n pButton\r\n icon=\"pi pi-times\"\r\n class=\"p-button-text file-action\"\r\n (click)=\"fileUploadPrime.remove($event, i)\"\r\n aria-label=\"Remove\"\r\n style=\"color: rgb(239, 68, 68)\"\r\n ></button\r\n ></div>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}:host ::ng-deep .p-fileupload .p-fileupload-buttonbar{display:flex!important;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:1rem}:host ::ng-deep .p-fileupload .p-fileupload-row>div{width:fit-content}:host ::ng-deep .p-fileupload .p-fileupload-content{padding:unset;align-content:center;text-align:center}.message{font-size:smaller;text-align:center;color:#6b7280}.title{font-size:unset;color:var(--primary-color)}.uploadField{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1rem;padding:.5rem 1rem;cursor:pointer}.uploadField:hover{background-color:rgb(from var(--border-color) r g b / .1)}:host ::ng-deep .p-fileupload-row{border-top:1px solid #dee2e6;border-bottom:1px solid #dee2e6}:host ::ng-deep .p-fileupload-choose,:host ::ng-deep .p-fileupload-row ::ng-deep button,:host ::ng-deep .p-fileupload-buttonbar ::ng-deep button{background-color:var(--primary-color);border-color:var(--primary-color)}:host ::ng-deep .p-fileupload-choose:hover,:host ::ng-deep .p-fileupload-row ::ng-deep button:hover,:host ::ng-deep .p-fileupload-buttonbar ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.8)}.p-fileupload-file{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border:1px solid #dee2e6}.p-file-data{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.fileSize{display:flex;justify-content:flex-start}.fileData{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-right:1rem}.uploadData{flex:1;display:flex;flex-direction:row;justify-content:flex-start;gap:1rem}.fileName{text-align:start}.singlePrimeNg ::ng-deep .uploadField{padding:1rem}.uploadIcon{align-content:center}:host ::ng-deep .uploadIcon i{font-size:2rem}:host ::ng-deep .p-fileupload-file i,:host ::ng-deep .uploadIcon i,:host ::ng-deep img{display:flex;justify-content:center;width:3rem}.dataField{display:flex;flex-direction:column;justify-content:flex-start;align-items:baseline}:host ::ng-deep .autoUpload.singlePrimeNg ::ng-deep .p-fileupload-buttonbar{display:none!important}.singlePrimeNg ::ng-deep .p-fileupload-content{display:flex;flex-direction:column-reverse}.singlePrimeNg ::ng-deep .p-fileupload-content p-progressbar,.singlePrimeNg ::ng-deep .p-fileupload .p-fileupload-buttonbar{display:none!important}.singlePrimeNg ::ng-deep .p-fileupload-file{border:unset;border-top:1px solid var(--border-color)}\n"] }]
|
|
7006
7023
|
}], propDecorators: { fileUploadPrime: [{
|
|
7007
7024
|
type: ViewChild,
|
|
7008
7025
|
args: ['fileUploadPrimeNg']
|
|
@@ -7027,7 +7044,6 @@ class UploadWidgetComponent {
|
|
|
7027
7044
|
this.cdr = cdr;
|
|
7028
7045
|
this.compLib = compLib;
|
|
7029
7046
|
this.uploadDescriptor = this.defaultUploadDescriptor;
|
|
7030
|
-
this.autoUpload = false;
|
|
7031
7047
|
this.uploadFilesEvent = new EventEmitter();
|
|
7032
7048
|
this.componentLibrary = ComponentLibrary;
|
|
7033
7049
|
this.uploadWidgetType = UploadWidgetType;
|
|
@@ -7035,6 +7051,7 @@ class UploadWidgetComponent {
|
|
|
7035
7051
|
this.compLib = compLib ?? ComponentLibrary.PRIMENG;
|
|
7036
7052
|
}
|
|
7037
7053
|
ngOnInit() {
|
|
7054
|
+
this.autoUpload = this.uploadDescriptor?.autoUpload ?? false;
|
|
7038
7055
|
this.setUp();
|
|
7039
7056
|
}
|
|
7040
7057
|
isMobile() {
|
|
@@ -7042,7 +7059,7 @@ class UploadWidgetComponent {
|
|
|
7042
7059
|
}
|
|
7043
7060
|
async setUp() {
|
|
7044
7061
|
this.maxSizeMb = Number(this.uploadDescriptor?.maxSize ?? 25);
|
|
7045
|
-
if (this.uploadDescriptor
|
|
7062
|
+
if (this.uploadDescriptor?.formats) {
|
|
7046
7063
|
this.fileFormats = [this.uploadDescriptor.formats];
|
|
7047
7064
|
}
|
|
7048
7065
|
// fileFormats = this.descriptor.upload?.formats;
|
|
@@ -7075,12 +7092,33 @@ class UploadWidgetComponent {
|
|
|
7075
7092
|
}
|
|
7076
7093
|
loadFilesIntoWidget(files) {
|
|
7077
7094
|
if (ComponentLibrary.PRIMENG === this.compLib) {
|
|
7078
|
-
|
|
7079
|
-
this.fileUploadPrime.
|
|
7080
|
-
|
|
7095
|
+
const dataTransfer = new DataTransfer();
|
|
7096
|
+
const existingFiles = Array.from(this.fileUploadPrime.files);
|
|
7097
|
+
existingFiles.forEach((file) => {
|
|
7098
|
+
dataTransfer.items.add(file);
|
|
7099
|
+
});
|
|
7100
|
+
for (const file of files) {
|
|
7101
|
+
dataTransfer.items.add(file);
|
|
7102
|
+
}
|
|
7103
|
+
const fileList = dataTransfer.files;
|
|
7104
|
+
const fakeEvent = {
|
|
7105
|
+
target: {
|
|
7106
|
+
files: fileList,
|
|
7107
|
+
},
|
|
7108
|
+
type: 'change',
|
|
7109
|
+
};
|
|
7110
|
+
this.fileUploadPrime.onFileSelect(fakeEvent);
|
|
7081
7111
|
}
|
|
7082
7112
|
else {
|
|
7083
|
-
this.
|
|
7113
|
+
if (this.autoUpload) {
|
|
7114
|
+
this.uploadFilesEvent.emit({
|
|
7115
|
+
files: files,
|
|
7116
|
+
uploadDescriptor: this.uploadDescriptor,
|
|
7117
|
+
});
|
|
7118
|
+
}
|
|
7119
|
+
else {
|
|
7120
|
+
this.fileUploadMaterial.files.push(...files);
|
|
7121
|
+
}
|
|
7084
7122
|
}
|
|
7085
7123
|
}
|
|
7086
7124
|
widgetNeeded(type) {
|
|
@@ -7094,14 +7132,15 @@ class UploadWidgetComponent {
|
|
|
7094
7132
|
title: 'Dokumentum hozzáadása',
|
|
7095
7133
|
description: 'tallózás vagy behúzás',
|
|
7096
7134
|
maxSize: '25',
|
|
7135
|
+
autoUpload: false,
|
|
7097
7136
|
};
|
|
7098
7137
|
}
|
|
7099
7138
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UploadWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: COMPONENT_LIBRARY, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7100
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: { uploadDescriptor: "uploadDescriptor", isMultiple: "isMultiple"
|
|
7139
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: { uploadDescriptor: "uploadDescriptor", isMultiple: "isMultiple" }, outputs: { uploadFilesEvent: "uploadFilesEvent" }, viewQueries: [{ propertyName: "fileUploadPrime", first: true, predicate: ["fileUploadPrimeNg"], descendants: true }, { propertyName: "fileUploadMaterial", first: true, predicate: ["fileUploadMaterial"], descendants: true }], ngImport: i0, template: "<div class=\"sb4UploadWidget\">\r\n <!-- IMAGE TYPE WIDGET -->\r\n <ng-container *ngIf=\"widgetNeeded(uploadWidgetType.IMAGE) || widgetNeeded(uploadWidgetType.ALL)\">\r\n <photo-capture-widget\r\n [maxFileSize]=\"maxSizeMb * 1024 * 1024\"\r\n (photoCaptured)=\"uploadImage($event)\"\r\n >\r\n </photo-capture-widget>\r\n </ng-container>\r\n\r\n <!-- SOUND TYPE WIDGET -->\r\n <ng-container *ngIf=\"widgetNeeded(uploadWidgetType.SOUND) || widgetNeeded(uploadWidgetType.ALL)\">\r\n <voice-record-widget (recordingSaved)=\"uploadRecording($event)\"> </voice-record-widget>\r\n </ng-container>\r\n @if(compLib === componentLibrary.PRIMENG) {\r\n <prime-file-uploader\r\n #fileUploadPrimeNg\r\n [isMultiple]=\"isMultiple\"\r\n [autoUpload]=\"autoUpload\"\r\n [fileFormats]=\"fileFormats\"\r\n [maxSizeMb]=\"maxSizeMb\"\r\n [title]=\"uploadDescriptor?.title\"\r\n [subTitle]=\"uploadDescriptor?.description\"\r\n (uploadFilesEvent)=\"uploadFiles($event)\"\r\n />\r\n }@else{\r\n <smartfileuploader\r\n #fileUploadMaterial\r\n [i18n]=\"i18n\"\r\n [fileFormats]=\"fileFormats\"\r\n [maxSizeMb]=\"maxSizeMb\"\r\n [uploadCallback]=\"upload.bind(this)\"\r\n [isMultiple]=\"isMultiple\"\r\n [autoUpload]=\"autoUpload\"\r\n ></smartfileuploader>\r\n }\r\n</div>\r\n", styles: ["photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}@media (max-width: 900px){:host{width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple", "autoUpload"] }, { kind: "component", type: VoiceRecordWidgetComponent, selector: "voice-record-widget", outputs: ["recordingSaved"] }, { kind: "component", type: PhotoCaptureWidgetComponent, selector: "photo-capture-widget", inputs: ["maxFileSize"], outputs: ["photoCaptured"] }, { kind: "component", type: PrimeFileUploaderComponent, selector: "prime-file-uploader", inputs: ["isMultiple", "autoUpload", "maxSizeMb", "fileFormats", "title", "subTitle"], outputs: ["uploadFilesEvent"] }] }); }
|
|
7101
7140
|
}
|
|
7102
7141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UploadWidgetComponent, decorators: [{
|
|
7103
7142
|
type: Component,
|
|
7104
|
-
args: [{ selector: 'smart-upload-widget', template: "<div class=\"sb4UploadWidget\">\r\n <!-- IMAGE TYPE WIDGET -->\r\n <ng-container *ngIf=\"widgetNeeded(uploadWidgetType.IMAGE) || widgetNeeded(uploadWidgetType.ALL)\">\r\n <photo-capture-widget\r\n [maxFileSize]=\"maxSizeMb * 1024 * 1024\"\r\n (photoCaptured)=\"uploadImage($event)\"\r\n >\r\n </photo-capture-widget>\r\n </ng-container>\r\n\r\n <!-- SOUND TYPE WIDGET -->\r\n <ng-container *ngIf=\"widgetNeeded(uploadWidgetType.SOUND) || widgetNeeded(uploadWidgetType.ALL)\">\r\n <voice-record-widget (recordingSaved)=\"uploadRecording($event)\"> </voice-record-widget>\r\n </ng-container>\r\n
|
|
7143
|
+
args: [{ selector: 'smart-upload-widget', template: "<div class=\"sb4UploadWidget\">\r\n <!-- IMAGE TYPE WIDGET -->\r\n <ng-container *ngIf=\"widgetNeeded(uploadWidgetType.IMAGE) || widgetNeeded(uploadWidgetType.ALL)\">\r\n <photo-capture-widget\r\n [maxFileSize]=\"maxSizeMb * 1024 * 1024\"\r\n (photoCaptured)=\"uploadImage($event)\"\r\n >\r\n </photo-capture-widget>\r\n </ng-container>\r\n\r\n <!-- SOUND TYPE WIDGET -->\r\n <ng-container *ngIf=\"widgetNeeded(uploadWidgetType.SOUND) || widgetNeeded(uploadWidgetType.ALL)\">\r\n <voice-record-widget (recordingSaved)=\"uploadRecording($event)\"> </voice-record-widget>\r\n </ng-container>\r\n @if(compLib === componentLibrary.PRIMENG) {\r\n <prime-file-uploader\r\n #fileUploadPrimeNg\r\n [isMultiple]=\"isMultiple\"\r\n [autoUpload]=\"autoUpload\"\r\n [fileFormats]=\"fileFormats\"\r\n [maxSizeMb]=\"maxSizeMb\"\r\n [title]=\"uploadDescriptor?.title\"\r\n [subTitle]=\"uploadDescriptor?.description\"\r\n (uploadFilesEvent)=\"uploadFiles($event)\"\r\n />\r\n }@else{\r\n <smartfileuploader\r\n #fileUploadMaterial\r\n [i18n]=\"i18n\"\r\n [fileFormats]=\"fileFormats\"\r\n [maxSizeMb]=\"maxSizeMb\"\r\n [uploadCallback]=\"upload.bind(this)\"\r\n [isMultiple]=\"isMultiple\"\r\n [autoUpload]=\"autoUpload\"\r\n ></smartfileuploader>\r\n }\r\n</div>\r\n", styles: ["photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}@media (max-width: 900px){:host{width:100%}}\n"] }]
|
|
7105
7144
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentLibrary, decorators: [{
|
|
7106
7145
|
type: Inject,
|
|
7107
7146
|
args: [COMPONENT_LIBRARY]
|
|
@@ -7117,8 +7156,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
|
|
|
7117
7156
|
type: Input
|
|
7118
7157
|
}], isMultiple: [{
|
|
7119
7158
|
type: Input
|
|
7120
|
-
}], autoUpload: [{
|
|
7121
|
-
type: Input
|
|
7122
7159
|
}], uploadFilesEvent: [{
|
|
7123
7160
|
type: Output
|
|
7124
7161
|
}] } });
|
|
@@ -7235,11 +7272,11 @@ class SmartFileEditorComponent {
|
|
|
7235
7272
|
return this.toolbar;
|
|
7236
7273
|
}
|
|
7237
7274
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFileEditorComponent, deps: [{ token: COMPONENT_LIBRARY, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7238
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartFileEditorComponent, selector: "smart-file-editor", inputs: { widgetInstance: "widgetInstance" }, outputs: { uploadFilesEvent: "uploadFilesEvent" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }], ngImport: i0, template: "@if( widgetInstance.fileUploaderProperties){\r\n<h4\r\n *ngIf=\"widgetInstance.showLabel\"\r\n class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n>\r\n {{ widgetInstance.label }}\r\n</h4>\r\n\r\n<div class=\"fileEditorComponent\">\r\n @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\r\n <div class=\"errorMessage\">\r\n <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\r\n <span> Widget value type is unsupported</span>\r\n </div>\r\n } @else if(!widgetInstance.value || fileToChange ) {\r\n <smart-upload-widget\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\r\n [isMultiple]=\"
|
|
7275
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartFileEditorComponent, selector: "smart-file-editor", inputs: { widgetInstance: "widgetInstance" }, outputs: { uploadFilesEvent: "uploadFilesEvent" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }], ngImport: i0, template: "@if( widgetInstance.fileUploaderProperties){\r\n<h4\r\n *ngIf=\"widgetInstance.showLabel\"\r\n class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n>\r\n {{ widgetInstance.label }}\r\n</h4>\r\n\r\n<div class=\"fileEditorComponent\">\r\n @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\r\n <div class=\"errorMessage\">\r\n <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\r\n <span> Widget value type is unsupported</span>\r\n </div>\r\n } @else if(!widgetInstance.value || fileToChange ) {\r\n <smart-upload-widget\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\r\n [isMultiple]=\"false\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n } @if (widgetInstance.value && isTypeSupported(widgetInstance.value)) {\r\n <div class=\"uploadedFileContainer\">\r\n <ng-container\r\n *ngTemplateOutlet=\"fileRow; context: { file: widgetInstance.value }\"\r\n ></ng-container>\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<ng-template #fileRow let-file=\"file\" let-i=\"index\">\r\n <div class=\"uploadedFile\">\r\n <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\r\n\r\n <div class=\"fileData\">\r\n <div class=\"fileDataContainer\">\r\n <span class=\"fileName\">{{ file.fileName }}</span>\r\n <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"fileActions\">\r\n <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\" #toolbar> </smart-ui-action-toolbar>\r\n\r\n @if(!fileToChange){\r\n <ui-action-button (actionClick)=\"change(file)\" [descriptor]=\"changeButton\">\r\n </ui-action-button>\r\n } @else {\r\n <ui-action-button\r\n class=\"removeIcon\"\r\n (actionClick)=\"cancelChange()\"\r\n [descriptor]=\"removeButton\"\r\n >\r\n </ui-action-button>\r\n\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:1rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}:host ::ng-deep .p-fileupload-content{border:unset;border-radius:var(--def-border-radius)}smart-icon ::ng-deep .pi{font-size:2rem!important}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-color);display:flex;flex-direction:row;align-items:center;gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple"], outputs: ["uploadFilesEvent"] }] }); }
|
|
7239
7276
|
}
|
|
7240
7277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFileEditorComponent, decorators: [{
|
|
7241
7278
|
type: Component,
|
|
7242
|
-
args: [{ selector: 'smart-file-editor', template: "@if( widgetInstance.fileUploaderProperties){\r\n<h4\r\n *ngIf=\"widgetInstance.showLabel\"\r\n class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n>\r\n {{ widgetInstance.label }}\r\n</h4>\r\n\r\n<div class=\"fileEditorComponent\">\r\n @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\r\n <div class=\"errorMessage\">\r\n <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\r\n <span> Widget value type is unsupported</span>\r\n </div>\r\n } @else if(!widgetInstance.value || fileToChange ) {\r\n <smart-upload-widget\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\r\n [isMultiple]=\"
|
|
7279
|
+
args: [{ selector: 'smart-file-editor', template: "@if( widgetInstance.fileUploaderProperties){\r\n<h4\r\n *ngIf=\"widgetInstance.showLabel\"\r\n class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n>\r\n {{ widgetInstance.label }}\r\n</h4>\r\n\r\n<div class=\"fileEditorComponent\">\r\n @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\r\n <div class=\"errorMessage\">\r\n <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\r\n <span> Widget value type is unsupported</span>\r\n </div>\r\n } @else if(!widgetInstance.value || fileToChange ) {\r\n <smart-upload-widget\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\r\n [isMultiple]=\"false\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n } @if (widgetInstance.value && isTypeSupported(widgetInstance.value)) {\r\n <div class=\"uploadedFileContainer\">\r\n <ng-container\r\n *ngTemplateOutlet=\"fileRow; context: { file: widgetInstance.value }\"\r\n ></ng-container>\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<ng-template #fileRow let-file=\"file\" let-i=\"index\">\r\n <div class=\"uploadedFile\">\r\n <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\r\n\r\n <div class=\"fileData\">\r\n <div class=\"fileDataContainer\">\r\n <span class=\"fileName\">{{ file.fileName }}</span>\r\n <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"fileActions\">\r\n <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\" #toolbar> </smart-ui-action-toolbar>\r\n\r\n @if(!fileToChange){\r\n <ui-action-button (actionClick)=\"change(file)\" [descriptor]=\"changeButton\">\r\n </ui-action-button>\r\n } @else {\r\n <ui-action-button\r\n class=\"removeIcon\"\r\n (actionClick)=\"cancelChange()\"\r\n [descriptor]=\"removeButton\"\r\n >\r\n </ui-action-button>\r\n\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:1rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}:host ::ng-deep .p-fileupload-content{border:unset;border-radius:var(--def-border-radius)}smart-icon ::ng-deep .pi{font-size:2rem!important}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-color);display:flex;flex-direction:row;align-items:center;gap:1rem}\n"] }]
|
|
7243
7280
|
}], ctorParameters: () => [{ type: ComponentLibrary, decorators: [{
|
|
7244
7281
|
type: Inject,
|
|
7245
7282
|
args: [COMPONENT_LIBRARY]
|
|
@@ -8193,7 +8230,6 @@ class SmartformwidgetComponent {
|
|
|
8193
8230
|
uiAction: event.uiAction,
|
|
8194
8231
|
files: event.files,
|
|
8195
8232
|
uploadDescriptor: event.uploadDescriptor,
|
|
8196
|
-
isMultiple: this.widgetInstance.fileUploaderProperties?.isMultiple,
|
|
8197
8233
|
});
|
|
8198
8234
|
}
|
|
8199
8235
|
}
|
|
@@ -10886,11 +10922,11 @@ class UiActionFileUploadDialogComponent {
|
|
|
10886
10922
|
this.service.cancel();
|
|
10887
10923
|
}
|
|
10888
10924
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionFileUploadDialogComponent, deps: [{ token: 'fileUploadDialogService' }, { token: COMPONENT_LIBRARY }, { token: UiActionDescriptorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10889
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiActionFileUploadDialogComponent, selector: "lib-ui-action-file-upload-dialog", viewQueries: [{ propertyName: "fileUploadPrime", first: true, predicate: ["fileUploadPrimeNg"], descendants: true }, { propertyName: "fileUploadMaterial", first: true, predicate: ["fileUploadMaterial"], descendants: true }], ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\r\n <div class=\"headerContainer\">\r\n <h3 class=\"color-accent-700\">\r\n {{ getTitle() }}\r\n </h3>\r\n @if(compLib === componentLibrary.MATERIAL) {\r\n <button mat-icon-button (click)=\"cancel()\">\r\n <smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n </button>\r\n }@else {\r\n <p-button icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" (click)=\"cancel()\" />\r\n }\r\n </div>\r\n <p>\r\n {{ getText() }}\r\n </p>\r\n\r\n <smart-upload-widget\r\n [uploadDescriptor]=\"descriptor
|
|
10925
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiActionFileUploadDialogComponent, selector: "lib-ui-action-file-upload-dialog", viewQueries: [{ propertyName: "fileUploadPrime", first: true, predicate: ["fileUploadPrimeNg"], descendants: true }, { propertyName: "fileUploadMaterial", first: true, predicate: ["fileUploadMaterial"], descendants: true }], ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\r\n <div class=\"headerContainer\">\r\n <h3 class=\"color-accent-700\">\r\n {{ getTitle() }}\r\n </h3>\r\n @if(compLib === componentLibrary.MATERIAL) {\r\n <button mat-icon-button (click)=\"cancel()\">\r\n <smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n </button>\r\n }@else {\r\n <p-button icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" (click)=\"cancel()\" />\r\n }\r\n </div>\r\n <p>\r\n {{ getText() }}\r\n </p>\r\n\r\n @if(descriptor){\r\n <smart-upload-widget\r\n [uploadDescriptor]=\"descriptor.upload\"\r\n [isMultiple]=\"isMultiple ?? true\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n }\r\n\r\n <div class=\"folderNameDialogButtonsContainer\">\r\n <ui-action-button [descriptor]=\"cancelButton\" (actionClick)=\"cancel()\"></ui-action-button>\r\n </div>\r\n</div>\r\n", styles: [".folderNameDialogContainer{display:flex;flex-direction:column;justify-content:center;gap:1rem;min-width:30vw}photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:1rem}.headerContainer ::ng-deep button{color:var(--primary-color)}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.folderNameDialogButtonsContainer ::ng-deep button{border-radius:3px}.folderNameDialogContainer ::ng-deep .p-fileupload .p-fileupload-buttonbar{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:1rem}.folderNameDialogContainer ::ng-deep .p-fileupload .p-fileupload-row>div{width:fit-content}.folderNameDialogContainer ::ng-deep .p-fileupload .p-fileupload-content{padding:unset;align-content:center;text-align:center}.message{text-align:center;color:#6b7280}.uploadField{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem;padding:1rem}.folderNameDialogContainer ::ng-deep .p-fileupload-row{border-top:1px solid #dee2e6;border-bottom:1px solid #dee2e6}.folderNameDialogContainer ::ng-deep .p-fileupload-choose,.folderNameDialogContainer ::ng-deep .p-fileupload-row ::ng-deep button,.folderNameDialogContainer ::ng-deep .p-fileupload-buttonbar ::ng-deep button{background-color:var(--primary-color);border-color:var(--primary-color)}.folderNameDialogContainer ::ng-deep .p-fileupload-choose:hover,.folderNameDialogContainer ::ng-deep .p-fileupload-row ::ng-deep button:hover,.folderNameDialogContainer ::ng-deep .p-fileupload-buttonbar ::ng-deep button:hover,.folderNameDialogButtonsContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.8)}.headerContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.1)}@media (max-width: 900px){.folderNameDialogContainer{width:100%}}.p-fileupload-file{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border:1px solid #dee2e6}.p-file-data{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.fileSize{padding-left:1rem;display:flex;justify-content:flex-end}.fileData{display:flex;flex-direction:column;justify-content:flex-end;padding-right:1rem}\n"], dependencies: [{ kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple"], outputs: ["uploadFilesEvent"] }] }); }
|
|
10890
10926
|
}
|
|
10891
10927
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionFileUploadDialogComponent, decorators: [{
|
|
10892
10928
|
type: Component,
|
|
10893
|
-
args: [{ selector: 'lib-ui-action-file-upload-dialog', template: "<div class=\"folderNameDialogContainer\">\r\n <div class=\"headerContainer\">\r\n <h3 class=\"color-accent-700\">\r\n {{ getTitle() }}\r\n </h3>\r\n @if(compLib === componentLibrary.MATERIAL) {\r\n <button mat-icon-button (click)=\"cancel()\">\r\n <smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n </button>\r\n }@else {\r\n <p-button icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" (click)=\"cancel()\" />\r\n }\r\n </div>\r\n <p>\r\n {{ getText() }}\r\n </p>\r\n\r\n <smart-upload-widget\r\n [uploadDescriptor]=\"descriptor
|
|
10929
|
+
args: [{ selector: 'lib-ui-action-file-upload-dialog', template: "<div class=\"folderNameDialogContainer\">\r\n <div class=\"headerContainer\">\r\n <h3 class=\"color-accent-700\">\r\n {{ getTitle() }}\r\n </h3>\r\n @if(compLib === componentLibrary.MATERIAL) {\r\n <button mat-icon-button (click)=\"cancel()\">\r\n <smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n </button>\r\n }@else {\r\n <p-button icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" (click)=\"cancel()\" />\r\n }\r\n </div>\r\n <p>\r\n {{ getText() }}\r\n </p>\r\n\r\n @if(descriptor){\r\n <smart-upload-widget\r\n [uploadDescriptor]=\"descriptor.upload\"\r\n [isMultiple]=\"isMultiple ?? true\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n }\r\n\r\n <div class=\"folderNameDialogButtonsContainer\">\r\n <ui-action-button [descriptor]=\"cancelButton\" (actionClick)=\"cancel()\"></ui-action-button>\r\n </div>\r\n</div>\r\n", styles: [".folderNameDialogContainer{display:flex;flex-direction:column;justify-content:center;gap:1rem;min-width:30vw}photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:1rem}.headerContainer ::ng-deep button{color:var(--primary-color)}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.folderNameDialogButtonsContainer ::ng-deep button{border-radius:3px}.folderNameDialogContainer ::ng-deep .p-fileupload .p-fileupload-buttonbar{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:1rem}.folderNameDialogContainer ::ng-deep .p-fileupload .p-fileupload-row>div{width:fit-content}.folderNameDialogContainer ::ng-deep .p-fileupload .p-fileupload-content{padding:unset;align-content:center;text-align:center}.message{text-align:center;color:#6b7280}.uploadField{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem;padding:1rem}.folderNameDialogContainer ::ng-deep .p-fileupload-row{border-top:1px solid #dee2e6;border-bottom:1px solid #dee2e6}.folderNameDialogContainer ::ng-deep .p-fileupload-choose,.folderNameDialogContainer ::ng-deep .p-fileupload-row ::ng-deep button,.folderNameDialogContainer ::ng-deep .p-fileupload-buttonbar ::ng-deep button{background-color:var(--primary-color);border-color:var(--primary-color)}.folderNameDialogContainer ::ng-deep .p-fileupload-choose:hover,.folderNameDialogContainer ::ng-deep .p-fileupload-row ::ng-deep button:hover,.folderNameDialogContainer ::ng-deep .p-fileupload-buttonbar ::ng-deep button:hover,.folderNameDialogButtonsContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.8)}.headerContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.1)}@media (max-width: 900px){.folderNameDialogContainer{width:100%}}.p-fileupload-file{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border:1px solid #dee2e6}.p-file-data{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.fileSize{padding-left:1rem;display:flex;justify-content:flex-end}.fileData{display:flex;flex-direction:column;justify-content:flex-end;padding-right:1rem}\n"] }]
|
|
10894
10930
|
}], ctorParameters: () => [{ type: UiActionFileUploadDialogService, decorators: [{
|
|
10895
10931
|
type: Inject,
|
|
10896
10932
|
args: ['fileUploadDialogService']
|
|
@@ -21563,7 +21599,6 @@ class SmartComponentApiClient {
|
|
|
21563
21599
|
_uiAction.params = {
|
|
21564
21600
|
..._uiAction.params,
|
|
21565
21601
|
_files: files,
|
|
21566
|
-
isMultiple: props.isMultiple,
|
|
21567
21602
|
param: '_files',
|
|
21568
21603
|
};
|
|
21569
21604
|
this.executeUiAction(_uiAction);
|