@n-isi-platform/design-system 1.0.23 → 1.0.24
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.
|
@@ -2586,6 +2586,12 @@ class FileUploadComponent {
|
|
|
2586
2586
|
this.onSaveFile.emit(this.fileList);
|
|
2587
2587
|
this.calculateFileSize();
|
|
2588
2588
|
}
|
|
2589
|
+
// Unified display name
|
|
2590
|
+
getDisplayName(item) {
|
|
2591
|
+
if (item instanceof File)
|
|
2592
|
+
return item.name;
|
|
2593
|
+
return item.name ?? item.imeDatoteke ?? '';
|
|
2594
|
+
}
|
|
2589
2595
|
delete(fileId) {
|
|
2590
2596
|
this.onDelete.emit(fileId);
|
|
2591
2597
|
}
|
|
@@ -2616,6 +2622,10 @@ class FileUploadComponent {
|
|
|
2616
2622
|
downloadFile(id, name) {
|
|
2617
2623
|
this.onDownload.emit({ id, name });
|
|
2618
2624
|
}
|
|
2625
|
+
// Helper to know if item is a temp (new, unsaved) File (no backend id)
|
|
2626
|
+
isTempFile(item) {
|
|
2627
|
+
return item instanceof File && item.id == null;
|
|
2628
|
+
}
|
|
2619
2629
|
onClearTemplatingUpload() {
|
|
2620
2630
|
this.fileList = [];
|
|
2621
2631
|
this.onSaveFile.emit([]);
|
|
@@ -2637,7 +2647,7 @@ class FileUploadComponent {
|
|
|
2637
2647
|
this.totalSizePercent = this.totalSize / 10;
|
|
2638
2648
|
}
|
|
2639
2649
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileUploadComponent, deps: [{ token: i1$8.PrimeNG }, { token: SharedMessageService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2640
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FileUploadComponent, isStandalone: true, selector: "app-file-upload", inputs: { uploadedFiles: "uploadedFiles", maxFileSize: "maxFileSize", totalMaxFileSize: "totalMaxFileSize", disabled: "disabled", acceptFiles: "acceptFiles", multiple: "multiple" }, outputs: { onSaveFile: "onSaveFile", onDelete: "onDelete", onDownload: "onDownload", valid: "valid" }, ngImport: i0, template: " <p-fileupload\r\n class=\"pt-3\"\r\n name=\"priloge[]\"\r\n invalidFileSizeMessageSummary=\"{{\r\n 'components.fileUpload.invalidFileSizeMessageSummary' | translate\r\n }}\"\r\n invalidFileSizeMessageDetail=\"{{\r\n 'components.fileUpload.invalidFileSizeMessageDetail' | translate\r\n }}\"\r\n invalidFileTypeMessageDetail=\"{{'components.fileUpload.invalidFileTypeMessageDetail' | translate}}\"\r\n invalidFileTypeMessageSummary=\"{{ 'components.fileUpload.invalidFileTypeMessageSummary' | translate}}\"\r\n [multiple]=\"multiple\"\r\n (onRemove)=\"remove($event)\"\r\n [accept]=\"acceptFiles\"\r\n [maxFileSize]=\"maxFileSize\"\r\n (onSelect)=\"onSelectedFiles($event)\">\r\n <ng-template\r\n #header\r\n let-priloge\r\n let-chooseCallback=\"chooseCallback\"\r\n let-clearCallback=\"clearCallback\">\r\n <div class=\"flex gap-2\">\r\n <lib-button\r\n [disabled]=\"disabled\"\r\n (click)=\"choose($event, chooseCallback)\"\r\n label=\"{{ 'components.fileUpload.izberi' | translate }}\"\r\n [hasIcon]=\"true\"\r\n [icon]=\"'pi pi-file'\"\r\n [color]=\"ButtonColor.primary\" />\r\n </div>\r\n </ng-template>\r\n <ng-template #content let-priloge let-removeFileCallback=\"removeFileCallback\">\r\n <div class=\"flex flex-col gap-8 pt-4\">\r\n <div class=\"w-full\" *ngIf=\"uploadedFiles.length > 0\">\r\n <div class=\"flex flex-column gap-4\">\r\n <div\r\n *ngFor=\"let priloga of uploadedFiles; let i = index\"\r\n class=\"flex flex-col justify-content-between items-center gap-2 px-3\">\r\n <div class=\"flex flex-col\">\r\n <div>\r\n <i class=\"pi pi-file\"></i>\r\n </div>\r\n <span class=\"pl-3 text-ellipsis max-w-60 whitespace-nowrap overflow-hidden\"
|
|
2650
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FileUploadComponent, isStandalone: true, selector: "app-file-upload", inputs: { uploadedFiles: "uploadedFiles", maxFileSize: "maxFileSize", totalMaxFileSize: "totalMaxFileSize", disabled: "disabled", acceptFiles: "acceptFiles", multiple: "multiple" }, outputs: { onSaveFile: "onSaveFile", onDelete: "onDelete", onDownload: "onDownload", valid: "valid" }, ngImport: i0, template: " <p-fileupload\r\n class=\"pt-3\"\r\n name=\"priloge[]\"\r\n invalidFileSizeMessageSummary=\"{{\r\n 'components.fileUpload.invalidFileSizeMessageSummary' | translate\r\n }}\"\r\n invalidFileSizeMessageDetail=\"{{\r\n 'components.fileUpload.invalidFileSizeMessageDetail' | translate\r\n }}\"\r\n invalidFileTypeMessageDetail=\"{{'components.fileUpload.invalidFileTypeMessageDetail' | translate}}\"\r\n invalidFileTypeMessageSummary=\"{{ 'components.fileUpload.invalidFileTypeMessageSummary' | translate}}\"\r\n [multiple]=\"multiple\"\r\n (onRemove)=\"remove($event)\"\r\n [accept]=\"acceptFiles\"\r\n [maxFileSize]=\"maxFileSize\"\r\n (onSelect)=\"onSelectedFiles($event)\">\r\n <ng-template\r\n #header\r\n let-priloge\r\n let-chooseCallback=\"chooseCallback\"\r\n let-clearCallback=\"clearCallback\">\r\n <div class=\"flex gap-2\">\r\n <lib-button\r\n [disabled]=\"disabled\"\r\n (click)=\"choose($event, chooseCallback)\"\r\n label=\"{{ 'components.fileUpload.izberi' | translate }}\"\r\n [hasIcon]=\"true\"\r\n [icon]=\"'pi pi-file'\"\r\n [color]=\"ButtonColor.primary\" />\r\n </div>\r\n </ng-template>\r\n <ng-template #content let-priloge let-removeFileCallback=\"removeFileCallback\">\r\n <div class=\"flex flex-col gap-8 pt-4\">\r\n <div class=\"w-full\" *ngIf=\"uploadedFiles.length > 0\">\r\n <div class=\"flex flex-column gap-4\">\r\n <div\r\n *ngFor=\"let priloga of uploadedFiles; let i = index\"\r\n class=\"flex flex-col justify-content-between items-center gap-2 px-3\">\r\n <div class=\"flex flex-col\">\r\n <div>\r\n <i class=\"pi pi-file\"></i>\r\n </div>\r\n <span class=\"pl-3 text-ellipsis max-w-60 whitespace-nowrap overflow-hidden\">\r\n {{ getDisplayName(priloga) }}\r\n </span>\r\n </div>\r\n <div class=\"flex align-items-center\">\r\n <div *ngIf=\"!isTempFile(priloga)\">\r\n <p-badge value=\"Zaklju\u010Den\" badgeSize=\"small\" severity=\"success\" />\r\n <p-button\r\n (click)=\"downloadFile((priloga).id, getDisplayName(priloga))\"\r\n severity=\"primary\"\r\n icon=\"pi pi-download\"\r\n aria-label=\"Prenesi\"\r\n [rounded]=\"true\"\r\n [text]=\"true\" />\r\n </div>\r\n <p-button\r\n [disabled]=\"disabled\"\r\n (click)=\"removeFileCallback()\"\r\n (click)=\"delete(priloga.id)\"\r\n severity=\"danger\"\r\n icon=\"pi pi-times\"\r\n [rounded]=\"true\"\r\n [text]=\"true\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #priloga></ng-template>\r\n <ng-template #empty>\r\n <div\r\n *ngIf=\"uploadedFiles.length === 0\"\r\n class=\"flex align-center justify-around\"\r\n [style.width]=\"'100%'\">\r\n <span class=\"pi pi-cloud-upload mr-3\"></span>\r\n <p>{{ 'components.fileUpload.povlecitveInSpustiteDatotekeZaNalaganje' | translate }}</p>\r\n </div>\r\n <div *ngIf=\"acceptFiles\" class=\"flex align-center justify-around\">\r\n <div class=\"placeholder\"></div>\r\n <p>{{ ('components.fileUpload.dovoljeneDatoteke' | translate) + acceptFiles }}</p>\r\n </div>\r\n </ng-template>\r\n </p-fileupload>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i5$1.FileUpload, selector: "p-fileupload, 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", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["hasIcon", "label", "color", "icon", "iconPos", "disabled", "isLoading", "styleClass", "size", "accessibilityText", "buttonType", "isAccessible", "isSelected", "ariaControlsId", "isExpanded", "link", "isTextareaClear"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MenubarModule }, { kind: "ngmodule", type: ChipModule }] });
|
|
2641
2651
|
}
|
|
2642
2652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
2643
2653
|
type: Component,
|
|
@@ -2654,7 +2664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
2654
2664
|
TranslateModule,
|
|
2655
2665
|
MenubarModule,
|
|
2656
2666
|
ChipModule,
|
|
2657
|
-
], template: " <p-fileupload\r\n class=\"pt-3\"\r\n name=\"priloge[]\"\r\n invalidFileSizeMessageSummary=\"{{\r\n 'components.fileUpload.invalidFileSizeMessageSummary' | translate\r\n }}\"\r\n invalidFileSizeMessageDetail=\"{{\r\n 'components.fileUpload.invalidFileSizeMessageDetail' | translate\r\n }}\"\r\n invalidFileTypeMessageDetail=\"{{'components.fileUpload.invalidFileTypeMessageDetail' | translate}}\"\r\n invalidFileTypeMessageSummary=\"{{ 'components.fileUpload.invalidFileTypeMessageSummary' | translate}}\"\r\n [multiple]=\"multiple\"\r\n (onRemove)=\"remove($event)\"\r\n [accept]=\"acceptFiles\"\r\n [maxFileSize]=\"maxFileSize\"\r\n (onSelect)=\"onSelectedFiles($event)\">\r\n <ng-template\r\n #header\r\n let-priloge\r\n let-chooseCallback=\"chooseCallback\"\r\n let-clearCallback=\"clearCallback\">\r\n <div class=\"flex gap-2\">\r\n <lib-button\r\n [disabled]=\"disabled\"\r\n (click)=\"choose($event, chooseCallback)\"\r\n label=\"{{ 'components.fileUpload.izberi' | translate }}\"\r\n [hasIcon]=\"true\"\r\n [icon]=\"'pi pi-file'\"\r\n [color]=\"ButtonColor.primary\" />\r\n </div>\r\n </ng-template>\r\n <ng-template #content let-priloge let-removeFileCallback=\"removeFileCallback\">\r\n <div class=\"flex flex-col gap-8 pt-4\">\r\n <div class=\"w-full\" *ngIf=\"uploadedFiles.length > 0\">\r\n <div class=\"flex flex-column gap-4\">\r\n <div\r\n *ngFor=\"let priloga of uploadedFiles; let i = index\"\r\n class=\"flex flex-col justify-content-between items-center gap-2 px-3\">\r\n <div class=\"flex flex-col\">\r\n <div>\r\n <i class=\"pi pi-file\"></i>\r\n </div>\r\n <span class=\"pl-3 text-ellipsis max-w-60 whitespace-nowrap overflow-hidden\"
|
|
2667
|
+
], template: " <p-fileupload\r\n class=\"pt-3\"\r\n name=\"priloge[]\"\r\n invalidFileSizeMessageSummary=\"{{\r\n 'components.fileUpload.invalidFileSizeMessageSummary' | translate\r\n }}\"\r\n invalidFileSizeMessageDetail=\"{{\r\n 'components.fileUpload.invalidFileSizeMessageDetail' | translate\r\n }}\"\r\n invalidFileTypeMessageDetail=\"{{'components.fileUpload.invalidFileTypeMessageDetail' | translate}}\"\r\n invalidFileTypeMessageSummary=\"{{ 'components.fileUpload.invalidFileTypeMessageSummary' | translate}}\"\r\n [multiple]=\"multiple\"\r\n (onRemove)=\"remove($event)\"\r\n [accept]=\"acceptFiles\"\r\n [maxFileSize]=\"maxFileSize\"\r\n (onSelect)=\"onSelectedFiles($event)\">\r\n <ng-template\r\n #header\r\n let-priloge\r\n let-chooseCallback=\"chooseCallback\"\r\n let-clearCallback=\"clearCallback\">\r\n <div class=\"flex gap-2\">\r\n <lib-button\r\n [disabled]=\"disabled\"\r\n (click)=\"choose($event, chooseCallback)\"\r\n label=\"{{ 'components.fileUpload.izberi' | translate }}\"\r\n [hasIcon]=\"true\"\r\n [icon]=\"'pi pi-file'\"\r\n [color]=\"ButtonColor.primary\" />\r\n </div>\r\n </ng-template>\r\n <ng-template #content let-priloge let-removeFileCallback=\"removeFileCallback\">\r\n <div class=\"flex flex-col gap-8 pt-4\">\r\n <div class=\"w-full\" *ngIf=\"uploadedFiles.length > 0\">\r\n <div class=\"flex flex-column gap-4\">\r\n <div\r\n *ngFor=\"let priloga of uploadedFiles; let i = index\"\r\n class=\"flex flex-col justify-content-between items-center gap-2 px-3\">\r\n <div class=\"flex flex-col\">\r\n <div>\r\n <i class=\"pi pi-file\"></i>\r\n </div>\r\n <span class=\"pl-3 text-ellipsis max-w-60 whitespace-nowrap overflow-hidden\">\r\n {{ getDisplayName(priloga) }}\r\n </span>\r\n </div>\r\n <div class=\"flex align-items-center\">\r\n <div *ngIf=\"!isTempFile(priloga)\">\r\n <p-badge value=\"Zaklju\u010Den\" badgeSize=\"small\" severity=\"success\" />\r\n <p-button\r\n (click)=\"downloadFile((priloga).id, getDisplayName(priloga))\"\r\n severity=\"primary\"\r\n icon=\"pi pi-download\"\r\n aria-label=\"Prenesi\"\r\n [rounded]=\"true\"\r\n [text]=\"true\" />\r\n </div>\r\n <p-button\r\n [disabled]=\"disabled\"\r\n (click)=\"removeFileCallback()\"\r\n (click)=\"delete(priloga.id)\"\r\n severity=\"danger\"\r\n icon=\"pi pi-times\"\r\n [rounded]=\"true\"\r\n [text]=\"true\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #priloga></ng-template>\r\n <ng-template #empty>\r\n <div\r\n *ngIf=\"uploadedFiles.length === 0\"\r\n class=\"flex align-center justify-around\"\r\n [style.width]=\"'100%'\">\r\n <span class=\"pi pi-cloud-upload mr-3\"></span>\r\n <p>{{ 'components.fileUpload.povlecitveInSpustiteDatotekeZaNalaganje' | translate }}</p>\r\n </div>\r\n <div *ngIf=\"acceptFiles\" class=\"flex align-center justify-around\">\r\n <div class=\"placeholder\"></div>\r\n <p>{{ ('components.fileUpload.dovoljeneDatoteke' | translate) + acceptFiles }}</p>\r\n </div>\r\n </ng-template>\r\n </p-fileupload>\r\n" }]
|
|
2658
2668
|
}], ctorParameters: () => [{ type: i1$8.PrimeNG }, { type: SharedMessageService }, { type: i1$2.TranslateService }], propDecorators: { uploadedFiles: [{
|
|
2659
2669
|
type: Input
|
|
2660
2670
|
}], maxFileSize: [{
|