spiderly 19.7.1 → 19.7.3

package/README.md

@@ -6,6 +6,8 @@
 
 Spiderly Angular is a library designed to work with Spiderly, but it can also be used independently. It utilizes the PrimeNG UI library.
 
+This npm package is the Angular library distribution. It is not the CLI package. The future npm CLI package is `spiderly-cli`, while the currently supported CLI remains the `Spiderly.CLI` NuGet tool.
+
 ## Sakai PrimeNG Theme
 
 Currently, Spiderly Angular uses and provides the layout of the free Sakai PrimeNG theme.

package/fesm2022/spiderly.mjs

@@ -38,10 +38,11 @@ import * as i12 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1$4 from 'primeng/splitbutton';
 import { SplitButtonModule } from 'primeng/splitbutton';
-import { Subject, throttleTime, map, BehaviorSubject, of, delay as delay$1, withLatestFrom, combineLatest, filter as filter$1, firstValueFrom, finalize as finalize$1, tap as tap$1 } from 'rxjs';
+import { Subject, throttleTime, map, BehaviorSubject, of, filter as filter$1, firstValueFrom, finalize as finalize$1, tap as tap$1 } from 'rxjs';
 import * as i3$2 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import * as FileSaver from 'file-saver';
+import mime from 'mime';
 import 'reflect-metadata';
 import * as i1$1 from 'primeng/api';
 import { ConfirmationService } from 'primeng/api';
@@ -59,7 +60,6 @@ import { SkeletonModule } from 'primeng/skeleton';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import * as i7 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
-import * as i8 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
 import * as i4$a from 'primeng/menubar';
 import { MenubarModule } from 'primeng/menubar';
@@ -70,6 +70,18 @@ import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import * as i1$5 from 'primeng/dynamicdialog';
 import { NgxSpinnerService } from 'ngx-spinner';
 
