@smartbit4all/ng-client 4.2.119 → 4.2.121
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-form/api/model/fileUploaderProperties.mjs +1 -1
- package/esm2022/lib/smart-form/widgets/components/smart-file-editor/smart-file-editor.component.mjs +29 -21
- package/esm2022/lib/view-context/smart-ui-action/components/upload-widget/prime-file-uploader/prime-file-uploader.component.mjs +79 -0
- package/esm2022/lib/view-context/smart-ui-action/components/upload-widget/upload-widget.component.mjs +20 -30
- package/esm2022/lib/view-context/smart-ui-action/components/upload-widget/upload-widget.utils.mjs +12 -0
- package/esm2022/lib/view-context/smart-ui-action/dialogs/ui-action-file-upload-dialog/ui-action-file-upload-dialog.component.mjs +3 -3
- package/esm2022/lib/view-context/smart-view-context.module.mjs +5 -2
- package/fesm2022/smartbit4all-ng-client.mjs +129 -44
- package/fesm2022/smartbit4all-ng-client.mjs.map +1 -1
- package/lib/smart-form/api/model/fileUploaderProperties.d.ts +2 -0
- package/lib/smart-form/widgets/components/smart-file-editor/smart-file-editor.component.d.ts +4 -2
- package/lib/view-context/smart-ui-action/components/upload-widget/prime-file-uploader/prime-file-uploader.component.d.ts +28 -0
- package/lib/view-context/smart-ui-action/components/upload-widget/upload-widget.component.d.ts +5 -5
- package/lib/view-context/smart-ui-action/components/upload-widget/upload-widget.utils.d.ts +3 -0
- package/lib/view-context/smart-view-context.module.d.ts +46 -45
- package/package.json +1 -1
- package/smartbit4all-ng-client-4.2.121.tgz +0 -0
- package/smartbit4all-ng-client-4.2.119.tgz +0 -0
|
@@ -36,12 +36,12 @@ import * as i1$4 from '@angular/material/snack-bar';
|
|
|
36
36
|
import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
|
|
37
37
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
38
38
|
import * as i2$3 from '@angular/cdk/overlay';
|
|
39
|
-
import * as i3$2 from 'primeng/api';
|
|
40
|
-
import { SharedModule as SharedModule$1 } from 'primeng/api';
|
|
41
39
|
import * as i11 from '@angular/material/form-field';
|
|
42
40
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
43
41
|
import WaveSurfer from 'wavesurfer.js';
|
|
44
42
|
import RecordPlugin from 'wavesurfer.js/dist/plugins/record.js';
|
|
43
|
+
import * as i3$2 from 'primeng/api';
|
|
44
|
+
import { SharedModule as SharedModule$1 } from 'primeng/api';
|
|
45
45
|
import * as i9 from '@angular/material/chips';
|
|
46
46
|
import { MatChipsModule } from '@angular/material/chips';
|
|
47
47
|
import * as i4$2 from '@angular/material/checkbox';
|
|
@@ -5488,6 +5488,18 @@ var SmartWidgetHintPosition;
|
|
|
5488
5488
|
SmartWidgetHintPosition[SmartWidgetHintPosition["UNDER_INPUT"] = 1] = "UNDER_INPUT";
|
|
5489
5489
|
})(SmartWidgetHintPosition || (SmartWidgetHintPosition = {}));
|
|
5490
5490
|
|
|
5491
|
+
class UploadWidgetUtils {
|
|
5492
|
+
static formatSize(bytes) {
|
|
5493
|
+
if (!bytes || bytes === 0)
|
|
5494
|
+
return '0 B';
|
|
5495
|
+
const k = 1024;
|
|
5496
|
+
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
5497
|
+
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
5498
|
+
const value = parseFloat((bytes / Math.pow(k, i)).toFixed(1));
|
|
5499
|
+
return `${value} ${sizes[i]}`;
|
|
5500
|
+
}
|
|
5501
|
+
}
|
|
5502
|
+
|
|
5491
5503
|
class UiActionDescriptorService {
|
|
5492
5504
|
constructor(viewContext) {
|
|
5493
5505
|
this.viewContext = viewContext;
|
|
@@ -6939,10 +6951,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
|
|
|
6939
6951
|
type: Output
|
|
6940
6952
|
}] } });
|
|
6941
6953
|
|
|
6954
|
+
class PrimeFileUploaderComponent {
|
|
6955
|
+
constructor() {
|
|
6956
|
+
this.autoUpload = false;
|
|
6957
|
+
this.maxSizeMb = 25;
|
|
6958
|
+
this.uploadFilesEvent = new EventEmitter();
|
|
6959
|
+
}
|
|
6960
|
+
ngOnInit() {
|
|
6961
|
+
this.title = this.title ?? 'Dokumentum hozzáadása';
|
|
6962
|
+
this.subTitle = this.subTitle ?? 'tallózás vagy behúzás';
|
|
6963
|
+
this.maxSizeBytes = this.maxSizeMb * 1024 * 1024;
|
|
6964
|
+
this.fileFormats = this.fileFormats?.concat(', ');
|
|
6965
|
+
}
|
|
6966
|
+
isMobile() {
|
|
6967
|
+
return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
|
|
6968
|
+
}
|
|
6969
|
+
clear() {
|
|
6970
|
+
this.fileUploadPrime.clear();
|
|
6971
|
+
}
|
|
6972
|
+
select(event) {
|
|
6973
|
+
if (this.autoUpload) {
|
|
6974
|
+
this.uploadFiles(event);
|
|
6975
|
+
}
|
|
6976
|
+
}
|
|
6977
|
+
uploadFiles(event) {
|
|
6978
|
+
this.uploadFilesEvent.emit({
|
|
6979
|
+
files: this.fileUploadPrime.files,
|
|
6980
|
+
});
|
|
6981
|
+
this.fileUploadPrime.clear();
|
|
6982
|
+
}
|
|
6983
|
+
downloadFile(file) {
|
|
6984
|
+
let url = window.URL.createObjectURL(file);
|
|
6985
|
+
let a = document.createElement('a');
|
|
6986
|
+
a.href = url;
|
|
6987
|
+
a.download = file.name;
|
|
6988
|
+
a.click();
|
|
6989
|
+
window.URL.revokeObjectURL(url);
|
|
6990
|
+
}
|
|
6991
|
+
formatSize(bytes) {
|
|
6992
|
+
return UploadWidgetUtils.formatSize(bytes);
|
|
6993
|
+
}
|
|
6994
|
+
get files() {
|
|
6995
|
+
return this.fileUploadPrime?.files;
|
|
6996
|
+
}
|
|
6997
|
+
set files(files) {
|
|
6998
|
+
this.fileUploadPrime.files = files;
|
|
6999
|
+
}
|
|
7000
|
+
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 <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</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}.fileName{text-align:start}.singlePrimeNg ::ng-deep .uploadField{padding:1rem}:host ::ng-deep .uploadIcon i{font-size:2rem}:host ::ng-deep 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}\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"] }] }); }
|
|
7002
|
+
}
|
|
7003
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PrimeFileUploaderComponent, decorators: [{
|
|
7004
|
+
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 <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</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}.fileName{text-align:start}.singlePrimeNg ::ng-deep .uploadField{padding:1rem}:host ::ng-deep .uploadIcon i{font-size:2rem}:host ::ng-deep 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}\n"] }]
|
|
7006
|
+
}], propDecorators: { fileUploadPrime: [{
|
|
7007
|
+
type: ViewChild,
|
|
7008
|
+
args: ['fileUploadPrimeNg']
|
|
7009
|
+
}], isMultiple: [{
|
|
7010
|
+
type: Input
|
|
7011
|
+
}], autoUpload: [{
|
|
7012
|
+
type: Input
|
|
7013
|
+
}], maxSizeMb: [{
|
|
7014
|
+
type: Input
|
|
7015
|
+
}], fileFormats: [{
|
|
7016
|
+
type: Input
|
|
7017
|
+
}], title: [{
|
|
7018
|
+
type: Input
|
|
7019
|
+
}], subTitle: [{
|
|
7020
|
+
type: Input
|
|
7021
|
+
}], uploadFilesEvent: [{
|
|
7022
|
+
type: Output
|
|
7023
|
+
}] } });
|
|
7024
|
+
|
|
6942
7025
|
class UploadWidgetComponent {
|
|
6943
7026
|
constructor(cdr, compLib) {
|
|
6944
7027
|
this.cdr = cdr;
|
|
6945
7028
|
this.compLib = compLib;
|
|
7029
|
+
this.uploadDescriptor = this.defaultUploadDescriptor;
|
|
6946
7030
|
this.autoUpload = false;
|
|
6947
7031
|
this.uploadFilesEvent = new EventEmitter();
|
|
6948
7032
|
this.componentLibrary = ComponentLibrary;
|
|
@@ -6979,10 +7063,9 @@ class UploadWidgetComponent {
|
|
|
6979
7063
|
}
|
|
6980
7064
|
uploadFiles(event) {
|
|
6981
7065
|
this.uploadFilesEvent.emit({
|
|
6982
|
-
files:
|
|
6983
|
-
uploadDescriptor:
|
|
7066
|
+
files: event.files,
|
|
7067
|
+
uploadDescriptor: event.uploadDescriptor,
|
|
6984
7068
|
});
|
|
6985
|
-
this.fileUploadPrime.clear();
|
|
6986
7069
|
}
|
|
6987
7070
|
uploadRecording(file) {
|
|
6988
7071
|
this.loadFilesIntoWidget([file]);
|
|
@@ -7003,29 +7086,22 @@ class UploadWidgetComponent {
|
|
|
7003
7086
|
widgetNeeded(type) {
|
|
7004
7087
|
return this.uploadDescriptor?.uploadWidgets?.includes(type) ?? false;
|
|
7005
7088
|
}
|
|
7006
|
-
|
|
7007
|
-
|
|
7008
|
-
let a = document.createElement('a');
|
|
7009
|
-
a.href = url;
|
|
7010
|
-
a.download = file.name;
|
|
7011
|
-
a.click();
|
|
7012
|
-
window.URL.revokeObjectURL(url);
|
|
7089
|
+
choose(event, callback) {
|
|
7090
|
+
callback();
|
|
7013
7091
|
}
|
|
7014
|
-
|
|
7015
|
-
|
|
7016
|
-
|
|
7017
|
-
|
|
7018
|
-
|
|
7019
|
-
|
|
7020
|
-
const value = parseFloat((bytes / Math.pow(k, i)).toFixed(1));
|
|
7021
|
-
return `${value} ${sizes[i]}`;
|
|
7092
|
+
get defaultUploadDescriptor() {
|
|
7093
|
+
return {
|
|
7094
|
+
title: 'Dokumentum hozzáadása',
|
|
7095
|
+
description: 'tallózás vagy behúzás',
|
|
7096
|
+
maxSize: '25',
|
|
7097
|
+
};
|
|
7022
7098
|
}
|
|
7023
7099
|
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 }); }
|
|
7024
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: { uploadDescriptor: "uploadDescriptor", isMultiple: "isMultiple", autoUpload: "autoUpload" }, 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\r\n @if(compLib === componentLibrary.PRIMENG) {\r\n
|
|
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", autoUpload: "autoUpload" }, 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\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\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"] }] }); }
|
|
7025
7101
|
}
|
|
7026
7102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UploadWidgetComponent, decorators: [{
|
|
7027
7103
|
type: Component,
|
|
7028
|
-
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\r\n @if(compLib === componentLibrary.PRIMENG) {\r\n
|
|
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\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\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"] }]
|
|
7029
7105
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentLibrary, decorators: [{
|
|
7030
7106
|
type: Inject,
|
|
7031
7107
|
args: [COMPONENT_LIBRARY]
|
|
@@ -7053,6 +7129,13 @@ class SmartFileEditorComponent {
|
|
|
7053
7129
|
this.uploadFilesEvent = new EventEmitter();
|
|
7054
7130
|
this.uiActionModels = [];
|
|
7055
7131
|
}
|
|
7132
|
+
ngOnInit() {
|
|
7133
|
+
if (!this.widgetInstance.fileUploaderProperties?.undoIcon) {
|
|
7134
|
+
this.widgetInstance.fileUploaderProperties.undoIcon = {
|
|
7135
|
+
identifier: 'undo',
|
|
7136
|
+
};
|
|
7137
|
+
}
|
|
7138
|
+
}
|
|
7056
7139
|
upload(event) {
|
|
7057
7140
|
if (!this.fileToChange) {
|
|
7058
7141
|
this.uploadFilesEvent.emit({
|
|
@@ -7107,17 +7190,15 @@ class SmartFileEditorComponent {
|
|
|
7107
7190
|
}
|
|
7108
7191
|
return SmartStyleUtility.getNgStyles(this.widgetInstance.style);
|
|
7109
7192
|
}
|
|
7110
|
-
|
|
7111
|
-
|
|
7193
|
+
isTypeSupported(value) {
|
|
7194
|
+
if (Array.isArray(value))
|
|
7195
|
+
return false;
|
|
7196
|
+
if (!value || !('dataUri' in value))
|
|
7197
|
+
return false;
|
|
7198
|
+
return true;
|
|
7112
7199
|
}
|
|
7113
7200
|
formatSize(bytes) {
|
|
7114
|
-
|
|
7115
|
-
return '0 B';
|
|
7116
|
-
const k = 1024;
|
|
7117
|
-
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
7118
|
-
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
7119
|
-
const value = parseFloat((bytes / Math.pow(k, i)).toFixed(1));
|
|
7120
|
-
return `${value} ${sizes[i]}`;
|
|
7201
|
+
return UploadWidgetUtils.formatSize(bytes);
|
|
7121
7202
|
}
|
|
7122
7203
|
get fileIcon() {
|
|
7123
7204
|
return this.compLib == ComponentLibrary.PRIMENG ? 'file' : 'insert_drive_file';
|
|
@@ -7126,37 +7207,39 @@ class SmartFileEditorComponent {
|
|
|
7126
7207
|
var changeAction = this.widgetInstance.fileUploaderProperties?.changeAction;
|
|
7127
7208
|
if (!changeAction) {
|
|
7128
7209
|
changeAction = this.widgetInstance.fileUploaderProperties.uploadAction;
|
|
7129
|
-
changeAction.descriptor.icon =
|
|
7130
|
-
this.compLib == ComponentLibrary.PRIMENG ? 'sync' : 'sync_alt';
|
|
7131
7210
|
changeAction.descriptor.title = '';
|
|
7132
7211
|
}
|
|
7133
7212
|
return {
|
|
7134
|
-
title: changeAction.descriptor
|
|
7135
|
-
color: changeAction.descriptor
|
|
7136
|
-
type: changeAction.descriptor.
|
|
7137
|
-
icon:
|
|
7138
|
-
iconPosition: changeAction.descriptor
|
|
7213
|
+
title: changeAction.descriptor?.title ?? '',
|
|
7214
|
+
color: changeAction.descriptor?.color ?? 'primary',
|
|
7215
|
+
type: changeAction.descriptor?.type ?? UiActionButtonType.ICON,
|
|
7216
|
+
icon: this.compLib == ComponentLibrary.PRIMENG ? 'sync' : 'sync_alt',
|
|
7217
|
+
iconPosition: changeAction.descriptor?.iconPosition,
|
|
7139
7218
|
};
|
|
7140
7219
|
}
|
|
7141
7220
|
get removeButton() {
|
|
7142
7221
|
var changeButton = this.changeButton;
|
|
7222
|
+
var undoIcon = this.widgetInstance.fileUploaderProperties?.undoIcon;
|
|
7143
7223
|
return {
|
|
7144
7224
|
title: '',
|
|
7145
7225
|
color: changeButton.color,
|
|
7146
7226
|
type: changeButton.type,
|
|
7147
|
-
|
|
7227
|
+
iconResource: undoIcon,
|
|
7148
7228
|
iconPosition: IconPosition.PRE,
|
|
7149
7229
|
};
|
|
7150
7230
|
}
|
|
7231
|
+
get errorIcon() {
|
|
7232
|
+
return this.compLib == ComponentLibrary.PRIMENG ? 'exclamation-circle' : 'error';
|
|
7233
|
+
}
|
|
7151
7234
|
get toolbarComponent() {
|
|
7152
7235
|
return this.toolbar;
|
|
7153
7236
|
}
|
|
7154
7237
|
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 }); }
|
|
7155
|
-
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(
|
|
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]=\"widgetInstance.fileUploaderProperties.isMultiple ?? true\"\r\n [autoUpload]=\"true\"\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}.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", "autoUpload"], outputs: ["uploadFilesEvent"] }] }); }
|
|
7156
7239
|
}
|
|
7157
7240
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFileEditorComponent, decorators: [{
|
|
7158
7241
|
type: Component,
|
|
7159
|
-
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(
|
|
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]=\"widgetInstance.fileUploaderProperties.isMultiple ?? true\"\r\n [autoUpload]=\"true\"\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}.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"] }]
|
|
7160
7243
|
}], ctorParameters: () => [{ type: ComponentLibrary, decorators: [{
|
|
7161
7244
|
type: Inject,
|
|
7162
7245
|
args: [COMPONENT_LIBRARY]
|
|
@@ -10803,11 +10886,11 @@ class UiActionFileUploadDialogComponent {
|
|
|
10803
10886
|
this.service.cancel();
|
|
10804
10887
|
}
|
|
10805
10888
|
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 }); }
|
|
10806
|
-
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
|
|
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?.upload\"\r\n [isMultiple]=\"isMultiple ?? true\"\r\n (uploadFilesEvent)=\"upload($event)\"\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!important;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", "autoUpload"], outputs: ["uploadFilesEvent"] }] }); }
|
|
10807
10890
|
}
|
|
10808
10891
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionFileUploadDialogComponent, decorators: [{
|
|
10809
10892
|
type: Component,
|
|
10810
|
-
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
|
|
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?.upload\"\r\n [isMultiple]=\"isMultiple ?? true\"\r\n (uploadFilesEvent)=\"upload($event)\"\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!important;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"] }]
|
|
10811
10894
|
}], ctorParameters: () => [{ type: UiActionFileUploadDialogService, decorators: [{
|
|
10812
10895
|
type: Inject,
|
|
10813
10896
|
args: ['fileUploadDialogService']
|
|
@@ -10998,7 +11081,8 @@ class SmartViewContextModule {
|
|
|
10998
11081
|
MenuComponent,
|
|
10999
11082
|
UploadWidgetComponent,
|
|
11000
11083
|
VoiceRecordWidgetComponent,
|
|
11001
|
-
PhotoCaptureWidgetComponent
|
|
11084
|
+
PhotoCaptureWidgetComponent,
|
|
11085
|
+
PrimeFileUploaderComponent], imports: [CommonModule,
|
|
11002
11086
|
HttpClientModule,
|
|
11003
11087
|
MatCommonModule,
|
|
11004
11088
|
MatButtonModule,
|
|
@@ -11161,6 +11245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
|
|
|
11161
11245
|
UploadWidgetComponent,
|
|
11162
11246
|
VoiceRecordWidgetComponent,
|
|
11163
11247
|
PhotoCaptureWidgetComponent,
|
|
11248
|
+
PrimeFileUploaderComponent,
|
|
11164
11249
|
],
|
|
11165
11250
|
imports: [
|
|
11166
11251
|
CommonModule,
|