spiderly 19.5.3 → 19.5.4-preview.1

package/fesm2022/spiderly.mjs

@@ -209,7 +209,7 @@ class SpiderlyFormGroup extends FormGroup {
     constructor(controls) {
         super(controls);
         this.trackingId = crypto.randomUUID();
-        this.initSaveBody = () => null;
+        // TODO: Delete controlNamesFromHtml and add UIDoNotGenerate flag into ng entity generator, we shouldn't even add those into parentFormGroup
         this.controlNamesFromHtml = [];
         this.getControl = (formControlName) => {
             if (this.controlNamesFromHtml.findIndex((x) => x === formControlName) === -1)
@@ -285,10 +285,10 @@ class SpiderlyFormArray extends FormArray {
 class ValidatorAbstractService {
     constructor(translocoService) {
         this.translocoService = translocoService;
-        this.isArrayEmpty = (control) => {
+        this.notEmpty = (control) => {
             const validator = () => {
                 const value = control.value;
-                const notEmptyRule = typeof value !== 'undefined' && value !== null && value.length !== 0;
+                const notEmptyRule = typeof value !== 'undefined' && value !== null && value !== '';
                 const arrayValid = notEmptyRule;
                 return arrayValid
                     ? null
@@ -296,25 +296,32 @@ class ValidatorAbstractService {
             };
             validator.hasNotEmptyRule = true;
             control.required = true;
-            return validator;
+            control.validator = validator;
+            control.updateValueAndValidity();
         };
-        this.notEmpty = (control) => {
+        /** Validates that a SpiderlyFormArray (collection of form controls/groups) is not empty. */
+        this.isFormArrayEmpty = (control) => {
             const validator = () => {
-                const value = control.value;
-                const notEmptyRule = typeof value !== 'undefined' && value !== null && value !== '';
+                const value = control;
+                const notEmptyRule = typeof value !== 'undefined' && value !== null && value.length !== 0;
                 const arrayValid = notEmptyRule;
                 return arrayValid
                     ? null
-                    : { _: this.translocoService.translate('NotEmpty') };
+                    : {
+                        _: this.translocoService.translate('ListCanNotBeEmpty', {
+                            value: control.labelForDisplay,
+                        }),
+                    };
             };
             validator.hasNotEmptyRule = true;
             control.required = true;
-            control.validator = validator;
+            control.setValidators(validator);
             control.updateValueAndValidity();
         };
-        this.isFormArrayEmpty = (control) => {
+        /** Validates that a SpiderlyFormControl holding an array value (e.g., multi-select dropdown) is not empty. */
+        this.isArrayEmpty = (control) => {
             const validator = () => {
-                const value = control;
+                const value = control.value;
                 const notEmptyRule = typeof value !== 'undefined' && value !== null && value.length !== 0;
                 const arrayValid = notEmptyRule;
                 return arrayValid
@@ -743,10 +750,36 @@ class SpiderlyEditorComponent extends BaseControl {
     constructor(translocoService) {
         super(translocoService);
         this.translocoService = translocoService;
+        this.objectId = 0;
     }
     ngOnInit() {
         super.ngOnInit();
     }
+    onEditorInit(event) {
+        const quill = event.editor;
+        if (this.uploadImageMethod) {
+            const toolbar = quill.getModule('toolbar');
+            toolbar.addHandler('image', () => this.imageHandler(quill));
+        }
+    }
+    imageHandler(quill) {
+        const input = document.createElement('input');
+        input.setAttribute('type', 'file');
+        input.setAttribute('accept', 'image/*');
+        input.click();
+        input.onchange = async () => {
+            const file = input.files[0];
+            if (file) {
+                const formData = new FormData();
+                formData.append('file', file, `${this.objectId}-${file.name}`);
+                this.uploadImageMethod(formData).subscribe((imageUrl) => {
+                    const range = quill.getSelection(true);
+                    quill.insertEmbed(range.index, 'image', imageUrl);
+                    quill.setSelection(range.index + 1);
+                });
+            }
+        };
+    }
     onClick() {
         let editableArea = this.editor.el.nativeElement.querySelector('.ql-editor');
         editableArea.onblur = () => {
@@ -765,7 +798,7 @@ class SpiderlyEditorComponent extends BaseControl {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyEditorComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyEditorComponent, isStandalone: true, selector: "spiderly-editor", viewQueries: [{ propertyName: "editor", first: true, predicate: Editor, descendants: true }, { propertyName: "tooltip", first: true, predicate: Tooltip, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n\n  <!-- Disable doesn't work on this control -->\n  <p-editor\n    *ngIf=\"control\"\n    [formControl]=\"control\"\n    [pTooltip]=\"getValidationErrrorMessages()\"\n    [tooltipEvent]=\"errorMessageTooltipEvent\"\n    tooltipPosition=\"bottom\"\n    [tooltipDisabled]=\"control.valid\"\n    tooltipStyleClass=\"spiderly-tooltip-invalid\"\n    [readonly]=\"control.disabled\"\n    [class]=\"control.invalid && control.dirty ? 'control-error-border' : ''\"\n    [id]=\"control.label\"\n    [placeholder]=\"placeholder\"\n    (click)=\"onClick()\"\n    [style]=\"{ height: '320px' }\"\n  ></p-editor>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i4$8.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyEditorComponent, isStandalone: true, selector: "spiderly-editor", inputs: { uploadImageMethod: "uploadImageMethod", objectId: "objectId" }, viewQueries: [{ propertyName: "editor", first: true, predicate: Editor, descendants: true }, { propertyName: "tooltip", first: true, predicate: Tooltip, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1px\">\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n\n  <!-- Disable doesn't work on this control -->\n  <p-editor\n    *ngIf=\"control\"\n    [formControl]=\"control\"\n    [pTooltip]=\"getValidationErrrorMessages()\"\n    [tooltipEvent]=\"errorMessageTooltipEvent\"\n    tooltipPosition=\"bottom\"\n    [tooltipDisabled]=\"control.valid\"\n    tooltipStyleClass=\"spiderly-tooltip-invalid\"\n    [readonly]=\"control.disabled\"\n    [class]=\"control.invalid && control.dirty ? 'control-error-border' : ''\"\n    [id]=\"control.label\"\n    [placeholder]=\"placeholder\"\n    (click)=\"onClick()\"\n    (onInit)=\"onEditorInit($event)\"\n    [style]=\"{ height: '320px' }\"\n  ></p-editor>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i4$8.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyEditorComponent, decorators: [{
             type: Component,
@@ -776,13 +809,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         EditorModule,
                         TooltipModule,
                         RequiredComponent,
-                    ], template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n\n  <!-- Disable doesn't work on this control -->\n  <p-editor\n    *ngIf=\"control\"\n    [formControl]=\"control\"\n    [pTooltip]=\"getValidationErrrorMessages()\"\n    [tooltipEvent]=\"errorMessageTooltipEvent\"\n    tooltipPosition=\"bottom\"\n    [tooltipDisabled]=\"control.valid\"\n    tooltipStyleClass=\"spiderly-tooltip-invalid\"\n    [readonly]=\"control.disabled\"\n    [class]=\"control.invalid && control.dirty ? 'control-error-border' : ''\"\n    [id]=\"control.label\"\n    [placeholder]=\"placeholder\"\n    (click)=\"onClick()\"\n    [style]=\"{ height: '320px' }\"\n  ></p-editor>\n</div>\n" }]
+                    ], template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1px\">\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n\n  <!-- Disable doesn't work on this control -->\n  <p-editor\n    *ngIf=\"control\"\n    [formControl]=\"control\"\n    [pTooltip]=\"getValidationErrrorMessages()\"\n    [tooltipEvent]=\"errorMessageTooltipEvent\"\n    tooltipPosition=\"bottom\"\n    [tooltipDisabled]=\"control.valid\"\n    tooltipStyleClass=\"spiderly-tooltip-invalid\"\n    [readonly]=\"control.disabled\"\n    [class]=\"control.invalid && control.dirty ? 'control-error-border' : ''\"\n    [id]=\"control.label\"\n    [placeholder]=\"placeholder\"\n    (click)=\"onClick()\"\n    (onInit)=\"onEditorInit($event)\"\n    [style]=\"{ height: '320px' }\"\n  ></p-editor>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { editor: [{
                 type: ViewChild,
                 args: [Editor]
             }], tooltip: [{
                 type: ViewChild,
                 args: [Tooltip]
+            }], uploadImageMethod: [{
+                type: Input
+            }], objectId: [{
+                type: Input
             }] } });
 
 class SpiderlyButtonBaseComponent {
@@ -887,6 +924,7 @@ function getMimeTypeForFileName(fileName) {
         '.png': 'image/png',
         '.webp': 'image/webp',
         '.gif': 'image/gif',
+        '.svg': 'image/svg+xml',
         '.pdf': 'application/pdf',
         '.txt': 'text/plain',
         '.html': 'text/html',
@@ -1033,7 +1071,7 @@ function toCommaSeparatedString(input) {
         return stringList[0] ?? '';
     }
 }
-function isImageFileType(mimeType) {
+function isFileImageType(mimeType) {
     if (mimeType.startsWith('image/')) {
         return true;
     }
@@ -1136,6 +1174,16 @@ const primitiveArrayTypes = [
     'Date[]',
     'string[]',
 ];
+function getImageDimensions(file) {
+    return new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => {
+            resolve({ width: img.width, height: img.height });
+            URL.revokeObjectURL(img.src);
+        };
+        img.src = URL.createObjectURL(file);
+    });
+}
 
 class SpiderlyMessageService {
     // TODO FT: nece da prikaze poruku ako je neki angular error koji se dogodi tek nakon api poziva
@@ -1221,7 +1269,7 @@ class SpiderlyFileComponent extends BaseControl {
     }
     filesSelected(event) {
         const file = event.files[0];
-        if (this.isImageFileType(file.type) &&
+        if (this.isFileImageType(file.type) &&
             this.hasImageDimensionConstraints()) {
             this.files = [];
             this.validatorService
@@ -1240,10 +1288,17 @@ class SpiderlyFileComponent extends BaseControl {
             this.emitFileSelected(file);
         }
     }
-    emitFileSelected(file) {
+    async emitFileSelected(file) {
         const formData = new FormData();
         formData.append('file', file, `${this.objectId}-${file.name}`);
-        this.onFileSelected.next(new SpiderlyFileSelectEvent({ file: file, formData: formData }));
+        let width;
+        let height;
+        if (this.isFileImageType(file.type)) {
+            const dimensions = await getImageDimensions(file);
+            width = dimensions.width;
+            height = dimensions.height;
+        }
+        this.onFileSelected.next(new SpiderlyFileSelectEvent({ file, formData, width, height }));
     }
     hasImageDimensionConstraints() {
         return this.imageWidth > 0 || this.imageHeight > 0;
@@ -1284,14 +1339,14 @@ class SpiderlyFileComponent extends BaseControl {
         const file = new File([blob], fileName, { type: mimeType });
         return file;
     }
-    isImageFileType(mimeType) {
-        return isImageFileType(mimeType);
+    isFileImageType(mimeType) {
+        return isFileImageType(mimeType);
     }
     isExcelFileType(mimeType) {
         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", 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]=\"1000000\"\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-content-between align-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-content-center p-0 gap-5\">\n            <div\n              *ngFor=\"let file of files; let index = index\"\n              class=\"card m-0 px-3 py-3 flex flex-column align-items-center gap-3\"\n              style=\"justify-content: center; overflow: hidden\"\n            >\n              <div *ngIf=\"isImageFileType(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 align-items-center justify-content-center flex-column\">\n          <i\n            class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400 mt-3\"\n          ></i>\n          <p class=\"mt-4 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$2.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", isCloudinaryFileData: "isCloudinaryFileData", imageWidth: "imageWidth", imageHeight: "imageHeight", 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]=\"1000000\"\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-content-between align-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-content-center p-0 gap-5\">\n            <div\n              *ngFor=\"let file of files; let index = index\"\n              class=\"card m-0 px-3 py-3 flex flex-column align-items-center gap-3\"\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 align-items-center justify-content-center flex-column\">\n          <i\n            class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400 mt-3\"\n          ></i>\n          <p class=\"mt-4 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$2.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,
@@ -1303,7 +1358,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]=\"1000000\"\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-content-between align-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-content-center p-0 gap-5\">\n            <div\n              *ngFor=\"let file of files; let index = index\"\n              class=\"card m-0 px-3 py-3 flex flex-column align-items-center gap-3\"\n              style=\"justify-content: center; overflow: hidden\"\n            >\n              <div *ngIf=\"isImageFileType(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 align-items-center justify-content-center flex-column\">\n          <i\n            class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400 mt-3\"\n          ></i>\n          <p class=\"mt-4 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]=\"1000000\"\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-content-between align-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-content-center p-0 gap-5\">\n            <div\n              *ngFor=\"let file of files; let index = index\"\n              class=\"card m-0 px-3 py-3 flex flex-column align-items-center gap-3\"\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 align-items-center justify-content-center flex-column\">\n          <i\n            class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400 mt-3\"\n          ></i>\n          <p class=\"mt-4 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: [{
@@ -1328,10 +1383,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }] } });
 class SpiderlyFileSelectEvent extends BaseEntity {
-    constructor({ file, formData, } = {}) {
+    constructor({ file, formData, width, height, } = {}) {
         super();
         this.file = file;
         this.formData = formData;
+        this.width = width;
+        this.height = height;
     }
     static { this.typeName = 'SpiderlyFileSelectEvent'; }
 }
@@ -1548,12 +1605,12 @@ class UserRole extends BaseEntity {
 }
 class LoginVerificationToken extends BaseEntity {
     static { this.typeName = 'LoginVerificationToken'; }
-    constructor({ email, userId, browserId, expireAt, } = {}) {
+    constructor({ email, userId, browserId, expiresAt, } = {}) {
         super();
         this.email = email;
         this.userId = userId;
         this.browserId = browserId;
-        this.expireAt = expireAt;
+        this.expiresAt = expiresAt;
     }
     static { this.schema = {
         email: {
@@ -1565,7 +1622,7 @@ class LoginVerificationToken extends BaseEntity {
         browserId: {
             type: 'string',
         },
-        expireAt: {
+        expiresAt: {
             type: 'Date',
         },
     }; }
@@ -1622,21 +1679,8 @@ class SpiderlyError extends Error {
     }
 }
 
-class TranslateLabelsAbstractService {
-    constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TranslateLabelsAbstractService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TranslateLabelsAbstractService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TranslateLabelsAbstractService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
 class BaseFormService {
-    constructor(translateLabelsService, validatorService, messageService, translocoService) {
-        this.translateLabelsService = translateLabelsService;
+    constructor(validatorService, messageService, translocoService) {
         this.validatorService = validatorService;
         this.messageService = messageService;
         this.translocoService = translocoService;
@@ -1656,12 +1700,14 @@ class BaseFormService {
                     propSchema.type !== 'Namebook[]') {
                     if (existingControl instanceof SpiderlyFormArray) {
                         this.initFormArray(existingControl, propSchema.nestedConstructor, propInitialValue);
+                        this.validatorService.setFormArrayValidator(existingControl, targetClass.typeName);
                     }
                     else {
                         const control = new SpiderlyFormArray([], this.translocoService, this);
                         this.initFormArray(control, propSchema.nestedConstructor, propInitialValue);
                         control.label = formControlName;
                         control.labelForDisplay = this.getTranslatedLabel(formControlName);
+                        this.validatorService.setFormArrayValidator(control, targetClass.typeName);
                         formGroup.setControl(formControlName, control);
                     }
                 }
@@ -1681,6 +1727,9 @@ class BaseFormService {
                     if (formControlName === 'id' && !propInitialValue) {
                         propInitialValue = 0;
                     }
+                    if (propSchema.type.endsWith('[]') && propInitialValue == null) {
+                        propInitialValue = [];
+                    }
                     if (existingControl instanceof SpiderlyFormControl) {
                         existingControl.setValue(propInitialValue);
                     }
@@ -1755,7 +1804,7 @@ class BaseFormService {
         else if (formControlName.endsWith('DisplayName')) {
             formControlName = formControlName.replace('DisplayName', '');
         }
-        return this.translateLabelsService.translate(formControlName);
+        return this.translocoService.translate(firstCharToUpper(formControlName));
     }
     addNewFormGroupToFormArray(formArray, targetClass, initialValues, index) {
         let helperFormGroup = new SpiderlyFormGroup({});
@@ -1815,6 +1864,11 @@ class BaseFormService {
             });
         }
         else if (control instanceof SpiderlyFormArray) {
+            if (control.errors) {
+                control.markAsDirty();
+                this.messageService.warningMessage(control.errors['_']);
+                invalid = true;
+            }
             control.controls.forEach((nestedControl) => {
                 if (!this.isControlValid(nestedControl)) {
                     invalid = true;
@@ -1826,7 +1880,7 @@ class BaseFormService {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormService, deps: [{ token: TranslateLabelsAbstractService }, { token: ValidatorAbstractService }, { token: SpiderlyMessageService }, { token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormService, deps: [{ token: ValidatorAbstractService }, { token: SpiderlyMessageService }, { token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormService, decorators: [{
@@ -1834,7 +1888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: TranslateLabelsAbstractService }, { type: ValidatorAbstractService }, { type: SpiderlyMessageService }, { type: i1.TranslocoService }] });
+        }], ctorParameters: () => [{ type: ValidatorAbstractService }, { type: SpiderlyMessageService }, { type: i1.TranslocoService }] });
 
 class BaseFormCopy {
     constructor(differs, http, messageService, changeDetectorRef, router, route, translocoService, baseFormService) {
@@ -1846,28 +1900,81 @@ class BaseFormCopy {
         this.route = route;
         this.translocoService = translocoService;
         this.baseFormService = baseFormService;
+        /**
+         * The root form group that holds all form controls, typed to `TSaveBody`.
+         * Assign `saveObservableMethod` on it to define the HTTP call used for saving.
+         * The form controls are built automatically from the `TSaveBody` schema when you call
+         * `baseFormService.initFormGroup(this.parentFormGroup, saveBodyClass, saveBody)`.
+         *
+         * @example
+         * ```ts
+         * this.parentFormGroup.saveObservableMethod = this.apiService.saveProduct;
+         *
+         * this.baseFormService.initFormGroup(
+         *   this.parentFormGroup,
+         *   ProductSaveBody,
+         *   saveBody,
+         * );
+         * ```
+         */
         this.parentFormGroup = new SpiderlyFormGroup({});
+        /**
+         * The toast message displayed after a successful save.
+         * Override this to customize the success notification text for a specific entity.
+         * If you want to change the message for all entities, update the `SuccessfulSaveToastDescription` key
+         * in your translation JSON file instead.
+         *
+         * @example
+         * ```ts
+         * this.successfulSaveToastDescription = 'Product saved successfully!';
+         * ```
+         */
         this.successfulSaveToastDescription = this.translocoService.translate('SuccessfulSaveToastDescription');
         //#region Model
+        /**
+         * Executes the save flow for the form. The execution order is:
+         * 1. Builds the save body from the form's raw value.
+         * 2. Calls {@link onBeforeSave} — use this to modify the save body before validation.
+         * 3. Validates the form. If invalid, shows an error message and stops.
+         * 4. Sends the save HTTP request via `saveObservableMethod`.
+         * 5. Calls {@link onAfterSaveRequest} — fires immediately after the request is sent, before the response arrives.
+         * 6. On successful response: shows a success toast, reroutes, and calls {@link onAfterSave}. The form is re-initialized only when `rerouteToParentSlugAfterSave` is `false`.
+         *
+         * @param rerouteToParentSlugAfterSave - When `true` (default), navigates to the parent URL after save. When `false`, re-initializes the form and navigates to the saved object's URL.
+         *
+         * @example
+         * ```html
+         * <button (click)="onSave()">Save</button>
+         * ```
+         *
+         * @example
+         * ```html
+         * <!-- Save and stay on the saved object's page -->
+         * <button (click)="onSave(false)">Save and stay</button>
+         * ```
+         */
         // onSave method is here only because of the hooks, we should move everything except them to the BaseFromService
-        this.onSave = (reroute = true) => {
+        this.onSave = (rerouteToParentSlugAfterSave = true) => {
             if (!this.saveBodyClass)
                 throw new SpiderlyError('You did not initialize saveBodyClass');
             if (!this.mainUIFormClass)
                 throw new SpiderlyError('You did not initialize mainUIFormClass');
-            this.saveBody = this.parentFormGroup.initSaveBody();
-            this.onBeforeSave(this.saveBody);
-            this.saveBody = this.saveBody ?? this.parentFormGroup.getRawValue();
+            let saveBody = this.parentFormGroup.getRawValue();
+            this.onBeforeSave(saveBody);
             const isValid = this.baseFormService.isControlValid(this.parentFormGroup);
             if (isValid) {
                 this.parentFormGroup
-                    .saveObservableMethod(this.saveBody)
+                    .saveObservableMethod(saveBody)
                     .subscribe((res) => {
                     this.messageService.successMessage(this.successfulSaveToastDescription);
-                    this.baseFormService.initFormGroup(this.parentFormGroup, this.mainUIFormClass, res);
-                    if (reroute) {
+                    if (rerouteToParentSlugAfterSave) {
+                        this.rerouteToSavedObject(undefined);
+                    }
+                    else {
+                        saveBody = this.baseFormService.mapMainUIFormToSaveBody(this.mainUIFormClass, res);
+                        this.baseFormService.initFormGroup(this.parentFormGroup, this.saveBodyClass, saveBody);
                         const saveBodyMainDTOKey = this.baseFormService.getSaveBodyMainDTOKey(this.saveBodyClass);
-                        const savedObjectId = res[saveBodyMainDTOKey]?.id;
+                        const savedObjectId = saveBody[saveBodyMainDTOKey]?.id;
                         this.rerouteToSavedObject(savedObjectId); // You always need to have id, because of id == 0 and version change
                     }
                     this.onAfterSave();
@@ -1878,6 +1985,21 @@ class BaseFormCopy {
                 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;
@@ -1890,8 +2012,43 @@ class BaseFormCopy {
             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).
+         *
+         * @param saveBody - The current save body built from the form's raw value. Mutate it directly to change what gets sent to the server.
+         *
+         * @example
+         * ```ts
+         * onBeforeSave = (saveBody?: ProductSaveBody) => {
+         *   saveBody.productDTO.fullName = saveBody.productDTO.firstName + ' ' + saveBody.productDTO.lastName;
+         * };
+         * ```
+         */
         this.onBeforeSave = (saveBody) => { };
+        /**
+         * Hook that runs **after** a successful save response is received.
+         * Use this for post-save side effects (e.g., refreshing related data, showing additional notifications).
+         *
+         * @example
+         * ```ts
+         * onAfterSave = () => {
+         *   this.loadRelatedProducts();
+         * };
+         * ```
+         */
         this.onAfterSave = () => { };
+        /**
+         * Hook that runs immediately **after** the save HTTP request is sent, but **before** the response arrives.
+         * Use this for side effects that should happen as soon as the request is dispatched (e.g., disabling UI elements, starting a loading indicator).
+         *
+         * @example
+         * ```ts
+         * onAfterSaveRequest = () => {
+         *   this.isSaving = true;
+         * };
+         * ```
+         */
         this.onAfterSaveRequest = () => { };
     }
     ngOnInit() { }
@@ -1961,6 +2118,7 @@ class ConfigServiceBase {
     constructor() {
         this.production = false;
         this.frontendUrl = 'http://localhost:4200';
+        this.showGoogleAuth = false;
         this.companyName = 'Company Name';
         this.primaryColor = '#111b2c';
         /* URLs */
@@ -2254,7 +2412,6 @@ class AuthComponent {
         this.authService = authService;
         this.initCompanyAuthDialogDetailsSubscription = null;
         this.onCompanyNameChange = new EventEmitter();
-        this.showGoogleAuth = false;
     }
     ngOnInit() {
         this.initCompanyDetails();
@@ -2279,15 +2436,13 @@ class AuthComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthComponent, deps: [{ token: ConfigServiceBase }, { token: AuthServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AuthComponent, isStandalone: true, selector: "auth", inputs: { showGoogleAuth: "showGoogleAuth" }, outputs: { onCompanyNameChange: "onCompanyNameChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px\">\n    <div class=\"flex flex-column w-full\">\n      <div\n        class=\"w-full sm:w-30rem\"\n        style=\"\n          margin: auto;\n          border-radius: 50px;\n          padding: 0.3rem;\n          background: linear-gradient(\n            180deg,\n            var(--p-primary-color) 10%,\n            rgba(33, 150, 243, 0) 30%\n          );\n        \"\n      >\n        <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius: 45px\">\n          <div class=\"text-center\" style=\"margin-bottom: 38px\">\n            <img\n              *ngIf=\"image != null\"\n              [src]=\"image\"\n              alt=\"{{ companyName }} Logo\"\n              title=\"{{ companyName }} Logo\"\n              height=\"60\"\n            />\n            <i\n              *ngIf=\"image == null\"\n              class=\"pi pi-spin pi-spinner primary-color\"\n              style=\"font-size: 2rem\"\n            ></i>\n          </div>\n\n          <ng-content></ng-content>\n\n          <div *ngIf=\"showGoogleAuth\">\n            <div\n              style=\"\n                display: flex;\n                align-items: center;\n                gap: 7px;\n                justify-content: center;\n                margin-bottom: 16px;\n              \"\n            >\n              <div class=\"separator\"></div>\n              <div>{{ t(\"or\") }}</div>\n              <div class=\"separator\"></div>\n            </div>\n            <div>\n              <!-- https://code-maze.com/how-to-sign-in-with-google-angular-aspnet-webapi/ -->\n              <google-button\n                (loginWithGoogle)=\"onGoogleSignIn($event)\"\n                [label]=\"t('ContinueWithGoogle')\"\n              ></google-button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GoogleButtonComponent, selector: "google-button", inputs: ["label"], outputs: ["loginWithGoogle"] }, { 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: AuthComponent, isStandalone: true, selector: "auth", outputs: { onCompanyNameChange: "onCompanyNameChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px\">\n    <div class=\"flex flex-column w-full\">\n      <div\n        class=\"w-full sm:w-30rem\"\n        style=\"\n          margin: auto;\n          border-radius: 50px;\n          padding: 0.3rem;\n          background: linear-gradient(\n            180deg,\n            var(--p-primary-color) 10%,\n            rgba(33, 150, 243, 0) 30%\n          );\n        \"\n      >\n        <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius: 45px\">\n          <div class=\"text-center\" style=\"margin-bottom: 38px\">\n            <img\n              *ngIf=\"image != null\"\n              [src]=\"image\"\n              alt=\"{{ companyName }} Logo\"\n              title=\"{{ companyName }} Logo\"\n              height=\"60\"\n            />\n            <i\n              *ngIf=\"image == null\"\n              class=\"pi pi-spin pi-spinner primary-color\"\n              style=\"font-size: 2rem\"\n            ></i>\n          </div>\n\n          <ng-content></ng-content>\n\n          <div *ngIf=\"config.showGoogleAuth\">\n            <div\n              style=\"\n                display: flex;\n                align-items: center;\n                gap: 7px;\n                justify-content: center;\n                margin-bottom: 16px;\n              \"\n            >\n              <div class=\"separator\"></div>\n              <div>{{ t(\"or\") }}</div>\n              <div class=\"separator\"></div>\n            </div>\n            <div>\n              <!-- https://code-maze.com/how-to-sign-in-with-google-angular-aspnet-webapi/ -->\n              <google-button\n                (loginWithGoogle)=\"onGoogleSignIn($event)\"\n                [label]=\"t('ContinueWithGoogle')\"\n              ></google-button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GoogleButtonComponent, selector: "google-button", inputs: ["label"], outputs: ["loginWithGoogle"] }, { 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: AuthComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth', imports: [CommonModule, GoogleButtonComponent, TranslocoDirective], template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px\">\n    <div class=\"flex flex-column w-full\">\n      <div\n        class=\"w-full sm:w-30rem\"\n        style=\"\n          margin: auto;\n          border-radius: 50px;\n          padding: 0.3rem;\n          background: linear-gradient(\n            180deg,\n            var(--p-primary-color) 10%,\n            rgba(33, 150, 243, 0) 30%\n          );\n        \"\n      >\n        <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius: 45px\">\n          <div class=\"text-center\" style=\"margin-bottom: 38px\">\n            <img\n              *ngIf=\"image != null\"\n              [src]=\"image\"\n              alt=\"{{ companyName }} Logo\"\n              title=\"{{ companyName }} Logo\"\n              height=\"60\"\n            />\n            <i\n              *ngIf=\"image == null\"\n              class=\"pi pi-spin pi-spinner primary-color\"\n              style=\"font-size: 2rem\"\n            ></i>\n          </div>\n\n          <ng-content></ng-content>\n\n          <div *ngIf=\"showGoogleAuth\">\n            <div\n              style=\"\n                display: flex;\n                align-items: center;\n                gap: 7px;\n                justify-content: center;\n                margin-bottom: 16px;\n              \"\n            >\n              <div class=\"separator\"></div>\n              <div>{{ t(\"or\") }}</div>\n              <div class=\"separator\"></div>\n            </div>\n            <div>\n              <!-- https://code-maze.com/how-to-sign-in-with-google-angular-aspnet-webapi/ -->\n              <google-button\n                (loginWithGoogle)=\"onGoogleSignIn($event)\"\n                [label]=\"t('ContinueWithGoogle')\"\n              ></google-button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'auth', imports: [CommonModule, GoogleButtonComponent, TranslocoDirective], template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px\">\n    <div class=\"flex flex-column w-full\">\n      <div\n        class=\"w-full sm:w-30rem\"\n        style=\"\n          margin: auto;\n          border-radius: 50px;\n          padding: 0.3rem;\n          background: linear-gradient(\n            180deg,\n            var(--p-primary-color) 10%,\n            rgba(33, 150, 243, 0) 30%\n          );\n        \"\n      >\n        <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius: 45px\">\n          <div class=\"text-center\" style=\"margin-bottom: 38px\">\n            <img\n              *ngIf=\"image != null\"\n              [src]=\"image\"\n              alt=\"{{ companyName }} Logo\"\n              title=\"{{ companyName }} Logo\"\n              height=\"60\"\n            />\n            <i\n              *ngIf=\"image == null\"\n              class=\"pi pi-spin pi-spinner primary-color\"\n              style=\"font-size: 2rem\"\n            ></i>\n          </div>\n\n          <ng-content></ng-content>\n\n          <div *ngIf=\"config.showGoogleAuth\">\n            <div\n              style=\"\n                display: flex;\n                align-items: center;\n                gap: 7px;\n                justify-content: center;\n                margin-bottom: 16px;\n              \"\n            >\n              <div class=\"separator\"></div>\n              <div>{{ t(\"or\") }}</div>\n              <div class=\"separator\"></div>\n            </div>\n            <div>\n              <!-- https://code-maze.com/how-to-sign-in-with-google-angular-aspnet-webapi/ -->\n              <google-button\n                (loginWithGoogle)=\"onGoogleSignIn($event)\"\n                [label]=\"t('ContinueWithGoogle')\"\n              ></google-button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: ConfigServiceBase }, { type: AuthServiceBase }], propDecorators: { onCompanyNameChange: [{
                 type: Output
-            }], showGoogleAuth: [{
-                type: Input
             }] } });
 
 class PanelBodyComponent {
@@ -2580,7 +2735,7 @@ class LoginComponent extends BaseFormCopy {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LoginComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1$3.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i1.TranslocoService }, { token: BaseFormService }, { token: AuthServiceBase }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: LoginComponent, isStandalone: true, selector: "app-login", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  @if (loginFormGroup != null) {\n    @if (showEmailSentDialog == false) {\n      <auth (onCompanyNameChange)=\"companyNameChange($event)\">\n        <!-- We are not loading anything from the server here so we don't need defer block -->\n        <form [formGroup]=\"loginFormGroup\" style=\"margin-bottom: 16px\">\n          <div class=\"col-12\" style=\"padding-left: 0; padding-right: 0\">\n            <spiderly-textbox\n              [control]=\"loginFormGroup.getControl('email')\"\n            ></spiderly-textbox>\n          </div>\n\n          <div class=\"mb-4 gap-5\">\n            <div class=\"text-center\" style=\"font-size: smaller\">\n              {{ t(\"AgreementsOnRegister\") }}\n              <b\n                routerLink=\"/user-agreement\"\n                class=\"primary-color cursor-pointer\"\n                >{{ t(\"UserAgreement\") }}</b\n              >\n              {{ t(\"and\") }}\n              <b\n                routerLink=\"/privacy-policy\"\n                class=\"primary-color cursor-pointer\"\n                >{{ t(\"PrivacyPolicy\") }}</b\n              >.\n            </div>\n          </div>\n\n          <div style=\"display: flex; flex-direction: column; gap: 16px\">\n            <spiderly-button\n              [label]=\"t('Login')\"\n              (onClick)=\"sendLoginVerificationEmail()\"\n              [outlined]=\"true\"\n              [style]=\"{ width: '100%' }\"\n              type=\"submit\"\n            ></spiderly-button>\n          </div>\n        </form>\n      </auth>\n    } @else {\n      <login-verification\n        [email]=\"loginFormGroup.controls.email.getRawValue()\"\n      ></login-verification>\n    }\n  } @else {\n    <!-- TODO: Add skeleton -->\n  }\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AuthComponent, selector: "auth", inputs: ["showGoogleAuth"], outputs: ["onCompanyNameChange"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: LoginVerificationComponent, selector: "login-verification", inputs: ["email", "userId"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: LoginComponent, isStandalone: true, selector: "app-login", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  @if (loginFormGroup != null) {\n    @if (showEmailSentDialog == false) {\n      <auth (onCompanyNameChange)=\"companyNameChange($event)\">\n        <!-- We are not loading anything from the server here so we don't need defer block -->\n        <form [formGroup]=\"loginFormGroup\" style=\"margin-bottom: 16px\">\n          <div class=\"col-12\" style=\"padding-left: 0; padding-right: 0\">\n            <spiderly-textbox\n              [control]=\"loginFormGroup.getControl('email')\"\n            ></spiderly-textbox>\n          </div>\n\n          <div class=\"mb-4 gap-5\">\n            <div class=\"text-center\" style=\"font-size: smaller\">\n              {{ t(\"AgreementsOnRegister\") }}\n              <b\n                routerLink=\"/user-agreement\"\n                class=\"primary-color cursor-pointer\"\n                >{{ t(\"UserAgreement\") }}</b\n              >\n              {{ t(\"and\") }}\n              <b\n                routerLink=\"/privacy-policy\"\n                class=\"primary-color cursor-pointer\"\n                >{{ t(\"PrivacyPolicy\") }}</b\n              >.\n            </div>\n          </div>\n\n          <div style=\"display: flex; flex-direction: column; gap: 16px\">\n            <spiderly-button\n              [label]=\"t('Login')\"\n              (onClick)=\"sendLoginVerificationEmail()\"\n              [outlined]=\"true\"\n              [style]=\"{ width: '100%' }\"\n              type=\"submit\"\n            ></spiderly-button>\n          </div>\n        </form>\n      </auth>\n    } @else {\n      <login-verification\n        [email]=\"loginFormGroup.controls.email.getRawValue()\"\n      ></login-verification>\n    }\n  } @else {\n    <!-- TODO: Add skeleton -->\n  }\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AuthComponent, selector: "auth", outputs: ["onCompanyNameChange"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: LoginVerificationComponent, selector: "login-verification", inputs: ["email", "userId"] }, { 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: LoginComponent, decorators: [{
             type: Component,
@@ -4379,21 +4534,6 @@ class LazyLoadSelectedIdsResult extends BaseEntity {
 class MenuChangeEvent {
 }
 
-class MimeTypes {
-    constructor(value) {
-        this.value = value;
-    }
-    static { this.Pdf = new MimeTypes('application/pdf'); }
-    static { this.Zip = new MimeTypes('application/zip'); }
-    static { this.Jpeg = new MimeTypes('image/jpeg'); }
-    static { this.Png = new MimeTypes('image/png'); }
-    static { this.Svg = new MimeTypes('image/svg'); }
-    static { this.Webp = new MimeTypes('image/webp'); }
-    toString() {
-        return this.value;
-    }
-}
-
 class Namebook extends BaseEntity {
     constructor({ id, displayName, } = {}) {
         super();
@@ -4731,5 +4871,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, AuthServiceBase, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormCopy, 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, MimeTypes, 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, TranslateLabelsAbstractService, UserBase, UserRole, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, capitalizeFirstChar, createFakeGoogleWrapper, deleteAction, exportListToExcel, firstCharToUpper, getFileNameFromContentDisposition, getHtmlImgDisplayString64, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, httpLoadingInterceptor, isExcelFileType, isImageFileType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, kebabToTitleCase, nameOf, nameof, primitiveArrayTypes, pushAction, selectedTab, singleOrDefault, splitPascalCase, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
+export { Action, AllClickEvent, ApiSecurityService, AppSidebarComponent, AuthGuard, AuthResult, AuthServiceBase, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormCopy, 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