+/**
+ * Machine-readable error codes returned in `ApiErrorDTO.errorCode`.
+ * Mirror of Spiderly.Shared.DTO.ApiErrorCodes — keep in sync.
+ */
+const ApiErrorCodes = {
+    InvalidToken: 'invalid_token',
+    ValidationFailed: 'validation_failed',
+    UniqueViolation: 'unique_violation',
+    ForeignKeyViolation: 'foreign_key_violation',
+    ConcurrencyConflict: 'concurrency_conflict',
+};
+
 class BaseControl {
     constructor(translocoService) {
         this.translocoService = translocoService;
@@ -893,34 +905,7 @@ function validatePrecisionScale(value, precision, scale, ignoreTrailingZeros) {
     return true;
 }
 function getMimeTypeForFileName(fileName) {
-    const mimeTypes = {
-        '.jpg': 'image/jpeg',
-        '.jpeg': 'image/jpeg',
-        '.png': 'image/png',
-        '.webp': 'image/webp',
-        '.gif': 'image/gif',
-        '.svg': 'image/svg+xml',
-        '.pdf': 'application/pdf',
-        '.txt': 'text/plain',
-        '.html': 'text/html',
-        '.css': 'text/css',
-        '.js': 'application/javascript',
-        '.json': 'application/json',
-        '.csv': 'text/csv',
-        '.xml': 'application/xml',
-        '.zip': 'application/zip',
-        '.mp4': 'video/mp4',
-        '.mp3': 'audio/mpeg',
-        '.wav': 'audio/wav',
-        '.avi': 'video/x-msvideo',
-        '.doc': 'application/msword',
-        '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-        '.xls': 'application/vnd.ms-excel',
-        '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-        // Add more as needed
-    };
-    const extension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
-    return mimeTypes[extension] || 'application/octet-stream'; // 'application/octet-stream' is a generic binary type
+    return mime.getType(fileName) ?? 'application/octet-stream';
 }
 function adjustColor(color, percent) {
     if (!/^#([0-9A-F]{3}){1,2}$/i.test(color)) {
@@ -1221,16 +1206,19 @@ class SpiderlyFileComponent extends BaseControl {
         this.onFileRemoved = new EventEmitter();
         this.acceptedFileTypes = ['image/*'];
         this.multiple = false;
-        this.isCloudinaryFileData = true;
+        this.isUrlFileData = true;
         this.imageWidth = 0;
         this.imageHeight = 0;
         this.maxFileSize = 20_000_000;
+        this.existingFileUrl = null;
+        this.existingFileIsImage = false;
+        this.existingFileName = '';
         this.files = [];
     }
     ngOnInit() {
         if (this.control?.value != null && this.fileData != null) {
-            if (this.isCloudinaryFileData) {
-                this.pushFileFromCloudinaryUrl(this.fileData);
+            if (this.isUrlFileData) {
+                this.setExistingFileUrl(this.fileData);
             }
             else {
                 const file = this.getFileFromBase64(this.fileData);
@@ -1245,6 +1233,7 @@ class SpiderlyFileComponent extends BaseControl {
     }
     filesSelected(event) {
         const file = event.files[0];
+        this.existingFileUrl = null;
         if (this.isFileImageType(file.type) &&
             this.hasImageDimensionConstraints()) {
             this.files = [];
@@ -1284,24 +1273,22 @@ class SpiderlyFileComponent extends BaseControl {
     }
     fileRemoved(removeFileCallback, index) {
         removeFileCallback(index);
+        this.clearFile();
+    }
+    removeExistingFile() {
+        this.existingFileUrl = null;
+        this.clearFile();
+    }
+    clearFile() {
         this.control?.setValue(null);
         this.onFileRemoved.next(null);
     }
-    // Put inside global functions if you need it
-    async pushFileFromCloudinaryUrl(cloudinaryUrl) {
-        const response = await fetch(cloudinaryUrl);
-        if (!response.ok) {
-            throw new Error(`Failed to fetch file from Cloudinary: ${response.statusText}`);
-        }
-        const blob = await response.blob();
-        const urlParts = cloudinaryUrl.split('/');
-        const lastPart = urlParts[urlParts.length - 1];
-        const fileName = lastPart.split('?')[0];
-        const file = new File([blob], fileName, { type: blob.type });
-        this.files = [...this.files, file]; // this.files.push(file); doesn't work
-        return file;
+    setExistingFileUrl(url) {
+        this.existingFileUrl = url;
+        this.existingFileName = url.split('/').pop()?.split('?')[0] ?? '';
+        const mimeType = getMimeTypeForFileName(this.existingFileName);
+        this.existingFileIsImage = isFileImageType(mimeType);
     }
-    // Put inside global functions if you need it
     getFileFromBase64(base64String) {
         const [header, base64Content] = base64String.split(';base64,');
         const fileName = header.split('=')[1];
@@ -1322,7 +1309,7 @@ class SpiderlyFileComponent extends BaseControl {
         return isExcelFileType(mimeType);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyFileComponent, deps: [{ token: i1.TranslocoService }, { token: SpiderlyMessageService }, { token: ValidatorAbstractService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyFileComponent, isStandalone: true, selector: "spiderly-file", inputs: { objectId: "objectId", fileData: "fileData", acceptedFileTypes: "acceptedFileTypes", required: "required", multiple: "multiple", isCloudinaryFileData: "isCloudinaryFileData", imageWidth: "imageWidth", imageHeight: "imageHeight", maxFileSize: "maxFileSize", files: "files" }, outputs: { onFileSelected: "onFileSelected", onFileRemoved: "onFileRemoved" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div style=\"display: flex; flex-direction: column; gap: 0.5rem; padding: 1px\">\n    <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n      <label>{{ getTranslatedLabel() }}</label>\n      <!-- It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl. -->\n      <required *ngIf=\"control?.required || required\"></required>\n    </div>\n\n    <p-fileUpload\n      [files]=\"files\"\n      [disabled]=\"disabled\"\n      [name]=\"control?.label ?? label\"\n      [multiple]=\"multiple\"\n      [accept]=\"acceptedFileTypesCommaSeparated\"\n      [maxFileSize]=\"maxFileSize\"\n      (onSelect)=\"filesSelected($event)\"\n      [class]=\"control?.invalid && control?.dirty ? 'control-error-border' : ''\"\n    >\n      <ng-template\n        pTemplate=\"header\"\n        let-files\n        let-chooseCallback=\"chooseCallback\"\n        let-clearCallback=\"clearCallback\"\n        let-uploadCallback=\"uploadCallback\"\n      >\n        <div\n          class=\"flex flex-wrap justify-between items-center flex-1 gap-2\"\n        >\n          <div class=\"flex gap-2\">\n            <spiderly-button\n              [disabled]=\"disabled\"\n              (onClick)=\"choose($event, chooseCallback)\"\n              icon=\"pi pi-upload\"\n              [rounded]=\"true\"\n              [outlined]=\"true\"\n            />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template\n        pTemplate=\"content\"\n        let-files\n        let-removeFileCallback=\"removeFileCallback\"\n      >\n        <div *ngIf=\"files.length > 0\">\n          <div class=\"flex justify-center p-0 gap-8\">\n            <div\n              *ngFor=\"let file of files; let index = index\"\n              class=\"card m-0 px-4 py-4 flex flex-col items-center gap-4\"\n              style=\"justify-content: center; overflow: hidden\"\n            >\n              <div *ngIf=\"isFileImageType(file.type)\" class=\"image-container\">\n                <img role=\"presentation\" [src]=\"file.objectURL\" />\n              </div>\n              <div *ngIf=\"isExcelFileType(file.type)\" class=\"excel-container\">\n                <div class=\"excel-details\">\n                  <i\n                    class=\"pi pi-file-excel\"\n                    style=\"color: green; margin-right: 4px\"\n                  ></i>\n                  <span class=\"file-name\">{{ file.name }}</span>\n                </div>\n              </div>\n              <spiderly-button\n                [disabled]=\"disabled\"\n                icon=\"pi pi-times\"\n                (onClick)=\"fileRemoved(removeFileCallback, index)\"\n                [outlined]=\"true\"\n                [rounded]=\"true\"\n                severity=\"danger\"\n              />\n            </div>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"file\"> </ng-template>\n      <ng-template pTemplate=\"empty\">\n        <div class=\"flex items-center justify-center flex-col\">\n          <i\n            class=\"pi pi-cloud-upload border-2 rounded-full p-8 text-8xl text-gray-400 border-gray-400 mt-4\"\n          ></i>\n          <p class=\"mt-6 mb-0\">{{ t(\"DragAndDropFilesHereToUpload\") }}</p>\n        </div>\n      </ng-template>\n    </p-fileUpload>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i5$2.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: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyFileComponent, isStandalone: true, selector: "spiderly-file", inputs: { objectId: "objectId", fileData: "fileData", acceptedFileTypes: "acceptedFileTypes", required: "required", multiple: "multiple", isUrlFileData: "isUrlFileData", imageWidth: "imageWidth", imageHeight: "imageHeight", maxFileSize: "maxFileSize", files: "files" }, outputs: { onFileSelected: "onFileSelected", onFileRemoved: "onFileRemoved" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div style=\"display: flex; flex-direction: column; gap: 0.5rem; padding: 1px\">\n    <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n      <label>{{ getTranslatedLabel() }}</label>\n      <!-- It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl. -->\n      <required *ngIf=\"control?.required || required\"></required>\n    </div>\n\n    <p-fileUpload\n      [files]=\"files\"\n      [disabled]=\"disabled\"\n      [name]=\"control?.label ?? label\"\n      [multiple]=\"multiple\"\n      [accept]=\"acceptedFileTypesCommaSeparated\"\n      [maxFileSize]=\"maxFileSize\"\n      (onSelect)=\"filesSelected($event)\"\n      [class]=\"control?.invalid && control?.dirty ? 'control-error-border' : ''\"\n    >\n      <ng-template\n        pTemplate=\"header\"\n        let-files\n        let-chooseCallback=\"chooseCallback\"\n        let-clearCallback=\"clearCallback\"\n        let-uploadCallback=\"uploadCallback\"\n      >\n        <div\n          class=\"flex flex-wrap justify-between items-center flex-1 gap-2\"\n        >\n          <div class=\"flex gap-2\">\n            <spiderly-button\n              [disabled]=\"disabled\"\n              (onClick)=\"choose($event, chooseCallback)\"\n              icon=\"pi pi-upload\"\n              [rounded]=\"true\"\n              [outlined]=\"true\"\n            />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template\n        pTemplate=\"content\"\n        let-files\n        let-removeFileCallback=\"removeFileCallback\"\n      >\n        <div *ngIf=\"existingFileUrl\">\n          <div class=\"flex justify-center p-0 gap-8\">\n            <div\n              class=\"card m-0 px-4 py-4 flex flex-col items-center gap-4\"\n              style=\"justify-content: center; overflow: hidden\"\n            >\n              <div *ngIf=\"existingFileIsImage\" class=\"image-container\">\n                <img [src]=\"existingFileUrl\" />\n              </div>\n              <div *ngIf=\"!existingFileIsImage\">\n                <i class=\"pi pi-file\" style=\"margin-right: 4px\"></i>\n                <span>{{ existingFileName }}</span>\n              </div>\n              <spiderly-button\n                [disabled]=\"disabled\"\n                icon=\"pi pi-times\"\n                (onClick)=\"removeExistingFile()\"\n                [outlined]=\"true\"\n                [rounded]=\"true\"\n                severity=\"danger\"\n              />\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"!existingFileUrl && files.length > 0\">\n          <div class=\"flex justify-center p-0 gap-8\">\n            <div\n              *ngFor=\"let file of files; let index = index\"\n              class=\"card m-0 px-4 py-4 flex flex-col items-center gap-4\"\n              style=\"justify-content: center; overflow: hidden\"\n            >\n              <div *ngIf=\"isFileImageType(file.type)\" class=\"image-container\">\n                <img role=\"presentation\" [src]=\"file.objectURL\" />\n              </div>\n              <div *ngIf=\"isExcelFileType(file.type)\" class=\"excel-container\">\n                <div class=\"excel-details\">\n                  <i\n                    class=\"pi pi-file-excel\"\n                    style=\"color: green; margin-right: 4px\"\n                  ></i>\n                  <span class=\"file-name\">{{ file.name }}</span>\n                </div>\n              </div>\n              <spiderly-button\n                [disabled]=\"disabled\"\n                icon=\"pi pi-times\"\n                (onClick)=\"fileRemoved(removeFileCallback, index)\"\n                [outlined]=\"true\"\n                [rounded]=\"true\"\n                severity=\"danger\"\n              />\n            </div>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"file\"> </ng-template>\n      <ng-template pTemplate=\"empty\">\n        <div *ngIf=\"!existingFileUrl\" class=\"flex items-center justify-center flex-col\">\n          <i\n            class=\"pi pi-cloud-upload border-2 rounded-full p-8 text-8xl text-gray-400 border-gray-400 mt-4\"\n          ></i>\n          <p class=\"mt-6 mb-0\">{{ t(\"DragAndDropFilesHereToUpload\") }}</p>\n        </div>\n      </ng-template>\n    </p-fileUpload>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i5$2.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: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyFileComponent, decorators: [{
             type: Component,
@@ -1334,7 +1321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         RequiredComponent,
                         SpiderlyButtonComponent,
                         TranslocoDirective,
-                    ], template: "<ng-container *transloco=\"let t\">\n  <div style=\"display: flex; flex-direction: column; gap: 0.5rem; padding: 1px\">\n    <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n      <label>{{ getTranslatedLabel() }}</label>\n      <!-- It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl. -->\n      <required *ngIf=\"control?.required || required\"></required>\n    </div>\n\n    <p-fileUpload\n      [files]=\"files\"\n      [disabled]=\"disabled\"\n      [name]=\"control?.label ?? label\"\n      [multiple]=\"multiple\"\n      [accept]=\"acceptedFileTypesCommaSeparated\"\n      [maxFileSize]=\"maxFileSize\"\n      (onSelect)=\"filesSelected($event)\"\n      [class]=\"control?.invalid && control?.dirty ? 'control-error-border' : ''\"\n    >\n      <ng-template\n        pTemplate=\"header\"\n        let-files\n        let-chooseCallback=\"chooseCallback\"\n        let-clearCallback=\"clearCallback\"\n        let-uploadCallback=\"uploadCallback\"\n      >\n        <div\n          class=\"flex flex-wrap justify-between items-center flex-1 gap-2\"\n        >\n          <div class=\"flex gap-2\">\n            <spiderly-button\n              [disabled]=\"disabled\"\n              (onClick)=\"choose($event, chooseCallback)\"\n              icon=\"pi pi-upload\"\n              [rounded]=\"true\"\n              [outlined]=\"true\"\n            />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template\n        pTemplate=\"content\"\n        let-files\n        let-removeFileCallback=\"removeFileCallback\"\n      >\n        <div *ngIf=\"files.length > 0\">\n          <div class=\"flex justify-center p-0 gap-8\">\n            <div\n              *ngFor=\"let file of files; let index = index\"\n              class=\"card m-0 px-4 py-4 flex flex-col items-center gap-4\"\n              style=\"justify-content: center; overflow: hidden\"\n            >\n              <div *ngIf=\"isFileImageType(file.type)\" class=\"image-container\">\n                <img role=\"presentation\" [src]=\"file.objectURL\" />\n              </div>\n              <div *ngIf=\"isExcelFileType(file.type)\" class=\"excel-container\">\n                <div class=\"excel-details\">\n                  <i\n                    class=\"pi pi-file-excel\"\n                    style=\"color: green; margin-right: 4px\"\n                  ></i>\n                  <span class=\"file-name\">{{ file.name }}</span>\n                </div>\n              </div>\n              <spiderly-button\n                [disabled]=\"disabled\"\n                icon=\"pi pi-times\"\n                (onClick)=\"fileRemoved(removeFileCallback, index)\"\n                [outlined]=\"true\"\n                [rounded]=\"true\"\n                severity=\"danger\"\n              />\n            </div>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"file\"> </ng-template>\n      <ng-template pTemplate=\"empty\">\n        <div class=\"flex items-center justify-center flex-col\">\n          <i\n            class=\"pi pi-cloud-upload border-2 rounded-full p-8 text-8xl text-gray-400 border-gray-400 mt-4\"\n          ></i>\n          <p class=\"mt-6 mb-0\">{{ t(\"DragAndDropFilesHereToUpload\") }}</p>\n        </div>\n      </ng-template>\n    </p-fileUpload>\n  </div>\n</ng-container>\n" }]
+                    ], template: "<ng-container *transloco=\"let t\">\n  <div style=\"display: flex; flex-direction: column; gap: 0.5rem; padding: 1px\">\n    <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n      <label>{{ getTranslatedLabel() }}</label>\n      <!-- It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl. -->\n      <required *ngIf=\"control?.required || required\"></required>\n    </div>\n\n    <p-fileUpload\n      [files]=\"files\"\n      [disabled]=\"disabled\"\n      [name]=\"control?.label ?? label\"\n      [multiple]=\"multiple\"\n      [accept]=\"acceptedFileTypesCommaSeparated\"\n      [maxFileSize]=\"maxFileSize\"\n      (onSelect)=\"filesSelected($event)\"\n      [class]=\"control?.invalid && control?.dirty ? 'control-error-border' : ''\"\n    >\n      <ng-template\n        pTemplate=\"header\"\n        let-files\n        let-chooseCallback=\"chooseCallback\"\n        let-clearCallback=\"clearCallback\"\n        let-uploadCallback=\"uploadCallback\"\n      >\n        <div\n          class=\"flex flex-wrap justify-between items-center flex-1 gap-2\"\n        >\n          <div class=\"flex gap-2\">\n            <spiderly-button\n              [disabled]=\"disabled\"\n              (onClick)=\"choose($event, chooseCallback)\"\n              icon=\"pi pi-upload\"\n              [rounded]=\"true\"\n              [outlined]=\"true\"\n            />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template\n        pTemplate=\"content\"\n        let-files\n        let-removeFileCallback=\"removeFileCallback\"\n      >\n        <div *ngIf=\"existingFileUrl\">\n          <div class=\"flex justify-center p-0 gap-8\">\n            <div\n              class=\"card m-0 px-4 py-4 flex flex-col items-center gap-4\"\n              style=\"justify-content: center; overflow: hidden\"\n            >\n              <div *ngIf=\"existingFileIsImage\" class=\"image-container\">\n                <img [src]=\"existingFileUrl\" />\n              </div>\n              <div *ngIf=\"!existingFileIsImage\">\n                <i class=\"pi pi-file\" style=\"margin-right: 4px\"></i>\n                <span>{{ existingFileName }}</span>\n              </div>\n              <spiderly-button\n                [disabled]=\"disabled\"\n                icon=\"pi pi-times\"\n                (onClick)=\"removeExistingFile()\"\n                [outlined]=\"true\"\n                [rounded]=\"true\"\n                severity=\"danger\"\n              />\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"!existingFileUrl && files.length > 0\">\n          <div class=\"flex justify-center p-0 gap-8\">\n            <div\n              *ngFor=\"let file of files; let index = index\"\n              class=\"card m-0 px-4 py-4 flex flex-col items-center gap-4\"\n              style=\"justify-content: center; overflow: hidden\"\n            >\n              <div *ngIf=\"isFileImageType(file.type)\" class=\"image-container\">\n                <img role=\"presentation\" [src]=\"file.objectURL\" />\n              </div>\n              <div *ngIf=\"isExcelFileType(file.type)\" class=\"excel-container\">\n                <div class=\"excel-details\">\n                  <i\n                    class=\"pi pi-file-excel\"\n                    style=\"color: green; margin-right: 4px\"\n                  ></i>\n                  <span class=\"file-name\">{{ file.name }}</span>\n                </div>\n              </div>\n              <spiderly-button\n                [disabled]=\"disabled\"\n                icon=\"pi pi-times\"\n                (onClick)=\"fileRemoved(removeFileCallback, index)\"\n                [outlined]=\"true\"\n                [rounded]=\"true\"\n                severity=\"danger\"\n              />\n            </div>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"file\"> </ng-template>\n      <ng-template pTemplate=\"empty\">\n        <div *ngIf=\"!existingFileUrl\" class=\"flex items-center justify-center flex-col\">\n          <i\n            class=\"pi pi-cloud-upload border-2 rounded-full p-8 text-8xl text-gray-400 border-gray-400 mt-4\"\n          ></i>\n          <p class=\"mt-6 mb-0\">{{ t(\"DragAndDropFilesHereToUpload\") }}</p>\n        </div>\n      </ng-template>\n    </p-fileUpload>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i1.TranslocoService }, { type: SpiderlyMessageService }, { type: ValidatorAbstractService }], propDecorators: { onFileSelected: [{
                 type: Output
             }], onFileRemoved: [{
@@ -1349,7 +1336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }], multiple: [{
                 type: Input
-            }], isCloudinaryFileData: [{
+            }], isUrlFileData: [{
                 type: Input
             }], imageWidth: [{
                 type: Input
@@ -1983,33 +1970,6 @@ class BaseFormComponent {
                 this.baseFormService.showInvalidFieldsMessage();
             }
         };
-        /**
-         * Handles navigation after a successful save.
-         * Override this to customize the post-save navigation behavior.
-         * By default, navigates to the parent URL when `rerouteId` is not provided, or to the saved object's URL otherwise.
-         *
-         * @param rerouteId - The ID of the saved object, used to build the target URL. When not provided, navigates to the parent URL.
-         *
-         * @example
-         * ```ts
-         * // Override to navigate to a custom route after save
-         * rerouteToSavedObject = (rerouteId: number | string): void => {
-         *   this.router.navigateByUrl(`/products/${rerouteId}/details`);
-         * };
-         * ```
-         */
-        this.rerouteToSavedObject = (rerouteId) => {
-            if (rerouteId == null) {
-                const currentUrl = this.router.url;
-                const parentUrl = getParentUrl(currentUrl);
-                this.router.navigateByUrl(parentUrl);
-                return;
-            }
-            const segments = this.router.url.split('/');
-            segments[segments.length - 1] = rerouteId.toString();
-            const newUrl = segments.join('/');
-            this.router.navigateByUrl(newUrl);
-        };
         /**
          * Hook that runs **before** form validation and the save request.
          * Use this to modify the save body or perform any pre-save logic (e.g., transforming data, setting computed fields).
@@ -2050,6 +2010,33 @@ class BaseFormComponent {
         this.onAfterSaveRequest = () => { };
     }
     ngOnInit() { }
+    /**
+     * Handles navigation after a successful save.
+     * Override this to customize the post-save navigation behavior.
+     * By default, navigates to the parent URL when `rerouteId` is not provided, or to the saved object's URL otherwise.
+     *
+     * @param rerouteId - The ID of the saved object, used to build the target URL. When not provided, navigates to the parent URL.
+     *
+     * @example
+     * ```ts
+     * // Override to navigate to a custom route after save
+     * override rerouteToSavedObject(rerouteId: number | string): void {
+     *   this.router.navigateByUrl(`/products/${rerouteId}/details`);
+     * }
+     * ```
+     */
+    rerouteToSavedObject(rerouteId) {
+        if (rerouteId == null) {
+            const currentUrl = this.router.url;
+            const parentUrl = getParentUrl(currentUrl);
+            this.router.navigateByUrl(parentUrl);
+            return;
+        }
+        const segments = this.router.url.split('/');
+        segments[segments.length - 1] = rerouteId.toString();
+        const newUrl = segments.join('/');
+        this.router.navigateByUrl(newUrl);
+    }
     //#endregion
     //#region Model List
     getFormArrayControlByIndex(formControlName, formArray, index, filter) {
@@ -2193,11 +2180,6 @@ class ApiSecurityService {
         this.getCurrentUserPermissionCodes = () => {
             return this.http.get(`${this.config.apiUrl}/Security/GetCurrentUserPermissionCodes`, this.config.httpSkipSpinnerOptions);
         };
-        //#endregion
-        //#region Notification
-        this.getUnreadNotificationsCountForCurrentUser = () => {
-            return this.http.get(`${this.config.apiUrl}/Notification/GetUnreadNotificationsCountForCurrentUser`, this.config.httpSkipSpinnerOptions);
-        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ApiSecurityService, deps: [{ token: i1$2.HttpClient }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ApiSecurityService, providedIn: 'root' }); }
@@ -2868,11 +2850,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             }] } });
 
 class InitTopBarData extends BaseEntity {
-    constructor({ companyName, userProfilePath, unreadNotificationsCount, showProfileIcon, currentUser, } = {}) {
+    constructor({ companyName, userProfilePath, showProfileIcon, currentUser, } = {}) {
         super();
         this.companyName = companyName;
         this.userProfilePath = userProfilePath;
-        this.unreadNotificationsCount = unreadNotificationsCount;
         this.showProfileIcon = showProfileIcon;
         this.currentUser = currentUser;
     }
@@ -2884,8 +2865,6 @@ class LayoutServiceBase {
         this.apiService = apiService;
         this.config = config;
         this.authService = authService;
-        this._unreadNotificationsNumber = new BehaviorSubject(null);
-        this.unreadNotificationsCount$ = this._unreadNotificationsNumber.asObservable();
         this.layoutConfig = {
             ripple: false,
             inputStyle: 'outlined',
@@ -2908,34 +2887,12 @@ class LayoutServiceBase {
         this.overlayOpen = new Subject();
         this.configUpdate$ = this.configUpdate.asObservable();
         this.overlayOpen$ = this.overlayOpen.asObservable();
-        this.initUnreadNotificationsCountForCurrentUser = () => {
-            this.initUnreadNotificationsCountForCurrentUserObservable()
-                .pipe(delay$1(1), // HACK: Adding delay so both additionalObservable and user emits single null value when logout
-            withLatestFrom(this.authService.user$))
-                .subscribe(([additionalObservable, user]) => {
-                if (user != null && additionalObservable !== undefined) {
-                    this.setUnreadNotificationsCountForCurrentUser().subscribe();
-                }
-            });
-        };
-        this.initUnreadNotificationsCountForCurrentUserObservable = () => {
-            return this.authService.user$;
-        };
-        this.setUnreadNotificationsCountForCurrentUser = () => {
-            return this.apiService.getUnreadNotificationsCountForCurrentUser().pipe(map((unreadNotificationsCount) => {
-                this._unreadNotificationsNumber.next(unreadNotificationsCount);
-            }));
-        };
         //#region Top Bar
         this.initTopBarData = () => {
-            return combineLatest([
-                this.authService.user$,
-                this.unreadNotificationsCount$,
-            ]).pipe(map(([currentUser, unreadNotificationsCount]) => {
+            return this.authService.user$.pipe(map((currentUser) => {
                 return new InitTopBarData({
                     companyName: this.config.companyName,
                     userProfilePath: `/administration/users/${currentUser?.id}`,
-                    unreadNotificationsCount: unreadNotificationsCount,
                     showProfileIcon: true,
                     currentUser: currentUser,
                 });
@@ -3242,22 +3199,11 @@ class ProfileAvatarComponent {
         this.menuItems = [];
         this.initTopBarSubscription = null;
         this.showProfileIcon = false;
-        this.notificationMenuItem = {
-            label: this.translocoService.translate('Notifications'),
-            icon: 'pi-bell',
-            showNotificationBadge: true,
-            onClick: () => {
-                this.router.navigateByUrl(`/notifications`);
-            },
-        };
         this.onAfterNgOnInit = () => {
             this.initTopBarSubscription = this.layoutService
                 .initTopBarData()
                 .subscribe((initTopBarData) => {
                 this.userProfilePath = initTopBarData.userProfilePath;
-                this.unreadNotificationsCount = initTopBarData.unreadNotificationsCount;
-                this.notificationMenuItem.showNotificationBadge =
-                    initTopBarData.unreadNotificationsCount > 0;
                 this.showProfileIcon = initTopBarData.showProfileIcon;
                 this.currentUser = initTopBarData.currentUser;
                 this.avatarLabel = initTopBarData.currentUser?.email
@@ -3277,7 +3223,6 @@ class ProfileAvatarComponent {
                         this.routeToUserPage();
                     },
                 },
-                this.notificationMenuItem,
                 {
                     label: this.translocoService.translate('Logout'),
                     icon: 'pi-sign-out',
@@ -3319,7 +3264,7 @@ class ProfileAvatarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ProfileAvatarComponent, deps: [{ token: LayoutServiceBase }, { token: AuthServiceBase }, { token: i3$2.Router }, { token: i1.TranslocoService }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: ProfileAvatarComponent, isStandalone: true, selector: "spiderly-profile-avatar", inputs: { isSideMenuLayout: "isSideMenuLayout", routeOnLargeProfileAvatarClick: "routeOnLargeProfileAvatarClick", showLoginButton: "showLoginButton", routeToLoginPage: "routeToLoginPage", loginButtonOutlined: "loginButtonOutlined", loginButtonSeverity: "loginButtonSeverity", loginButtonSize: "loginButtonSize", menuItems: "menuItems" }, outputs: { onLoginButtonClick: "onLoginButtonClick" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["topbarmenu"], descendants: true }, { propertyName: "topbarProfileDropdownMenuButton", first: true, predicate: ["topbarprofiledropdownmenubutton"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div *ngIf=\"this.currentUser != null\" #topbarmenu>\n    <div\n      #topbarprofiledropdownmenubutton\n      (click)=\"layoutService.showProfileDropdownSidebar()\"\n    >\n      <p-avatar\n        *ngIf=\"showProfileIcon\"\n        [label]=\"avatarLabel\"\n        [style]=\"{\n          'background-color': 'var(--p-primary-color)',\n          color: '#fff',\n          cursor: 'pointer',\n          width: '34px',\n          height: '34px',\n          'font-size': '21px',\n        }\"\n        pBadge\n        [badgeStyleClass]=\"'p-badge-danger'\"\n        [badgeDisabled]=\"\n          unreadNotificationsCount == 0 || unreadNotificationsCount == null\n        \"\n        [value]=\"unreadNotificationsCount\"\n      />\n    </div>\n    <div #topbarprofiledropdownmenu (document:click)=\"onDocumentClick($event)\">\n      <div\n        *ngIf=\"layoutService.state.profileDropdownSidebarVisible\"\n        style=\"\n          width: 280px;\n          position: absolute;\n          padding: 15px;\n          background: var(--p-content-background);\n        \"\n        class=\"card\"\n        [ngClass]=\"{\n          'side-menu-profile-dialog': isSideMenuLayout,\n          'top-menu-profile-dialog': !isSideMenuLayout,\n        }\"\n      >\n        <div\n          style=\"\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            text-align: center;\n            gap: 10px;\n          \"\n        >\n          <p-avatar\n            [label]=\"avatarLabel\"\n            size=\"xlarge\"\n            [style]=\"{\n              'background-color': 'var(--p-primary-color)',\n              color: '#fff',\n              margin: 'auto',\n              cursor: routeOnLargeProfileAvatarClick ? 'pointer' : '',\n            }\"\n            (click)=\"routeToUserPage()\"\n          />\n          <div style=\"font-size: 15px\">{{ currentUser?.email }}</div>\n        </div>\n        <div style=\"margin-top: 15px\">\n          <div\n            *ngFor=\"let item of menuItems\"\n            [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\"\n          >\n            <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\n            <div\n              (click)=\"item.onClick()\"\n              class=\"hover-card\"\n              style=\"\n                display: flex;\n                align-items: center;\n                gap: 8px;\n                margin-top: 5px;\n              \"\n            >\n              <i\n                class=\"pi pi-fw {{ item.icon }}\"\n                style=\"font-size: 16px; position: relative\"\n              >\n                <span\n                  *ngIf=\"\n                    item.showNotificationBadge && unreadNotificationsCount != 0\n                  \"\n                  class=\"badge\"\n                ></span>\n              </i>\n              <div style=\"font-size: 15px\">{{ item.label }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"this.currentUser == null && this.showLoginButton\">\n    <spiderly-button\n      [label]=\"t('Login')\"\n      (onClick)=\"loginButtonClick()\"\n      icon=\"pi pi-sign-in\"\n      [outlined]=\"loginButtonOutlined\"\n      [severity]=\"loginButtonSeverity\"\n      [size]=\"loginButtonSize\"\n    ></spiderly-button>\n  </div>\n</ng-container>\n", styles: [".side-menu-profile-dialog{right:26px;top:60px}.top-menu-profile-dialog{right:0;top:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i7.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "directive", type: i8.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: ProfileAvatarComponent, isStandalone: true, selector: "spiderly-profile-avatar", inputs: { isSideMenuLayout: "isSideMenuLayout", routeOnLargeProfileAvatarClick: "routeOnLargeProfileAvatarClick", showLoginButton: "showLoginButton", routeToLoginPage: "routeToLoginPage", loginButtonOutlined: "loginButtonOutlined", loginButtonSeverity: "loginButtonSeverity", loginButtonSize: "loginButtonSize", menuItems: "menuItems" }, outputs: { onLoginButtonClick: "onLoginButtonClick" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["topbarmenu"], descendants: true }, { propertyName: "topbarProfileDropdownMenuButton", first: true, predicate: ["topbarprofiledropdownmenubutton"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div *ngIf=\"this.currentUser != null\" #topbarmenu>\n    <div\n      #topbarprofiledropdownmenubutton\n      (click)=\"layoutService.showProfileDropdownSidebar()\"\n    >\n      <p-avatar\n        *ngIf=\"showProfileIcon\"\n        [label]=\"avatarLabel\"\n        [style]=\"{\n          'background-color': 'var(--p-primary-color)',\n          color: '#fff',\n          cursor: 'pointer',\n          width: '34px',\n          height: '34px',\n          'font-size': '21px',\n        }\"\n      />\n    </div>\n    <div #topbarprofiledropdownmenu (document:click)=\"onDocumentClick($event)\">\n      <div\n        *ngIf=\"layoutService.state.profileDropdownSidebarVisible\"\n        style=\"\n          width: 280px;\n          position: absolute;\n          padding: 15px;\n          background: var(--p-content-background);\n        \"\n        class=\"card\"\n        [ngClass]=\"{\n          'side-menu-profile-dialog': isSideMenuLayout,\n          'top-menu-profile-dialog': !isSideMenuLayout,\n        }\"\n      >\n        <div\n          style=\"\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            text-align: center;\n            gap: 10px;\n          \"\n        >\n          <p-avatar\n            [label]=\"avatarLabel\"\n            size=\"xlarge\"\n            [style]=\"{\n              'background-color': 'var(--p-primary-color)',\n              color: '#fff',\n              margin: 'auto',\n              cursor: routeOnLargeProfileAvatarClick ? 'pointer' : '',\n            }\"\n            (click)=\"routeToUserPage()\"\n          />\n          <div style=\"font-size: 15px\">{{ currentUser?.email }}</div>\n        </div>\n        <div style=\"margin-top: 15px\">\n          <div\n            *ngFor=\"let item of menuItems\"\n            [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\"\n          >\n            <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\n            <div\n              (click)=\"item.onClick()\"\n              class=\"hover-card\"\n              style=\"\n                display: flex;\n                align-items: center;\n                gap: 8px;\n                margin-top: 5px;\n              \"\n            >\n              <i\n                class=\"pi pi-fw {{ item.icon }}\"\n                style=\"font-size: 16px; position: relative\"\n              ></i>\n              <div style=\"font-size: 15px\">{{ item.label }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"this.currentUser == null && this.showLoginButton\">\n    <spiderly-button\n      [label]=\"t('Login')\"\n      (onClick)=\"loginButtonClick()\"\n      icon=\"pi pi-sign-in\"\n      [outlined]=\"loginButtonOutlined\"\n      [severity]=\"loginButtonSeverity\"\n      [size]=\"loginButtonSize\"\n    ></spiderly-button>\n  </div>\n</ng-container>\n", styles: [".side-menu-profile-dialog{right:26px;top:60px}.top-menu-profile-dialog{right:0;top:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i7.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ProfileAvatarComponent, decorators: [{
             type: Component,
@@ -3327,10 +3272,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         RouterModule,
                         AvatarModule,
-                        BadgeModule,
                         SpiderlyButtonComponent,
                         TranslocoDirective,
-                    ], template: "<ng-container *transloco=\"let t\">\n  <div *ngIf=\"this.currentUser != null\" #topbarmenu>\n    <div\n      #topbarprofiledropdownmenubutton\n      (click)=\"layoutService.showProfileDropdownSidebar()\"\n    >\n      <p-avatar\n        *ngIf=\"showProfileIcon\"\n        [label]=\"avatarLabel\"\n        [style]=\"{\n          'background-color': 'var(--p-primary-color)',\n          color: '#fff',\n          cursor: 'pointer',\n          width: '34px',\n          height: '34px',\n          'font-size': '21px',\n        }\"\n        pBadge\n        [badgeStyleClass]=\"'p-badge-danger'\"\n        [badgeDisabled]=\"\n          unreadNotificationsCount == 0 || unreadNotificationsCount == null\n        \"\n        [value]=\"unreadNotificationsCount\"\n      />\n    </div>\n    <div #topbarprofiledropdownmenu (document:click)=\"onDocumentClick($event)\">\n      <div\n        *ngIf=\"layoutService.state.profileDropdownSidebarVisible\"\n        style=\"\n          width: 280px;\n          position: absolute;\n          padding: 15px;\n          background: var(--p-content-background);\n        \"\n        class=\"card\"\n        [ngClass]=\"{\n          'side-menu-profile-dialog': isSideMenuLayout,\n          'top-menu-profile-dialog': !isSideMenuLayout,\n        }\"\n      >\n        <div\n          style=\"\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            text-align: center;\n            gap: 10px;\n          \"\n        >\n          <p-avatar\n            [label]=\"avatarLabel\"\n            size=\"xlarge\"\n            [style]=\"{\n              'background-color': 'var(--p-primary-color)',\n              color: '#fff',\n              margin: 'auto',\n              cursor: routeOnLargeProfileAvatarClick ? 'pointer' : '',\n            }\"\n            (click)=\"routeToUserPage()\"\n          />\n          <div style=\"font-size: 15px\">{{ currentUser?.email }}</div>\n        </div>\n        <div style=\"margin-top: 15px\">\n          <div\n            *ngFor=\"let item of menuItems\"\n            [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\"\n          >\n            <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\n            <div\n              (click)=\"item.onClick()\"\n              class=\"hover-card\"\n              style=\"\n                display: flex;\n                align-items: center;\n                gap: 8px;\n                margin-top: 5px;\n              \"\n            >\n              <i\n                class=\"pi pi-fw {{ item.icon }}\"\n                style=\"font-size: 16px; position: relative\"\n              >\n                <span\n                  *ngIf=\"\n                    item.showNotificationBadge && unreadNotificationsCount != 0\n                  \"\n                  class=\"badge\"\n                ></span>\n              </i>\n              <div style=\"font-size: 15px\">{{ item.label }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"this.currentUser == null && this.showLoginButton\">\n    <spiderly-button\n      [label]=\"t('Login')\"\n      (onClick)=\"loginButtonClick()\"\n      icon=\"pi pi-sign-in\"\n      [outlined]=\"loginButtonOutlined\"\n      [severity]=\"loginButtonSeverity\"\n      [size]=\"loginButtonSize\"\n    ></spiderly-button>\n  </div>\n</ng-container>\n", styles: [".side-menu-profile-dialog{right:26px;top:60px}.top-menu-profile-dialog{right:0;top:40px}\n"] }]
+                    ], template: "<ng-container *transloco=\"let t\">\n  <div *ngIf=\"this.currentUser != null\" #topbarmenu>\n    <div\n      #topbarprofiledropdownmenubutton\n      (click)=\"layoutService.showProfileDropdownSidebar()\"\n    >\n      <p-avatar\n        *ngIf=\"showProfileIcon\"\n        [label]=\"avatarLabel\"\n        [style]=\"{\n          'background-color': 'var(--p-primary-color)',\n          color: '#fff',\n          cursor: 'pointer',\n          width: '34px',\n          height: '34px',\n          'font-size': '21px',\n        }\"\n      />\n    </div>\n    <div #topbarprofiledropdownmenu (document:click)=\"onDocumentClick($event)\">\n      <div\n        *ngIf=\"layoutService.state.profileDropdownSidebarVisible\"\n        style=\"\n          width: 280px;\n          position: absolute;\n          padding: 15px;\n          background: var(--p-content-background);\n        \"\n        class=\"card\"\n        [ngClass]=\"{\n          'side-menu-profile-dialog': isSideMenuLayout,\n          'top-menu-profile-dialog': !isSideMenuLayout,\n        }\"\n      >\n        <div\n          style=\"\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            text-align: center;\n            gap: 10px;\n          \"\n        >\n          <p-avatar\n            [label]=\"avatarLabel\"\n            size=\"xlarge\"\n            [style]=\"{\n              'background-color': 'var(--p-primary-color)',\n              color: '#fff',\n              margin: 'auto',\n              cursor: routeOnLargeProfileAvatarClick ? 'pointer' : '',\n            }\"\n            (click)=\"routeToUserPage()\"\n          />\n          <div style=\"font-size: 15px\">{{ currentUser?.email }}</div>\n        </div>\n        <div style=\"margin-top: 15px\">\n          <div\n            *ngFor=\"let item of menuItems\"\n            [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\"\n          >\n            <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\n            <div\n              (click)=\"item.onClick()\"\n              class=\"hover-card\"\n              style=\"\n                display: flex;\n                align-items: center;\n                gap: 8px;\n                margin-top: 5px;\n              \"\n            >\n              <i\n                class=\"pi pi-fw {{ item.icon }}\"\n                style=\"font-size: 16px; position: relative\"\n              ></i>\n              <div style=\"font-size: 15px\">{{ item.label }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"this.currentUser == null && this.showLoginButton\">\n    <spiderly-button\n      [label]=\"t('Login')\"\n      (onClick)=\"loginButtonClick()\"\n      icon=\"pi pi-sign-in\"\n      [outlined]=\"loginButtonOutlined\"\n      [severity]=\"loginButtonSeverity\"\n      [size]=\"loginButtonSize\"\n    ></spiderly-button>\n  </div>\n</ng-container>\n", styles: [".side-menu-profile-dialog{right:26px;top:60px}.top-menu-profile-dialog{right:0;top:40px}\n"] }]
         }], ctorParameters: () => [{ type: LayoutServiceBase }, { type: AuthServiceBase }, { type: i3$2.Router }, { type: i1.TranslocoService }, { type: ConfigServiceBase }], propDecorators: { isSideMenuLayout: [{
                 type: Input
             }], routeOnLargeProfileAvatarClick: [{
@@ -4872,7 +4816,11 @@ const unauthorizedInterceptor = (req, next) => {
             return of(err.message);
         }
         else if (err.status == 401) {
-            messageService.warningMessage(errorResponse.message ?? translocoService.translate('LoginRequired'), translocoService.translate('Warning'));
+            if (errorResponse?.errorCode === ApiErrorCodes.InvalidToken) {
+                authService.clearLocalStorage();
+                return of(err.message);
+            }
+            messageService.warningMessage(errorResponse?.message ?? translocoService.translate('LoginRequired'), translocoService.translate('Warning'));
             return of(err.message);
         }
         else if (err.status == 403) {
@@ -4883,11 +4831,6 @@ const unauthorizedInterceptor = (req, next) => {
             messageService.warningMessage(translocoService.translate('NotFoundDetails'), translocoService.translate('NotFoundTitle'));
             return of(err.message);
         }
-        else if (err.status == 419) {
-            // Access token expired
-            authService.clearLocalStorage();
-            return of(err.message);
-        }
         else {
             messageService.errorMessage(translocoService.translate('UnexpectedErrorDetails'), translocoService.translate('UnexpectedErrorTitle'));
             return of(err.message);
@@ -4951,5 +4894,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Action, AllClickEvent, ApiSecurityService, AppSidebarComponent, AuthGuard, AuthResult, AuthResultWithCookies, AuthServiceBase, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormComponent, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigServiceBase, ExternalProvider, Filter, FilterRule, FilterSortMeta, FooterComponent, GoogleButtonComponent, IndexCardComponent, InfoCardComponent, InitCompanyAuthDialogDetails, InitTopBarData, IsAuthorizedForSaveEvent, LastMenuIconIndexClicked, LayoutServiceBase, LazyLoadSelectedIdsResult, Login, LoginComponent, LoginVerificationComponent, LoginVerificationToken, MatchModeCodes, MenuChangeEvent, MenuitemComponent, Namebook, NotAuthGuard, NotFoundComponent, PROPS_KEY, PaginatedResult, PanelBodyComponent, PanelFooterComponent, PanelHeaderComponent, PrimengOption, ProfileAvatarComponent, ReflectProp, RefreshTokenRequest, RequiredComponent, RowClickEvent, SecurityPermissionCodes, SendLoginVerificationEmailResult, SideMenuTopBarComponent, SidebarMenuComponent, SimpleSaveResult, SpiderlyAutocompleteComponent, SpiderlyButtonBaseComponent, SpiderlyButtonComponent, SpiderlyCalendarComponent, SpiderlyCardComponent, SpiderlyCheckboxComponent, SpiderlyColorPickerComponent, SpiderlyControlsModule, SpiderlyDataTableComponent, SpiderlyDataViewComponent, SpiderlyDeleteConfirmationComponent, SpiderlyDropdownComponent, SpiderlyEditorComponent, SpiderlyErrorHandler, SpiderlyFileComponent, SpiderlyFileSelectEvent, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyLayoutComponent, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTemplateTypeDirective, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoLoader, TopBarComponent, UserBase, UserRole, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, capitalizeFirstChar, createFakeGoogleWrapper, deleteAction, exportListToExcel, firstCharToUpper, getFileNameFromContentDisposition, getHtmlImgDisplayString64, getImageDimensions, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, httpLoadingInterceptor, isExcelFileType, isFileImageType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, kebabToTitleCase, nameOf, nameof, primitiveArrayTypes, pushAction, selectedTab, singleOrDefault, splitPascalCase, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
+export { Action, AllClickEvent, ApiErrorCodes, ApiSecurityService, AppSidebarComponent, AuthGuard, AuthResult, AuthResultWithCookies, AuthServiceBase, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormComponent, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigServiceBase, ExternalProvider, Filter, FilterRule, FilterSortMeta, FooterComponent, GoogleButtonComponent, IndexCardComponent, InfoCardComponent, InitCompanyAuthDialogDetails, InitTopBarData, IsAuthorizedForSaveEvent, LastMenuIconIndexClicked, LayoutServiceBase, LazyLoadSelectedIdsResult, Login, LoginComponent, LoginVerificationComponent, LoginVerificationToken, MatchModeCodes, MenuChangeEvent, MenuitemComponent, Namebook, NotAuthGuard, NotFoundComponent, PROPS_KEY, PaginatedResult, PanelBodyComponent, PanelFooterComponent, PanelHeaderComponent, PrimengOption, ProfileAvatarComponent, ReflectProp, RefreshTokenRequest, RequiredComponent, RowClickEvent, SecurityPermissionCodes, SendLoginVerificationEmailResult, SideMenuTopBarComponent, SidebarMenuComponent, SimpleSaveResult, SpiderlyAutocompleteComponent, SpiderlyButtonBaseComponent, SpiderlyButtonComponent, SpiderlyCalendarComponent, SpiderlyCardComponent, SpiderlyCheckboxComponent, SpiderlyColorPickerComponent, SpiderlyControlsModule, SpiderlyDataTableComponent, SpiderlyDataViewComponent, SpiderlyDeleteConfirmationComponent, SpiderlyDropdownComponent, SpiderlyEditorComponent, SpiderlyErrorHandler, SpiderlyFileComponent, SpiderlyFileSelectEvent, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyLayoutComponent, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTemplateTypeDirective, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoLoader, TopBarComponent, UserBase, UserRole, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, capitalizeFirstChar, createFakeGoogleWrapper, deleteAction, exportListToExcel, firstCharToUpper, getFileNameFromContentDisposition, getHtmlImgDisplayString64, getImageDimensions, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, httpLoadingInterceptor, isExcelFileType, isFileImageType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, kebabToTitleCase, nameOf, nameof, primitiveArrayTypes, pushAction, selectedTab, singleOrDefault, splitPascalCase, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
 //# sourceMappingURL=spiderly.mjs.map