@corp-products/ui-components 3.6.7 → 3.6.9

package/fesm2022/corp-products-ui-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, Component, Input, ChangeDetectionStrategy, model, inject, Pipe, EventEmitter, Output, Injectable, Renderer2, ChangeDetectorRef, signal, effect, HostListener, ViewChild, InjectionToken, Injector, createComponent, ViewContainerRef, ApplicationRef, EnvironmentInjector, DestroyRef } from '@angular/core';
+import { ViewEncapsulation, Component, Input, ChangeDetectionStrategy, model, inject, Pipe, EventEmitter, Output, Injectable, Renderer2, ChangeDetectorRef, signal, effect, HostListener, ViewChild, input, computed, InjectionToken, Injector, createComponent, ViewContainerRef, ApplicationRef, EnvironmentInjector, DestroyRef } from '@angular/core';
 import * as i1 from 'primeng/button';
 import { Button, ButtonModule, ButtonStyle } from 'primeng/button';
 import * as i1$1 from '@angular/common';
@@ -870,6 +870,7 @@ var FormFieldTypeEnum;
     FormFieldTypeEnum["SWITCH"] = "switch";
     FormFieldTypeEnum["AUTO_COMPLETE"] = "auto-complete";
     FormFieldTypeEnum["HIJRI_DATE_PICKER"] = "hijri-date";
+    FormFieldTypeEnum["UPLOAD_FILE"] = "upload-file";
 })(FormFieldTypeEnum || (FormFieldTypeEnum = {}));
 
 const WEEKDAYS = {
@@ -1532,6 +1533,342 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+/**
+ * Transforms file size from bytes to readable format (B, KB, MB, GB, TB).
+ *
+ * Usage:
+ *   {{ fileSize | fileSize }}           // Default: auto unit, 2 decimals
+ *   {{ fileSize | fileSize:0 }}         // Auto unit, 0 decimals
+ *   {{ fileSize | fileSize:2:'MB' }}    // Force MB, 2 decimals
+ *
+ * @param value - File size in bytes
+ * @param decimals - Number of decimal places (default: 2)
+ * @param unit - Unit: 'B', 'KB', 'MB', 'GB', 'TB' (default: auto)
+ */
+class FileSizePipe {
+    units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    k = 1024;
+    transform(bytes, decimals = 2, unit) {
+        if (bytes === null || bytes === undefined || isNaN(bytes)) {
+            return '0 B';
+        }
+        if (bytes === 0) {
+            return '0 B';
+        }
+        // If a specific unit is requested
+        if (unit) {
+            const unitIndex = this.units.indexOf(unit);
+            if (unitIndex === -1) {
+                return this.autoFormat(bytes, decimals);
+            }
+            const divisor = Math.pow(this.k, unitIndex);
+            const value = bytes / divisor;
+            return `${this.formatNumber(value, decimals)} ${unit}`;
+        }
+        // Auto-detect the best unit
+        return this.autoFormat(bytes, decimals);
+    }
+    autoFormat(bytes, decimals) {
+        const i = Math.floor(Math.log(Math.abs(bytes)) / Math.log(this.k));
+        const unitIndex = Math.min(i, this.units.length - 1);
+        const value = bytes / Math.pow(this.k, unitIndex);
+        return `${this.formatNumber(value, decimals)} ${this.units[unitIndex]}`;
+    }
+    formatNumber(value, decimals) {
+        return parseFloat(value.toFixed(decimals)).toString();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "fileSize" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileSizePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'fileSize',
+                    standalone: true,
+                }]
+        }] });
+
+var UploadStatus;
+(function (UploadStatus) {
+    UploadStatus["PENDING"] = "pending";
+    UploadStatus["UPLOADING"] = "uploading";
+    UploadStatus["SUCCESS"] = "success";
+    UploadStatus["FAILED"] = "failed";
+})(UploadStatus || (UploadStatus = {}));
+
+class FileManagementComponent {
+    // Inputs
+    existingFiles = input([], ...(ngDevMode ? [{ debugName: "existingFiles" }] : []));
+    acceptedTypes = input('*', ...(ngDevMode ? [{ debugName: "acceptedTypes" }] : []));
+    maxFileSize = input(10485760, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : [])); //250 MB
+    maxConcurrentUploads = input(3, ...(ngDevMode ? [{ debugName: "maxConcurrentUploads" }] : []));
+    showTable = input(true, ...(ngDevMode ? [{ debugName: "showTable" }] : []));
+    showDropZone = input(true, ...(ngDevMode ? [{ debugName: "showDropZone" }] : []));
+    allowPreview = input(true, ...(ngDevMode ? [{ debugName: "allowPreview" }] : []));
+    permissonKey = input('', ...(ngDevMode ? [{ debugName: "permissonKey" }] : []));
+    allowedActions = input([], ...(ngDevMode ? [{ debugName: "allowedActions" }] : []));
+    uploadedFile = signal([], ...(ngDevMode ? [{ debugName: "uploadedFile" }] : []));
+    // Outputs
+    filesUploaded = new EventEmitter();
+    fileDeleted = new EventEmitter();
+    filePreview = new EventEmitter();
+    fileDownload = new EventEmitter();
+    uploadError = new EventEmitter();
+    newFilesChange = new EventEmitter();
+    fileInput;
+    destroy$ = new Subject();
+    // State - separate new uploads from existing files
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
+    newFiles = signal([], ...(ngDevMode ? [{ debugName: "newFiles" }] : [])); // Files being uploaded or newly uploaded
+    uploadedResponses = [];
+    // Combined files list for the table (existing + new)
+    allFiles = computed(() => {
+        const existing = this.existingFiles().map((f) => ({
+            ...f,
+            status: undefined, // Don't show status for existing files
+            isNew: false,
+        }));
+        const newOnes = this.newFiles();
+        return [...newOnes, ...existing];
+    }, ...(ngDevMode ? [{ debugName: "allFiles" }] : []));
+    // Get only successfully uploaded new file IDs
+    uploadedNewFileIds = computed(() => {
+        return this.newFiles()
+            .filter((f) => f.status === UploadStatus.SUCCESS && f.id && !f.id.startsWith('temp-'))
+            .map((f) => f.id);
+    }, ...(ngDevMode ? [{ debugName: "uploadedNewFileIds" }] : []));
+    // Formatted accepted file types for display
+    formattedAcceptedTypes = computed(() => {
+        const accepted = this.acceptedTypes();
+        if (accepted === '*' || accepted === '*/*')
+            return '';
+        return accepted
+            .split(',')
+            .map((type) => type.trim().replace('.', '').toUpperCase())
+            .join(', ');
+    }, ...(ngDevMode ? [{ debugName: "formattedAcceptedTypes" }] : []));
+    // Table configuration
+    constructor() {
+        // Emit when new files change
+        effect(() => {
+            const newFilesList = this.newFiles();
+            this.newFilesChange.emit(newFilesList);
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    // Drag & Drop handlers
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(true);
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+        const droppedFiles = event.dataTransfer?.files;
+        if (droppedFiles) {
+            this.handleFiles(Array.from(droppedFiles));
+        }
+    }
+    // Browse button handler
+    onBrowseClick() {
+        this.fileInput.nativeElement.click();
+    }
+    onFileInputChange(event) {
+        const input = event.target;
+        if (input.files) {
+            this.handleFiles(Array.from(input.files));
+            // Reset input to allow selecting the same file again
+            input.value = '';
+        }
+    }
+    // Public method to trigger file selection from parent
+    triggerFileInput() {
+        this.fileInput?.nativeElement?.click();
+    }
+    // Public method to append file selection from parent
+    appendFileFromParent(file) {
+        this.handleFiles([file]);
+    }
+    // Public method to upload files programmatically from parent
+    uploadFilesFromParent(files) {
+        this.handleFiles(files);
+    }
+    // Public method to get new uploaded file IDs
+    getUploadedFileIds() {
+        return this.uploadedNewFileIds();
+    }
+    // Public method to clear new files (after save)
+    clearNewFiles() {
+        this.newFiles.set([]);
+        this.uploadedResponses = [];
+    }
+    // Public method to remove a new file by ID
+    removeNewFile(fileId) {
+        this.newFiles.update((files) => files.filter((f) => f.id !== fileId));
+    }
+    // Check if there are pending/uploading files
+    // File handling
+    handleFiles(filesToProcess) {
+        const validFiles = [];
+        for (const file of filesToProcess) {
+            // Validate file size
+            if (file.size > this.maxFileSize()) {
+                this.uploadError.emit({
+                    file,
+                    error: `File ${file.name} exceeds maximum size of ${this.formatFileSize(this.maxFileSize())}`,
+                });
+                continue;
+            }
+            // Validate file type
+            // if (!this.isValidFileType(file)) {
+            //   this.uploadError.emit({
+            //     file,
+            //     error: `File type not allowed: ${file.type}`,
+            //   });
+            //   continue;
+            // }
+            validFiles.push(file);
+        }
+        if (validFiles.length > 0) {
+            // this.uploadFiles(validFiles);
+            this.uploadedFile.set(validFiles);
+            this.filesUploaded.emit(validFiles);
+            console.log('uploadedFile', this.uploadedFile());
+        }
+    }
+    deleteFile() {
+        this.uploadedFile.set([]);
+        this.filesUploaded.emit([]);
+    }
+    isValidFileType(file) {
+        const accepted = this.acceptedTypes();
+        if (accepted === '*' || accepted === '*/*')
+            return true;
+        const acceptedTypes = accepted.split(',').map((t) => t.trim().toLowerCase());
+        const fileType = file.type.toLowerCase();
+        const fileExt = '.' + file.name.split('.').pop()?.toLowerCase();
+        return acceptedTypes.some((type) => {
+            if (type.startsWith('.')) {
+                return fileExt === type;
+            }
+            if (type.endsWith('/*')) {
+                return fileType.startsWith(type.replace('/*', '/'));
+            }
+            return fileType === type;
+        });
+    }
+    updateFileFromAttachment(attachment) {
+        this.newFiles.update((currentFiles) => {
+            return currentFiles.map((file) => {
+                // Match by file name and size
+                if (file.fileName === attachment.nameFile && file.size === attachment.size) {
+                    const updatedFile = {
+                        ...file,
+                        progress: attachment.status?.percentage ?? 0,
+                        error: attachment.errorMessage,
+                    };
+                    // If upload succeeded, update with response data from serverResponse
+                    if (attachment.uploadStatus === UploadStatus.SUCCESS && attachment.serverResponse) {
+                        const serverData = attachment.serverResponse;
+                        const responseFile = {
+                            id: attachment.id || serverData?.id || file.id,
+                            fileName: serverData?.fileName || attachment.nameFile,
+                            size: serverData?.size || attachment.size,
+                            mimeType: serverData?.mimeType || file.mimeType,
+                        };
+                        this.uploadedResponses.push(responseFile);
+                        return {
+                            ...updatedFile,
+                            id: responseFile.id,
+                        };
+                    }
+                    return updatedFile;
+                }
+                return file;
+            });
+        });
+    }
+    // Actions
+    onDeleteFile(file) {
+        const isNewFile = file.isNew;
+        this.fileDeleted.emit({ fileId: file.id, isNew: !!isNewFile });
+        if (isNewFile) {
+            // Remove from newFiles list immediately for new uploads
+            this.newFiles.update((files) => files.filter((f) => f.id !== file.id));
+        }
+    }
+    onPreviewFile(file) {
+        this.filePreview.emit(file);
+    }
+    removeFileFromList(fileId) {
+        this.newFiles.update((current) => current.filter((f) => f.id !== fileId));
+    }
+    generateTempId(file) {
+        return `temp-${file.name}-${file.size}-${Date.now()}`;
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FileManagementComponent, isStandalone: true, selector: "app-file-management", inputs: { existingFiles: { classPropertyName: "existingFiles", publicName: "existingFiles", isSignal: true, isRequired: false, transformFunction: null }, acceptedTypes: { classPropertyName: "acceptedTypes", publicName: "acceptedTypes", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxConcurrentUploads: { classPropertyName: "maxConcurrentUploads", publicName: "maxConcurrentUploads", isSignal: true, isRequired: false, transformFunction: null }, showTable: { classPropertyName: "showTable", publicName: "showTable", isSignal: true, isRequired: false, transformFunction: null }, showDropZone: { classPropertyName: "showDropZone", publicName: "showDropZone", isSignal: true, isRequired: false, transformFunction: null }, allowPreview: { classPropertyName: "allowPreview", publicName: "allowPreview", isSignal: true, isRequired: false, transformFunction: null }, permissonKey: { classPropertyName: "permissonKey", publicName: "permissonKey", isSignal: true, isRequired: false, transformFunction: null }, allowedActions: { classPropertyName: "allowedActions", publicName: "allowedActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesUploaded: "filesUploaded", fileDeleted: "fileDeleted", filePreview: "filePreview", fileDownload: "fileDownload", uploadError: "uploadError", newFilesChange: "newFilesChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"file-management\">\r\n  <!-- Drop Zone -->\r\n  @if (showDropZone()) {\r\n    <div\r\n      class=\"drop-zone upload-container\"\r\n      [class.drag-over]=\"isDragOver()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\"\r\n    >\r\n      <div class=\"drop-zone-content\">\r\n        <p class=\"drop-text\">{{ 'file.drag_drop_files' | translate }}</p>\r\n        <p-button\r\n          [label]=\"'file.browse' | translate\"\r\n          severity=\"danger\"\r\n          [outlined]=\"true\"\r\n          (onClick)=\"onBrowseClick()\"\r\n        />\r\n        <p class=\"drop-hint text-xs text-gray-500 mt-2\">\r\n          {{ 'file.max_size_hint' | translate }}: {{ maxFileSize() | fileSize: 2 : 'MB' }}\r\n        </p>\r\n        @if (formattedAcceptedTypes()) {\r\n          <p class=\"accepted-types text-xs text-gray-400\">\r\n            {{ 'file.accepted_types' | translate }}: {{ formattedAcceptedTypes() }}\r\n          </p>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- Hidden file input (always present for programmatic access) -->\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    [accept]=\"acceptedTypes()\"\r\n    multiple\r\n    hidden\r\n    (change)=\"onFileInputChange($event)\"\r\n  />\r\n\r\n  @if(uploadedFile().length) {\r\n    @for(file of uploadedFile() ; track file) {\r\n      <div class=\"uploaded-files \"  >\r\n         <p>{{file.name}}</p>\r\n         <i class=\"pi pi-trash\" style=\"font-size: 1.5rem; color: #f00\" (click)=\"deleteFile()\"></i>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <!-- Files Table -->\r\n\r\n</div>\r\n", styles: [".file-management{width:100%}.drop-zone{@apply cursor-pointer rounded-l border-2 border-dashed border-gray-300 p-8 bg-purple-light3 text-center transition-all duration-200 ease-in-out;}.drop-zone.drag-over{@apply border-purple-200 bg-purple-light;}.drop-zone-content{@apply flex flex-col items-center gap-2;}.drop-icon{font-size:3rem;color:var(--gray-400, #9ca3af);margin-bottom:.5rem}.drop-text{font-size:1rem;color:var(--gray-700, #374151);margin:0}.drop-or{font-size:.875rem;color:var(--gray-500, #6b7280);margin:.25rem 0}.drop-hint{margin-top:.75rem}.files-table{border:1px solid var(--gray-200, #e5e7eb);border-radius:8px;overflow:hidden}:host-context([dir=rtl]) .drop-zone-content{direction:rtl}.uploaded-files{background-color:#f3f3f7;border:1px solid #DFE0E6;display:flex;justify-content:space-between;align-items:center;padding:15px;margin-bottom:10px}.uploaded-files .pi-trash{cursor:pointer}.uploaded-files p{margin-block-start:0;margin-block-end:0}.upload-container{background-color:#f3f3f7;padding:15px;border:1px dashed #DFE0E6;margin-bottom:15px;display:flex;justify-content:center;align-items:center;border-radius:2px}.upload-container .drop-zone-content{display:flex;align-items:center;flex-direction:column}.upload-container .drop-zone-content .drop-text{margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileManagementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-file-management', imports: [CommonModule, TranslatePipe, ButtonModule, TooltipModule, FileSizePipe], template: "<div class=\"file-management\">\r\n  <!-- Drop Zone -->\r\n  @if (showDropZone()) {\r\n    <div\r\n      class=\"drop-zone upload-container\"\r\n      [class.drag-over]=\"isDragOver()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\"\r\n    >\r\n      <div class=\"drop-zone-content\">\r\n        <p class=\"drop-text\">{{ 'file.drag_drop_files' | translate }}</p>\r\n        <p-button\r\n          [label]=\"'file.browse' | translate\"\r\n          severity=\"danger\"\r\n          [outlined]=\"true\"\r\n          (onClick)=\"onBrowseClick()\"\r\n        />\r\n        <p class=\"drop-hint text-xs text-gray-500 mt-2\">\r\n          {{ 'file.max_size_hint' | translate }}: {{ maxFileSize() | fileSize: 2 : 'MB' }}\r\n        </p>\r\n        @if (formattedAcceptedTypes()) {\r\n          <p class=\"accepted-types text-xs text-gray-400\">\r\n            {{ 'file.accepted_types' | translate }}: {{ formattedAcceptedTypes() }}\r\n          </p>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- Hidden file input (always present for programmatic access) -->\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    [accept]=\"acceptedTypes()\"\r\n    multiple\r\n    hidden\r\n    (change)=\"onFileInputChange($event)\"\r\n  />\r\n\r\n  @if(uploadedFile().length) {\r\n    @for(file of uploadedFile() ; track file) {\r\n      <div class=\"uploaded-files \"  >\r\n         <p>{{file.name}}</p>\r\n         <i class=\"pi pi-trash\" style=\"font-size: 1.5rem; color: #f00\" (click)=\"deleteFile()\"></i>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <!-- Files Table -->\r\n\r\n</div>\r\n", styles: [".file-management{width:100%}.drop-zone{@apply cursor-pointer rounded-l border-2 border-dashed border-gray-300 p-8 bg-purple-light3 text-center transition-all duration-200 ease-in-out;}.drop-zone.drag-over{@apply border-purple-200 bg-purple-light;}.drop-zone-content{@apply flex flex-col items-center gap-2;}.drop-icon{font-size:3rem;color:var(--gray-400, #9ca3af);margin-bottom:.5rem}.drop-text{font-size:1rem;color:var(--gray-700, #374151);margin:0}.drop-or{font-size:.875rem;color:var(--gray-500, #6b7280);margin:.25rem 0}.drop-hint{margin-top:.75rem}.files-table{border:1px solid var(--gray-200, #e5e7eb);border-radius:8px;overflow:hidden}:host-context([dir=rtl]) .drop-zone-content{direction:rtl}.uploaded-files{background-color:#f3f3f7;border:1px solid #DFE0E6;display:flex;justify-content:space-between;align-items:center;padding:15px;margin-bottom:10px}.uploaded-files .pi-trash{cursor:pointer}.uploaded-files p{margin-block-start:0;margin-block-end:0}.upload-container{background-color:#f3f3f7;padding:15px;border:1px dashed #DFE0E6;margin-bottom:15px;display:flex;justify-content:center;align-items:center;border-radius:2px}.upload-container .drop-zone-content{display:flex;align-items:center;flex-direction:column}.upload-container .drop-zone-content .drop-text{margin-bottom:10px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { existingFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFiles", required: false }] }], acceptedTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptedTypes", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxConcurrentUploads: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxConcurrentUploads", required: false }] }], showTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTable", required: false }] }], showDropZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropZone", required: false }] }], allowPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowPreview", required: false }] }], permissonKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "permissonKey", required: false }] }], allowedActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedActions", required: false }] }], filesUploaded: [{
+                type: Output
+            }], fileDeleted: [{
+                type: Output
+            }], filePreview: [{
+                type: Output
+            }], fileDownload: [{
+                type: Output
+            }], uploadError: [{
+                type: Output
+            }], newFilesChange: [{
+                type: Output
+            }], fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+
+class LocalizedLabelPipe {
+    translateService = inject(TranslateService);
+    transform(label) {
+        if (!label)
+            return '';
+        const lang = this.translateService.getCurrentLang() || 'ar';
+        const suffix = lang.charAt(0).toUpperCase() + lang.slice(1);
+        const key = label + `${suffix}`;
+        return key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LocalizedLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: LocalizedLabelPipe, isStandalone: true, name: "localizedLabel", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LocalizedLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'localizedLabel',
+                    standalone: true,
+                    pure: false,
+                }]
+        }] });
+
 class DynamicFormComponent {
     dynamicFormData;
     // Generic field change outputs (optional for consumers)
@@ -1540,6 +1877,8 @@ class DynamicFormComponent {
     switchChange = new EventEmitter();
     autoCompleteSearch = new EventEmitter();
     autoCompleteSelect = new EventEmitter();
+    popUpFilesUploaded = new EventEmitter();
+    fileDeleted = new EventEmitter();
     inputsNames = [];
     formGroup;
     inputsMap;
@@ -1550,8 +1889,14 @@ class DynamicFormComponent {
         this.inputsMap = this.dynamicFormData?.inputsMap;
         this.inputsNames = Object.keys(this.inputsMap || {});
     }
+    onFilesUploaded(file) {
+        this.popUpFilesUploaded.emit(file);
+    }
+    onFileDeleted(file) {
+        this.fileDeleted.emit(file);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, outputs: { selectButtonChange: "selectButtonChange", selectChange: "selectChange", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"grid grid-cols-12 gap-x-2\">\r\n    @for (inputName of inputsNames; track $index) {\r\n    <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n      @switch (inputsMap[inputName].fieldType) {\r\n      @case (fieldType.HIJRI_DATE_PICKER) {\r\n         <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\"  ></app-dual-calendar>\r\n      }\r\n\r\n      @case (fieldType.DATE_PICKER) {\r\n      <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n        [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n      }\r\n      @case (fieldType.SELECT_BUTTON) {\r\n      <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n        [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n        (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n      }\r\n      @case (fieldType.INPUT) {\r\n      <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n        [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n        [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? false\"\r\n        [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n        @if(inputsMap[inputName].maxLength){\r\n        <span class=\"text-xs text-gray-700\">\r\n          {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n          <span> / {{ inputsMap[inputName].maxLength}}</span>\r\n        </span>\r\n        }\r\n      </stc-input>\r\n      }\r\n      @case (fieldType.SELECT) {\r\n      <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n        [optionLabel]=\"inputsMap[inputName].optionLabel || 'label'\" [filter]=\"inputsMap[inputName].filter || false\"\r\n        [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n        [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        (change)=\"selectChange.emit({ name: inputName, event: $event })\"/>\r\n      }\r\n      @case (fieldType.SWITCH) {\r\n      <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n        [checked]=\"getFormControl(inputName, formGroup).value\"\r\n        (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n      }\r\n      @case (fieldType.AUTO_COMPLETE) {\r\n      <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n        [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n        (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n        (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n      }\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  <div class=\"col-span-12\">\r\n    <small class=\"p-error text-red-700\">\r\n      @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n      track error) {\r\n      {{ error }}\r\n      }\r\n    </small>\r\n  </div>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "stc-date-picker", inputs: ["showIcon", "showClear", "basicInput", "isTimeOnly", "minDate", "maxDate", "hourFormat", "selectionMode", "variant", "withoutTime"], outputs: ["onAfterClearDate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }, { kind: "component", type: DualCalendarComponent, selector: "app-dual-calendar", inputs: ["control", "label", "name", "withTime", "isDatePickerShow", "currentLang", "isShown"], outputs: ["gregorianUTC", "onClose"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "canClear", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "iconClass", "iconPosition"] }, { kind: "component", type: SelectComponent, selector: "stc-select", inputs: ["selectedItemTemplate", "optionTemplate", "options", "optionLabel", "optionValue", "emptyMessage", "checkmark", "showClear", "editable", "filter", "multiple", "filterBy", "selectAllLabel", "dataKey", "size", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, outputs: { selectButtonChange: "selectButtonChange", selectChange: "selectChange", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect", popUpFilesUploaded: "popUpFilesUploaded", fileDeleted: "fileDeleted" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"grid grid-cols-12 gap-x-2\">\r\n    @for (inputName of inputsNames; track $index) {\r\n    <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n      @switch (inputsMap[inputName].fieldType) {\r\n      @case (fieldType.HIJRI_DATE_PICKER) {\r\n      <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\"></app-dual-calendar>\r\n      }\r\n\r\n      @case (fieldType.DATE_PICKER) {\r\n      <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n        [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n      }\r\n      @case (fieldType.SELECT_BUTTON) {\r\n      <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n        [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n        (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n      }\r\n      @case (fieldType.INPUT) {\r\n      <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n        [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n        [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? false\"\r\n        [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n        @if(inputsMap[inputName].maxLength){\r\n        <span class=\"text-xs text-gray-700\">\r\n          {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n          <span> / {{ inputsMap[inputName].maxLength}}</span>\r\n        </span>\r\n        }\r\n      </stc-input>\r\n      }\r\n      @case (fieldType.SELECT) {\r\n      <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n        [optionLabel]=\"inputsMap[inputName]?.translatable\r\n        ? ((inputsMap[inputName]?.optionLabel || 'label') | localizedLabel)\r\n        : (inputsMap[inputName]?.optionLabel || 'label')\"\r\n        [filter]=\"inputsMap[inputName].filter || false\"\r\n        [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n        [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        (change)=\"selectChange.emit({ name: inputName, event: $event })\" />\r\n      }\r\n      @case (fieldType.SWITCH) {\r\n      <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n        [checked]=\"getFormControl(inputName, formGroup).value\"\r\n        (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n      }\r\n      @case (fieldType.AUTO_COMPLETE) {\r\n      <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n        [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n        (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n        (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n      }\r\n      @case(fieldType.UPLOAD_FILE) {\r\n      <app-file-management #fileManager #groupFileManager [maxFileSize]=\"262144000\" [maxConcurrentUploads]=\"1\"\r\n        [allowPreview]=\"true\" (filesUploaded)=\"onFilesUploaded($event)\" (fileDeleted)=\"onFileDeleted($event)\" />\r\n      }\r\n      }\r\n    </div>\r\n    }\r\n\r\n\r\n\r\n  </div>\r\n  <div class=\"col-span-12\">\r\n    <small class=\"p-error text-red-700\">\r\n      @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n      track error) {\r\n      {{ error }}\r\n      }\r\n    </small>\r\n  </div>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "stc-date-picker", inputs: ["showIcon", "showClear", "basicInput", "isTimeOnly", "minDate", "maxDate", "hourFormat", "selectionMode", "variant", "withoutTime"], outputs: ["onAfterClearDate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }, { kind: "component", type: DualCalendarComponent, selector: "app-dual-calendar", inputs: ["control", "label", "name", "withTime", "isDatePickerShow", "currentLang", "isShown"], outputs: ["gregorianUTC", "onClose"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "canClear", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "iconClass", "iconPosition"] }, { kind: "component", type: FileManagementComponent, selector: "app-file-management", inputs: ["existingFiles", "acceptedTypes", "maxFileSize", "maxConcurrentUploads", "showTable", "showDropZone", "allowPreview", "permissonKey", "allowedActions"], outputs: ["filesUploaded", "fileDeleted", "filePreview", "fileDownload", "uploadError", "newFilesChange"] }, { kind: "component", type: SelectComponent, selector: "stc-select", inputs: ["selectedItemTemplate", "optionTemplate", "options", "optionLabel", "optionValue", "emptyMessage", "checkmark", "showClear", "editable", "filter", "multiple", "filterBy", "selectAllLabel", "dataKey", "size", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: LocalizedLabelPipe, name: "localizedLabel" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
@@ -1564,10 +1909,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         SelectButtonComponent,
                         DualCalendarComponent,
                         InputComponent,
+                        FileManagementComponent,
                         SelectComponent,
                         AutoCompleteComponent,
                         SwitchComponent,
-                    ], template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"grid grid-cols-12 gap-x-2\">\r\n    @for (inputName of inputsNames; track $index) {\r\n    <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n      @switch (inputsMap[inputName].fieldType) {\r\n      @case (fieldType.HIJRI_DATE_PICKER) {\r\n         <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\"  ></app-dual-calendar>\r\n      }\r\n\r\n      @case (fieldType.DATE_PICKER) {\r\n      <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n        [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n      }\r\n      @case (fieldType.SELECT_BUTTON) {\r\n      <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n        [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n        (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n      }\r\n      @case (fieldType.INPUT) {\r\n      <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n        [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n        [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? false\"\r\n        [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n        @if(inputsMap[inputName].maxLength){\r\n        <span class=\"text-xs text-gray-700\">\r\n          {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n          <span> / {{ inputsMap[inputName].maxLength}}</span>\r\n        </span>\r\n        }\r\n      </stc-input>\r\n      }\r\n      @case (fieldType.SELECT) {\r\n      <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n        [optionLabel]=\"inputsMap[inputName].optionLabel || 'label'\" [filter]=\"inputsMap[inputName].filter || false\"\r\n        [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n        [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        (change)=\"selectChange.emit({ name: inputName, event: $event })\"/>\r\n      }\r\n      @case (fieldType.SWITCH) {\r\n      <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n        [checked]=\"getFormControl(inputName, formGroup).value\"\r\n        (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n      }\r\n      @case (fieldType.AUTO_COMPLETE) {\r\n      <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n        [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n        (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n        (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n      }\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  <div class=\"col-span-12\">\r\n    <small class=\"p-error text-red-700\">\r\n      @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n      track error) {\r\n      {{ error }}\r\n      }\r\n    </small>\r\n  </div>\r\n</form>\r\n" }]
+                        LocalizedLabelPipe
+                    ], template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"grid grid-cols-12 gap-x-2\">\r\n    @for (inputName of inputsNames; track $index) {\r\n    <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n      @switch (inputsMap[inputName].fieldType) {\r\n      @case (fieldType.HIJRI_DATE_PICKER) {\r\n      <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\"></app-dual-calendar>\r\n      }\r\n\r\n      @case (fieldType.DATE_PICKER) {\r\n      <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n        [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n      }\r\n      @case (fieldType.SELECT_BUTTON) {\r\n      <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n        [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n        (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n      }\r\n      @case (fieldType.INPUT) {\r\n      <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n        [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n        [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? false\"\r\n        [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n        @if(inputsMap[inputName].maxLength){\r\n        <span class=\"text-xs text-gray-700\">\r\n          {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n          <span> / {{ inputsMap[inputName].maxLength}}</span>\r\n        </span>\r\n        }\r\n      </stc-input>\r\n      }\r\n      @case (fieldType.SELECT) {\r\n      <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n        [optionLabel]=\"inputsMap[inputName]?.translatable\r\n        ? ((inputsMap[inputName]?.optionLabel || 'label') | localizedLabel)\r\n        : (inputsMap[inputName]?.optionLabel || 'label')\"\r\n        [filter]=\"inputsMap[inputName].filter || false\"\r\n        [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n        [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        (change)=\"selectChange.emit({ name: inputName, event: $event })\" />\r\n      }\r\n      @case (fieldType.SWITCH) {\r\n      <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n        [checked]=\"getFormControl(inputName, formGroup).value\"\r\n        (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n      }\r\n      @case (fieldType.AUTO_COMPLETE) {\r\n      <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n        [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n        (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n        (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n      }\r\n      @case(fieldType.UPLOAD_FILE) {\r\n      <app-file-management #fileManager #groupFileManager [maxFileSize]=\"262144000\" [maxConcurrentUploads]=\"1\"\r\n        [allowPreview]=\"true\" (filesUploaded)=\"onFilesUploaded($event)\" (fileDeleted)=\"onFileDeleted($event)\" />\r\n      }\r\n      }\r\n    </div>\r\n    }\r\n\r\n\r\n\r\n  </div>\r\n  <div class=\"col-span-12\">\r\n    <small class=\"p-error text-red-700\">\r\n      @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n      track error) {\r\n      {{ error }}\r\n      }\r\n    </small>\r\n  </div>\r\n</form>\r\n" }]
         }], propDecorators: { dynamicFormData: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1581,6 +1928,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], autoCompleteSelect: [{
                 type: Output
+            }], popUpFilesUploaded: [{
+                type: Output
+            }], fileDeleted: [{
+                type: Output
             }] } });
 
 class ConfirmationDialogComponent extends DynamicDialogRef {
@@ -1590,6 +1941,7 @@ class ConfirmationDialogComponent extends DynamicDialogRef {
     _ref = inject(DynamicDialogRef);
     _subscription = new Subscription();
     dialogFormData;
+    uploadedFile;
     ngOnDestroy() {
         this._subscription.unsubscribe();
     }
@@ -1606,13 +1958,23 @@ class ConfirmationDialogComponent extends DynamicDialogRef {
         // we should pass submitted data when using form dialog
         // const submitData = { submitted: true, data: this.dialogFormData?.formGroup?.value };
         // this._ref.close(this.dynamicDialogConfig.data.inputForm ? submitData : true);
-        this._ref.close(true);
+        if (this.uploadedFile) {
+            this._ref.close({ isSubmitted: true, file: this.uploadedFile });
+        }
+        else {
+            this._ref.close(true);
+        }
     }
     close() {
         this._ref.close(false);
     }
+    onPopFilesUploaded(file) {
+        this.uploadedFile = file;
+    }
+    onFileDeleted(file) {
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirm-dialog", providers: [DialogService, DynamicDialogStyle], usesInheritance: true, ngImport: i0, template: "@if (dynamicDialogConfig.data) {\r\n<div class=\"confirmation-dialog\">\r\n  <div class=\"dialog-wrapper\">\r\n    @if (dynamicDialogConfig.data) {\r\n    <div class=\"confirmation-dialog__content my-4\">\r\n      @if (dynamicDialogConfig.data.dialogIcon) {\r\n      <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n      }\r\n      <p class=\"confirmation-dialog__message text-xl mb-2\">\r\n        {{ dynamicDialogConfig.data.message }}\r\n      </p>\r\n      @if (dynamicDialogConfig.data.hint) {\r\n      <p class=\"confirmation-dialog__hint font-normal text-base\">\r\n        {{ dynamicDialogConfig.data.hint }}\r\n      </p>\r\n      }\r\n      @if (dynamicDialogConfig.data.inputForm) {\r\n      <app-dynamic-form [dynamicFormData]=\"dialogFormData\"></app-dynamic-form>\r\n      }\r\n    </div>\r\n    }\r\n    <div class=\"confirmation-dialog__actions flex gap-2 mt-4\">\r\n      <app-button [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\"\r\n        [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\" [severity]=\"'primary'\"\r\n        [id]=\"dynamicDialogConfig.data.confirmBtnId\" [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n        [label]=\"dynamicDialogConfig.data.confirmBtnLabel\"\r\n        [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\" [styleClass]=\"'confirmation-btn'\"\r\n        (click)=\"submit()\" />\r\n      <app-button [title]=\"dynamicDialogConfig.data?.closeLabel ||  ('actions.cancel' | translate)\"\r\n        [severity]=\"'primary'\" variant=\"outlined\" [label]=\"dynamicDialogConfig.data.cancelBtnLabel\"\r\n        [id]=\"dynamicDialogConfig.data.cancelBtnId\" [styleClass]=\"'cancel-btn confirmation-btn cancel-btn'\"\r\n        (click)=\"close()\" />\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["dynamicFormData"], outputs: ["selectButtonChange", "selectChange", "switchChange", "autoCompleteSearch", "autoCompleteSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirm-dialog", providers: [DialogService, DynamicDialogStyle], usesInheritance: true, ngImport: i0, template: "@if (dynamicDialogConfig.data) {\r\n<div class=\"confirmation-dialog\">\r\n  <div class=\"dialog-wrapper\">\r\n    @if (dynamicDialogConfig.data) {\r\n    <div class=\"confirmation-dialog__content my-4\">\r\n      @if (dynamicDialogConfig.data.dialogIcon) {\r\n      <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n      }\r\n      <p class=\"confirmation-dialog__message text-xl mb-2\">\r\n        {{ dynamicDialogConfig.data.message }}\r\n      </p>\r\n      @if (dynamicDialogConfig.data.hint) {\r\n      <p class=\"confirmation-dialog__hint font-normal text-base\">\r\n        {{ dynamicDialogConfig.data.hint }}\r\n      </p>\r\n      }\r\n      @if (dynamicDialogConfig.data.inputForm) {\r\n      <app-dynamic-form [dynamicFormData]=\"dialogFormData\"  (popUpFilesUploaded)=\"onPopFilesUploaded($event)\" (fileDeleted)=\"onFileDeleted($event)\" ></app-dynamic-form>\r\n      }\r\n    </div>\r\n    }\r\n    <div class=\"confirmation-dialog__actions flex gap-2 mt-4\">\r\n      <app-button [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\"\r\n        [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\" [severity]=\"'primary'\"\r\n        [id]=\"dynamicDialogConfig.data.confirmBtnId\" [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n        [label]=\"dynamicDialogConfig.data.confirmBtnLabel\"\r\n        [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\" [styleClass]=\"'confirmation-btn'\"\r\n        (click)=\"submit()\" />\r\n      <app-button [title]=\"dynamicDialogConfig.data?.closeLabel ||  ('actions.cancel' | translate)\"\r\n        [severity]=\"'primary'\" variant=\"outlined\" [label]=\"dynamicDialogConfig.data.cancelBtnLabel\"\r\n        [id]=\"dynamicDialogConfig.data.cancelBtnId\" [styleClass]=\"'cancel-btn confirmation-btn cancel-btn'\"\r\n        (click)=\"close()\" />\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["dynamicFormData"], outputs: ["selectButtonChange", "selectChange", "switchChange", "autoCompleteSearch", "autoCompleteSelect", "popUpFilesUploaded", "fileDeleted"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
@@ -1622,7 +1984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         DynamicDialogModule,
                         DynamicFormComponent,
                         TranslatePipe,
-                    ], providers: [DialogService, DynamicDialogStyle], template: "@if (dynamicDialogConfig.data) {\r\n<div class=\"confirmation-dialog\">\r\n  <div class=\"dialog-wrapper\">\r\n    @if (dynamicDialogConfig.data) {\r\n    <div class=\"confirmation-dialog__content my-4\">\r\n      @if (dynamicDialogConfig.data.dialogIcon) {\r\n      <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n      }\r\n      <p class=\"confirmation-dialog__message text-xl mb-2\">\r\n        {{ dynamicDialogConfig.data.message }}\r\n      </p>\r\n      @if (dynamicDialogConfig.data.hint) {\r\n      <p class=\"confirmation-dialog__hint font-normal text-base\">\r\n        {{ dynamicDialogConfig.data.hint }}\r\n      </p>\r\n      }\r\n      @if (dynamicDialogConfig.data.inputForm) {\r\n      <app-dynamic-form [dynamicFormData]=\"dialogFormData\"></app-dynamic-form>\r\n      }\r\n    </div>\r\n    }\r\n    <div class=\"confirmation-dialog__actions flex gap-2 mt-4\">\r\n      <app-button [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\"\r\n        [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\" [severity]=\"'primary'\"\r\n        [id]=\"dynamicDialogConfig.data.confirmBtnId\" [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n        [label]=\"dynamicDialogConfig.data.confirmBtnLabel\"\r\n        [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\" [styleClass]=\"'confirmation-btn'\"\r\n        (click)=\"submit()\" />\r\n      <app-button [title]=\"dynamicDialogConfig.data?.closeLabel ||  ('actions.cancel' | translate)\"\r\n        [severity]=\"'primary'\" variant=\"outlined\" [label]=\"dynamicDialogConfig.data.cancelBtnLabel\"\r\n        [id]=\"dynamicDialogConfig.data.cancelBtnId\" [styleClass]=\"'cancel-btn confirmation-btn cancel-btn'\"\r\n        (click)=\"close()\" />\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n}" }]
+                    ], providers: [DialogService, DynamicDialogStyle], template: "@if (dynamicDialogConfig.data) {\r\n<div class=\"confirmation-dialog\">\r\n  <div class=\"dialog-wrapper\">\r\n    @if (dynamicDialogConfig.data) {\r\n    <div class=\"confirmation-dialog__content my-4\">\r\n      @if (dynamicDialogConfig.data.dialogIcon) {\r\n      <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n      }\r\n      <p class=\"confirmation-dialog__message text-xl mb-2\">\r\n        {{ dynamicDialogConfig.data.message }}\r\n      </p>\r\n      @if (dynamicDialogConfig.data.hint) {\r\n      <p class=\"confirmation-dialog__hint font-normal text-base\">\r\n        {{ dynamicDialogConfig.data.hint }}\r\n      </p>\r\n      }\r\n      @if (dynamicDialogConfig.data.inputForm) {\r\n      <app-dynamic-form [dynamicFormData]=\"dialogFormData\"  (popUpFilesUploaded)=\"onPopFilesUploaded($event)\" (fileDeleted)=\"onFileDeleted($event)\" ></app-dynamic-form>\r\n      }\r\n    </div>\r\n    }\r\n    <div class=\"confirmation-dialog__actions flex gap-2 mt-4\">\r\n      <app-button [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\"\r\n        [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\" [severity]=\"'primary'\"\r\n        [id]=\"dynamicDialogConfig.data.confirmBtnId\" [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n        [label]=\"dynamicDialogConfig.data.confirmBtnLabel\"\r\n        [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\" [styleClass]=\"'confirmation-btn'\"\r\n        (click)=\"submit()\" />\r\n      <app-button [title]=\"dynamicDialogConfig.data?.closeLabel ||  ('actions.cancel' | translate)\"\r\n        [severity]=\"'primary'\" variant=\"outlined\" [label]=\"dynamicDialogConfig.data.cancelBtnLabel\"\r\n        [id]=\"dynamicDialogConfig.data.cancelBtnId\" [styleClass]=\"'cancel-btn confirmation-btn cancel-btn'\"\r\n        (click)=\"close()\" />\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n}\r\n" }]
         }] });
 
 class ReadMoreComponent {
@@ -2026,7 +2388,7 @@ class ConfirmationDialogService {
             return of(false); // or EMPTY / throwError — depending on your logic
         }
         // Emit true/false when dialog closes
-        return ref.onClose.pipe(filter$1((res) => res !== undefined), map((res) => !!res));
+        return ref.onClose.pipe(filter$1((res) => res !== undefined), map((res) => res));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogService, deps: [{ token: i1$8.DialogService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogService, providedIn: 'root' });