@corp-products/ui-components 4.2.9 → 4.3.1

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

@@ -10,7 +10,7 @@ import * as i1$2 from '@ngx-translate/core';
 import { TranslateModule, TranslateService, TranslatePipe } from '@ngx-translate/core';
 import * as i1$7 from '@angular/router';
 import { Router, ActivatedRoute, NavigationEnd, RouterLink, RouterOutlet, NavigationStart, RouterModule } from '@angular/router';
-import { filter, Subject, Subscription, BehaviorSubject, of } from 'rxjs';
+import { filter, Subject, Subscription, finalize, BehaviorSubject, of } from 'rxjs';
 import * as i3 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
 import { Popover } from 'primeng/popover';
@@ -20,11 +20,11 @@ import * as i1$9 from 'primeng/drawer';
 import { Drawer, DrawerModule } from 'primeng/drawer';
 import * as i1$3 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
+import * as i1$4 from '@angular/forms';
+import { Validators, FormControl, ReactiveFormsModule, FormsModule, FormGroup } from '@angular/forms';
 import { AvatarModule } from 'primeng/avatar';
 import * as i1$8 from 'primeng/dynamicdialog';
 import { DynamicDialogRef, DialogService, DynamicDialogConfig, DynamicDialogModule, DynamicDialogStyle } from 'primeng/dynamicdialog';
-import * as i1$4 from '@angular/forms';
-import { Validators, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i4 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import { AutoComplete } from 'primeng/autocomplete';
@@ -344,6 +344,14 @@ const FileExtentions = [
     'ppt',
     'rar',
 ];
+/** Comma-separated bare extensions (e.g. "pdf,doc") for validation */
+function fileExtensionsToString(extensions = FileExtentions) {
+    return extensions.join(',');
+}
+/** Dot-prefixed extensions for HTML accept attribute (e.g. ".pdf,.doc") */
+function formatFileExtensionsForAccept(extensions = FileExtentions) {
+    return extensions.map((ext) => (ext.startsWith('.') ? ext : `.${ext}`)).join(',');
+}
 
 /**
  * Transforms file size from bytes to readable format (B, KB, MB, GB, TB).
@@ -458,46 +466,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 
 class FileManagementComponent extends BaseInputComponent {
-    // Inputs
     existingFiles = input([], ...(ngDevMode ? [{ debugName: "existingFiles" }] : []));
     acceptedTypes = input('*', ...(ngDevMode ? [{ debugName: "acceptedTypes" }] : []));
-    maxFileSize = input(10485760, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : [])); //250 MB
+    maxFileSize = input(10485760, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : []));
     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
+    uploadFn = input(undefined, ...(ngDevMode ? [{ debugName: "uploadFn" }] : []));
     filesUploaded = new EventEmitter();
     fileDeleted = new EventEmitter();
     filePreview = new EventEmitter();
     fileDownload = new EventEmitter();
     uploadError = new EventEmitter();
     newFilesChange = new EventEmitter();
+    uploadStateChange = new EventEmitter();
     fileInput;
-    // State - separate new uploads from existing files
+    uploadedFile = signal([], ...(ngDevMode ? [{ debugName: "uploadedFile" }] : []));
     isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
-    newFiles = signal([], ...(ngDevMode ? [{ debugName: "newFiles" }] : [])); // Files being uploaded or newly uploaded
+    newFiles = signal([], ...(ngDevMode ? [{ debugName: "newFiles" }] : []));
+    documentId = null;
+    uploadErrorMessage = null;
     uploadedResponses = [];
-    // Combined files list for the table (existing + new)
+    UploadStatus = UploadStatus;
+    _subscription = new Subscription();
+    progressIntervals = new Map();
     allFiles = computed(() => {
         const existing = this.existingFiles().map((f) => ({
             ...f,
-            status: undefined, // Don't show status for existing files
+            status: undefined,
             isNew: false,
         }));
-        const newOnes = this.newFiles();
-        return [...newOnes, ...existing];
+        return [...this.newFiles(), ...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 === '*/*')
@@ -507,8 +515,12 @@ class FileManagementComponent extends BaseInputComponent {
             .map((type) => type.trim().replace('.', '').toUpperCase())
             .join(', ');
     }, ...(ngDevMode ? [{ debugName: "formattedAcceptedTypes" }] : []));
-    // Table configuration
-    // Drag & Drop handlers
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
+        this.progressIntervals.forEach((interval) => clearInterval(interval));
+        this.progressIntervals.clear();
+        super.ngOnDestroy();
+    }
     onDragOver(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -528,7 +540,6 @@ class FileManagementComponent extends BaseInputComponent {
             this.handleFiles(Array.from(droppedFiles));
         }
     }
-    // Browse button handler
     onBrowseClick() {
         this.fileInput.nativeElement.click();
     }
@@ -536,97 +547,163 @@ class FileManagementComponent extends BaseInputComponent {
         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 = [];
+        this.uploadedFile.set([]);
+        this.documentId = null;
+        this.emitUploadState();
     }
-    // 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
+    deleteFile() {
+        this.uploadedFile.set([]);
+        this.newFiles.set([]);
+        this.documentId = null;
+        this.uploadErrorMessage = null;
+        this.control?.reset();
+        this.filesUploaded.emit([]);
+        this.fileDeleted.emit({ fileId: this.documentId || '', isNew: true });
+        this.emitUploadState();
+    }
+    onDeleteFile(file) {
+        const isNewFile = file.isNew;
+        this.fileDeleted.emit({ fileId: file.id, isNew: !!isNewFile });
+        if (isNewFile) {
+            this.newFiles.update((files) => files.filter((f) => f.id !== file.id));
+            if (!this.newFiles().length) {
+                this.documentId = null;
+                this.control?.reset();
+                this.emitUploadState();
+            }
+        }
+    }
+    onPreviewFile(file) {
+        this.filePreview.emit(file);
+    }
     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())}`,
-                });
+                const error = `File ${file.name} exceeds maximum size of ${this.formatFileSize(this.maxFileSize())}`;
+                this.uploadErrorMessage = error;
+                this.uploadError.emit({ file, error });
+                continue;
+            }
+            if (!this.isValidFileType(file)) {
+                const error = `File type not allowed: ${file.type}`;
+                this.uploadErrorMessage = error;
+                this.uploadError.emit({ file, error });
                 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());
+        if (!validFiles.length)
+            return;
+        if (this.uploadFn()) {
+            this.uploadFileImmediately(validFiles[0]);
+            return;
         }
+        this.uploadedFile.set(validFiles);
+        this.filesUploaded.emit(validFiles);
     }
-    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('/*', '/'));
+    uploadFileImmediately(file) {
+        const uploadFn = this.uploadFn();
+        if (!uploadFn)
+            return;
+        const tempId = this.generateTempId(file);
+        const fileItem = {
+            id: tempId,
+            fileName: file.name,
+            size: file.size,
+            mimeType: file.type,
+            progress: 0,
+            status: UploadStatus.UPLOADING,
+            file,
+            isNew: true,
+        };
+        this.uploadErrorMessage = null;
+        this.documentId = null;
+        this.newFiles.set([fileItem]);
+        this.uploadedFile.set([file]);
+        this.emitUploadState();
+        const progressInterval = setInterval(() => {
+            this.newFiles.update((files) => files.map((f) => f.id === tempId && (f.progress ?? 0) < 90
+                ? { ...f, progress: (f.progress ?? 0) + 10 }
+                : f));
+        }, 200);
+        this.progressIntervals.set(tempId, progressInterval);
+        this._subscription.add(uploadFn(file)
+            .pipe(finalize(() => {
+            const interval = this.progressIntervals.get(tempId);
+            if (interval) {
+                clearInterval(interval);
+                this.progressIntervals.delete(tempId);
             }
-            return fileType === type;
+        }))
+            .subscribe({
+            next: (response) => {
+                this.documentId = response.documentId;
+                this.newFiles.set([
+                    {
+                        ...fileItem,
+                        id: response.documentId,
+                        progress: 100,
+                        status: UploadStatus.SUCCESS,
+                    },
+                ]);
+                this.control?.setValue(response.documentId);
+                this.filesUploaded.emit(response);
+                this.emitUploadState();
+            },
+            error: (error) => {
+                this.uploadErrorMessage = error?.message || 'Upload failed. Please try again.';
+                this.newFiles.set([
+                    {
+                        ...fileItem,
+                        progress: 0,
+                        status: UploadStatus.FAILED,
+                        error: this.uploadErrorMessage ?? undefined,
+                    },
+                ]);
+                this.uploadedFile.set([]);
+                this.emitUploadState();
+            },
+        }));
+    }
+    emitUploadState() {
+        const isUploading = this.newFiles().some((f) => f.status === UploadStatus.UPLOADING);
+        this.uploadStateChange.emit({
+            isUploading,
+            documentId: this.documentId,
+            hasFile: !!this.documentId || this.uploadedFile().length > 0,
         });
     }
     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 = {
@@ -647,20 +724,26 @@ class FileManagementComponent extends BaseInputComponent {
             });
         });
     }
-    // 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));
+    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('/*', '/'));
+            }
+            // bare extension without dot (e.g. "pdf" from FileExtentions.join)
+            if (!type.includes('/')) {
+                return fileExt === `.${type}`;
+            }
+            return fileType === type;
+        });
     }
     generateTempId(file) {
         return `temp-${file.name}-${file.size}-${Date.now()}`;
@@ -674,12 +757,12 @@ class FileManagementComponent extends BaseInputComponent {
         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: null, 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 }], usesInheritance: 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" }] });
+    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 }, uploadFn: { classPropertyName: "uploadFn", publicName: "uploadFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesUploaded: "filesUploaded", fileDeleted: "fileDeleted", filePreview: "filePreview", fileDownload: "fileDownload", uploadError: "uploadError", newFilesChange: "newFilesChange", uploadStateChange: "uploadStateChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"file-management\">\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  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    [accept]=\"acceptedTypes()\"\r\n    [multiple]=\"!uploadFn()\"\r\n    hidden\r\n    (change)=\"onFileInputChange($event)\"\r\n  />\r\n\r\n  @for (file of newFiles(); track file.id) {\r\n    <div class=\"uploaded-files\">\r\n      <div class=\"file-details\">\r\n        <p class=\"file-name\">{{ file.fileName }}</p>\r\n        @if (file.status === UploadStatus.UPLOADING) {\r\n          <span class=\"upload-percentage\">{{ file.progress ?? 0 }}%</span>\r\n        } @else if (file.status === UploadStatus.SUCCESS) {\r\n          <i class=\"pi pi-check-circle success-icon\"></i>\r\n        } @else if (file.status === UploadStatus.FAILED) {\r\n          <span class=\"upload-error-text\">{{ file.error }}</span>\r\n        }\r\n      </div>\r\n      <i\r\n        class=\"pi pi-trash delete-icon\"\r\n        [class.disabled]=\"file.status === UploadStatus.UPLOADING\"\r\n        (click)=\"file.status !== UploadStatus.UPLOADING && onDeleteFile(file)\"\r\n      ></i>\r\n    </div>\r\n  }\r\n\r\n  @if (!uploadFn() && uploadedFile().length) {\r\n    @for (file of uploadedFile(); track file.name) {\r\n      <div class=\"uploaded-files\">\r\n        <p>{{ file.name }}</p>\r\n        <i class=\"pi pi-trash delete-icon\" (click)=\"deleteFile()\"></i>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  @if (uploadErrorMessage) {\r\n    <div class=\"upload-error\">\r\n      <i class=\"pi pi-exclamation-circle\"></i>\r\n      <span>{{ uploadErrorMessage }}</span>\r\n    </div>\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}.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}.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 .file-details{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.uploaded-files .file-name{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uploaded-files .upload-percentage{font-size:.875rem;font-weight:500;color:var(--primary-color, #3b82f6)}.uploaded-files .success-icon{color:#22c55e;font-size:1.25rem}.uploaded-files .upload-error-text{color:#ef4444;font-size:.875rem}.uploaded-files .delete-icon{cursor:pointer;font-size:1.5rem;color:red;flex-shrink:0}.uploaded-files .delete-icon.disabled{opacity:.5;cursor:not-allowed}.upload-error{display:flex;align-items:center;gap:.5rem;color:#ef4444;font-size:.875rem;margin-top:.5rem}\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"] }]
-        }], 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: [{
+            args: [{ selector: 'app-file-management', imports: [CommonModule, TranslatePipe, ButtonModule, TooltipModule, FileSizePipe], template: "<div class=\"file-management\">\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  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    [accept]=\"acceptedTypes()\"\r\n    [multiple]=\"!uploadFn()\"\r\n    hidden\r\n    (change)=\"onFileInputChange($event)\"\r\n  />\r\n\r\n  @for (file of newFiles(); track file.id) {\r\n    <div class=\"uploaded-files\">\r\n      <div class=\"file-details\">\r\n        <p class=\"file-name\">{{ file.fileName }}</p>\r\n        @if (file.status === UploadStatus.UPLOADING) {\r\n          <span class=\"upload-percentage\">{{ file.progress ?? 0 }}%</span>\r\n        } @else if (file.status === UploadStatus.SUCCESS) {\r\n          <i class=\"pi pi-check-circle success-icon\"></i>\r\n        } @else if (file.status === UploadStatus.FAILED) {\r\n          <span class=\"upload-error-text\">{{ file.error }}</span>\r\n        }\r\n      </div>\r\n      <i\r\n        class=\"pi pi-trash delete-icon\"\r\n        [class.disabled]=\"file.status === UploadStatus.UPLOADING\"\r\n        (click)=\"file.status !== UploadStatus.UPLOADING && onDeleteFile(file)\"\r\n      ></i>\r\n    </div>\r\n  }\r\n\r\n  @if (!uploadFn() && uploadedFile().length) {\r\n    @for (file of uploadedFile(); track file.name) {\r\n      <div class=\"uploaded-files\">\r\n        <p>{{ file.name }}</p>\r\n        <i class=\"pi pi-trash delete-icon\" (click)=\"deleteFile()\"></i>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  @if (uploadErrorMessage) {\r\n    <div class=\"upload-error\">\r\n      <i class=\"pi pi-exclamation-circle\"></i>\r\n      <span>{{ uploadErrorMessage }}</span>\r\n    </div>\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}.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}.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 .file-details{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.uploaded-files .file-name{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uploaded-files .upload-percentage{font-size:.875rem;font-weight:500;color:var(--primary-color, #3b82f6)}.uploaded-files .success-icon{color:#22c55e;font-size:1.25rem}.uploaded-files .upload-error-text{color:#ef4444;font-size:.875rem}.uploaded-files .delete-icon{cursor:pointer;font-size:1.5rem;color:red;flex-shrink:0}.uploaded-files .delete-icon.disabled{opacity:.5;cursor:not-allowed}.upload-error{display:flex;align-items:center;gap:.5rem;color:#ef4444;font-size:.875rem;margin-top:.5rem}\n"] }]
+        }], 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 }] }], uploadFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadFn", required: false }] }], filesUploaded: [{
                 type: Output
             }], fileDeleted: [{
                 type: Output
@@ -691,6 +774,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], newFilesChange: [{
                 type: Output
+            }], uploadStateChange: [{
+                type: Output
             }], fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -1625,6 +1710,7 @@ class HijriCalendarComponent {
     cdr;
     model;
     disabledDays = []; // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
+    disabledDates = [];
     dateSelected = new EventEmitter();
     language = 'en';
     renderer = inject(Renderer2);
@@ -1661,14 +1747,20 @@ class HijriCalendarComponent {
             date.day === today.day;
     }
     isDisabled = (date) => {
-        if (!this.disabledDays || this.disabledDays.length === 0)
-            return false;
         const ngbDate = new NgbDate(date.year, date.month, date.day);
         const gregDate = this.calendar.toGregorian(ngbDate);
-        return this.disabledDays.includes(gregDate.getDay());
+        if (this.disabledDays?.length && this.disabledDays.includes(gregDate.getDay())) {
+            return true;
+        }
+        if (this.disabledDates?.length) {
+            return this.disabledDates.some((d) => d.getFullYear() === gregDate.getFullYear() &&
+                d.getMonth() === gregDate.getMonth() &&
+                d.getDate() === gregDate.getDate());
+        }
+        return false;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriCalendarComponent, deps: [{ token: i1$6.NgbDatepickerI18n }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HijriCalendarComponent, isStandalone: true, selector: "app-hijri-calendar", inputs: { model: "model", disabledDays: "disabledDays", language: "language" }, outputs: { dateSelected: "dateSelected" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HijriCalendarComponent, isStandalone: true, selector: "app-hijri-calendar", inputs: { model: "model", disabledDays: "disabledDays", disabledDates: "disabledDates", language: "language" }, outputs: { dateSelected: "dateSelected" }, providers: [
             { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
             { provide: NgbDatepickerI18n, useClass: DynamicHijriI18n }
         ], usesOnChanges: true, ngImport: i0, template: "<ngb-datepicker #dp [class.rtl]=\"language === 'ar'\" [class.ltr]=\"language === 'en'\" [ngModel]=\"model\"\r\n  [startDate]=\"startDate\" (ngModelChange)=\"onDateChange($event)\" (dateSelect)=\"dateSelected.emit($event)\"\r\n  [dayTemplate]=\"dayTemplate\" [markDisabled]=\"isDisabled\">\r\n</ngb-datepicker>\r\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n  <span class=\"custom-day\" [class.today]=\"isToday(date)\" [class.selected]=\"selected\"\r\n    [class.outside]=\"date.month !== currentMonth\" [class.disabled]=\"disabled\">\r\n    {{ date.day }}\r\n  </span>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i1$6.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
@@ -1683,6 +1775,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], disabledDays: [{
                 type: Input
+            }], disabledDates: [{
+                type: Input
             }], dateSelected: [{
                 type: Output
             }], language: [{
@@ -1796,6 +1890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class GregorianCalendarComponent {
     model;
     disabledDays = []; // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
+    disabledDates = [];
     dateSelected = new EventEmitter();
     renderer = inject(Renderer2);
     language = 'en';
@@ -1830,13 +1925,21 @@ class GregorianCalendarComponent {
             date.day === today.day;
     }
     isDisabled = (date) => {
-        if (!this.disabledDays || this.disabledDays.length === 0)
-            return false;
-        const jsDate = new Date(date.year, date.month - 1, date.day);
-        return this.disabledDays.includes(jsDate.getDay());
+        if (this.disabledDays?.length) {
+            const jsDate = new Date(date.year, date.month - 1, date.day);
+            if (this.disabledDays.includes(jsDate.getDay())) {
+                return true;
+            }
+        }
+        if (this.disabledDates?.length) {
+            return this.disabledDates.some((d) => d.getFullYear() === date.year &&
+                d.getMonth() + 1 === date.month &&
+                d.getDate() === date.day);
+        }
+        return false;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: GregorianCalendarComponent, isStandalone: true, selector: "app-gregorian-calendar", inputs: { model: "model", disabledDays: "disabledDays", language: "language" }, outputs: { dateSelected: "dateSelected" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: GregorianCalendarComponent, isStandalone: true, selector: "app-gregorian-calendar", inputs: { model: "model", disabledDays: "disabledDays", disabledDates: "disabledDates", language: "language" }, outputs: { dateSelected: "dateSelected" }, providers: [
             { provide: NgbCalendar, useClass: NgbCalendarGregorian },
             { provide: NgbDatepickerI18n, useClass: DynamicGregorianI18n }
         ], usesOnChanges: true, ngImport: i0, template: "@for(item of [calendarKey]; track item) {\r\n  <ngb-datepicker #dp\r\n    [class.rtl]=\"language === 'ar'\"\r\n    [class.ltr]=\"language === 'en'\"\r\n    [ngModel]=\"model\"\r\n    [startDate]=\"startDate\"\r\n    (ngModelChange)=\"onDateChange($event)\"\r\n    (dateSelect)=\"dateSelected.emit($event)\"\r\n    [dayTemplate]=\"dayTemplate\"\r\n    [markDisabled]=\"isDisabled\">\r\n  </ngb-datepicker>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n    <span class=\"custom-day\"\r\n      [class.today]=\"isToday(date)\"\r\n      [class.selected]=\"selected\"\r\n      [class.outside]=\"date.month !== currentMonth\"\r\n      [class.disabled]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i1$6.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
@@ -1851,6 +1954,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], disabledDays: [{
                 type: Input
+            }], disabledDates: [{
+                type: Input
             }], dateSelected: [{
                 type: Output
             }], language: [{
@@ -1953,6 +2058,7 @@ class DualCalendarComponent {
     hijriModel;
     currentLang = signal('ar', ...(ngDevMode ? [{ debugName: "currentLang" }] : []));
     disabledDays = []; // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
+    disabledDates = [];
     gregorianUTC = new EventEmitter();
     onClose = new EventEmitter();
     gregorianUTCValue = '';
@@ -2125,9 +2231,9 @@ class DualCalendarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DualCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DualCalendarComponent, isStandalone: true, selector: "app-dual-calendar", inputs: { control: "control", label: "label", name: "name", withTime: "withTime", isDatePickerShow: "isDatePickerShow", currentLang: "currentLang", disabledDays: "disabledDays", isShown: "isShown", appedToBody: "appedToBody" }, outputs: { gregorianUTC: "gregorianUTC", onClose: "onClose" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DualCalendarComponent, isStandalone: true, selector: "app-dual-calendar", inputs: { control: "control", label: "label", name: "name", withTime: "withTime", isDatePickerShow: "isDatePickerShow", currentLang: "currentLang", disabledDays: "disabledDays", disabledDates: "disabledDates", isShown: "isShown", appedToBody: "appedToBody" }, outputs: { gregorianUTC: "gregorianUTC", onClose: "onClose" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
-        ], viewQueries: [{ propertyName: "calendarWrapper", first: true, predicate: ["calendarWrapper"], descendants: true }, { propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calender-content\"   #calendarContainer>\r\n  @if(isDatePickerShow) {\r\n    <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n    [control]=\"control\" [formattedDate]='selectedDate'  >\r\n    </stc-date-picker-switcher>\r\n  }\r\n\r\n  <!-- calender.html -->\r\n  <div (click)=\"$event.stopPropagation()\" [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\"  #calendarWrapper>\r\n    <div class=\"header-tabs\">\r\n      <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n      <div class=\"tabs\">\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\"  type=\"button\" (click)=\"  mode='gregorian'\">\r\n          {{'calender.gregorian' | translate}}\r\n        </button>\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n          {{'calender.hijri' | translate}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if(mode === 'gregorian') {\r\n    <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n      [disabledDays]=\"disabledDays\" (dateSelected)=\"onSelectGregorian($event)\">\r\n    </app-gregorian-calendar>\r\n    }\r\n\r\n    @if(mode === 'hijri') {\r\n    <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\"\r\n      [disabledDays]=\"disabledDays\" (dateSelected)=\"onSelectHijri($event)\">\r\n    </app-hijri-calendar>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px;position:fixed;z-index:9999;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;width:100%;height:100%;border-radius:4px;margin:0}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:32px!important;height:32px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important;padding:0!important;margin:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: HijriCalendarComponent, selector: "app-hijri-calendar", inputs: ["model", "disabledDays", "language"], outputs: ["dateSelected"] }, { kind: "component", type: DatePickerSwitcherComponent, selector: "stc-date-picker-switcher", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "formattedDate"], outputs: ["openCalender"] }, { kind: "component", type: GregorianCalendarComponent, selector: "app-gregorian-calendar", inputs: ["model", "disabledDays", "language"], outputs: ["dateSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+        ], viewQueries: [{ propertyName: "calendarWrapper", first: true, predicate: ["calendarWrapper"], descendants: true }, { propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calender-content\"   #calendarContainer>\r\n  @if(isDatePickerShow) {\r\n    <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n    [control]=\"control\" [formattedDate]='selectedDate'  >\r\n    </stc-date-picker-switcher>\r\n  }\r\n\r\n  <!-- calender.html -->\r\n  <div (click)=\"$event.stopPropagation()\" [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\"  #calendarWrapper>\r\n    <div class=\"header-tabs\">\r\n      <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n      <div class=\"tabs\">\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\"  type=\"button\" (click)=\"  mode='gregorian'\">\r\n          {{'calender.gregorian' | translate}}\r\n        </button>\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n          {{'calender.hijri' | translate}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if(mode === 'gregorian') {\r\n    <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n      [disabledDays]=\"disabledDays\" [disabledDates]=\"disabledDates\" (dateSelected)=\"onSelectGregorian($event)\">\r\n    </app-gregorian-calendar>\r\n    }\r\n\r\n    @if(mode === 'hijri') {\r\n    <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\"\r\n      [disabledDays]=\"disabledDays\" [disabledDates]=\"disabledDates\" (dateSelected)=\"onSelectHijri($event)\">\r\n    </app-hijri-calendar>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px;position:fixed;z-index:9999;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;width:100%;height:100%;border-radius:4px;margin:0}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:32px!important;height:32px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important;padding:0!important;margin:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: HijriCalendarComponent, selector: "app-hijri-calendar", inputs: ["model", "disabledDays", "disabledDates", "language"], outputs: ["dateSelected"] }, { kind: "component", type: DatePickerSwitcherComponent, selector: "stc-date-picker-switcher", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "formattedDate"], outputs: ["openCalender"] }, { kind: "component", type: GregorianCalendarComponent, selector: "app-gregorian-calendar", inputs: ["model", "disabledDays", "disabledDates", "language"], outputs: ["dateSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
             trigger('slideDown', [
                 state('closed', style({
                     height: '0px',
@@ -2179,7 +2285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         GregorianCalendarComponent
                     ], providers: [
                         { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
-                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"calender-content\"   #calendarContainer>\r\n  @if(isDatePickerShow) {\r\n    <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n    [control]=\"control\" [formattedDate]='selectedDate'  >\r\n    </stc-date-picker-switcher>\r\n  }\r\n\r\n  <!-- calender.html -->\r\n  <div (click)=\"$event.stopPropagation()\" [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\"  #calendarWrapper>\r\n    <div class=\"header-tabs\">\r\n      <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n      <div class=\"tabs\">\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\"  type=\"button\" (click)=\"  mode='gregorian'\">\r\n          {{'calender.gregorian' | translate}}\r\n        </button>\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n          {{'calender.hijri' | translate}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if(mode === 'gregorian') {\r\n    <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n      [disabledDays]=\"disabledDays\" (dateSelected)=\"onSelectGregorian($event)\">\r\n    </app-gregorian-calendar>\r\n    }\r\n\r\n    @if(mode === 'hijri') {\r\n    <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\"\r\n      [disabledDays]=\"disabledDays\" (dateSelected)=\"onSelectHijri($event)\">\r\n    </app-hijri-calendar>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px;position:fixed;z-index:9999;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;width:100%;height:100%;border-radius:4px;margin:0}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:32px!important;height:32px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important;padding:0!important;margin:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"calender-content\"   #calendarContainer>\r\n  @if(isDatePickerShow) {\r\n    <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n    [control]=\"control\" [formattedDate]='selectedDate'  >\r\n    </stc-date-picker-switcher>\r\n  }\r\n\r\n  <!-- calender.html -->\r\n  <div (click)=\"$event.stopPropagation()\" [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\"  #calendarWrapper>\r\n    <div class=\"header-tabs\">\r\n      <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n      <div class=\"tabs\">\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\"  type=\"button\" (click)=\"  mode='gregorian'\">\r\n          {{'calender.gregorian' | translate}}\r\n        </button>\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n          {{'calender.hijri' | translate}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if(mode === 'gregorian') {\r\n    <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n      [disabledDays]=\"disabledDays\" [disabledDates]=\"disabledDates\" (dateSelected)=\"onSelectGregorian($event)\">\r\n    </app-gregorian-calendar>\r\n    }\r\n\r\n    @if(mode === 'hijri') {\r\n    <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\"\r\n      [disabledDays]=\"disabledDays\" [disabledDates]=\"disabledDates\" (dateSelected)=\"onSelectHijri($event)\">\r\n    </app-hijri-calendar>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px;position:fixed;z-index:9999;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;width:100%;height:100%;border-radius:4px;margin:0}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:32px!important;height:32px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important;padding:0!important;margin:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"] }]
         }], ctorParameters: () => [], propDecorators: { calendarWrapper: [{
                 type: ViewChild,
                 args: ['calendarWrapper']
@@ -2197,6 +2303,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], disabledDays: [{
                 type: Input
+            }], disabledDates: [{
+                type: Input
             }], gregorianUTC: [{
                 type: Output
             }], onClose: [{
@@ -2228,7 +2336,6 @@ var FormFieldTypeEnum;
 
 class DynamicFormComponent {
     dynamicFormData;
-    // Generic field change outputs (optional for consumers)
     selectButtonChange = new EventEmitter();
     selectChange = new EventEmitter();
     selectClicked = new EventEmitter();
@@ -2237,11 +2344,16 @@ class DynamicFormComponent {
     autoCompleteSelect = new EventEmitter();
     popUpFilesUploaded = new EventEmitter();
     fileDeleted = new EventEmitter();
+    uploadStateChange = new EventEmitter();
     inputsNames = [];
     formGroup;
     inputsMap;
+    standaloneFileControl = new FormControl(null);
     fieldType = FormFieldTypeEnum;
     getFormControl = FormUtils.getFormControl;
+    get fileUploadConfig() {
+        return this.dynamicFormData?.fileUpload;
+    }
     ngOnInit() {
         this.updateFormState();
     }
@@ -2255,8 +2367,20 @@ class DynamicFormComponent {
         this.inputsMap = this.dynamicFormData?.inputsMap;
         this.inputsNames = Object.keys(this.inputsMap || {});
     }
-    getAcceptedTypes() {
-        return FileExtentions.toString();
+    getAcceptedTypes(fileUpload) {
+        if (fileUpload?.acceptedTypes) {
+            return fileUpload.acceptedTypes;
+        }
+        return formatFileExtensionsForAccept(FileExtentions);
+    }
+    getMaxFileSize(fileUpload) {
+        return fileUpload?.maxFileSize ?? 262144000;
+    }
+    getFileUploadConfig(inputName) {
+        return this.inputsMap[inputName]?.fileUpload ?? this.dynamicFormData?.fileUpload;
+    }
+    hasUploadFileField() {
+        return this.inputsNames.some((name) => this.inputsMap[name].fieldType === FormFieldTypeEnum.UPLOAD_FILE);
     }
     onFilesUploaded(file) {
         this.popUpFilesUploaded.emit(file);
@@ -2264,13 +2388,16 @@ class DynamicFormComponent {
     onFileDeleted(file) {
         this.fileDeleted.emit(file);
     }
+    onUploadStateChange(state) {
+        this.uploadStateChange.emit(state);
+    }
     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", selectClicked: "selectClicked", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect", popUpFilesUploaded: "popUpFilesUploaded", fileDeleted: "fileDeleted" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"dynamic-form__content\">\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)\"\r\n        [disabledDays]=\"inputsMap[inputName].disabledDays || []\"></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        [disabledDates]=\"inputsMap[inputName].disabledDates || []\"\r\n        [disabledDays]=\"inputsMap[inputName].disabledDays || []\"\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        [withoutTime]=\"inputsMap[inputName].withoutTime || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || true\" />\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'\" [maxLength]=\"inputsMap[inputName].maxLength || null\">\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      <ng-template #optionTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n        <div class=\"flex items-center gap-3\">\r\n          @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n          <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n            [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n            class=\"w-8 h-8 rounded-full object-cover flex-shrink-0\" />\r\n          }\r\n          <div class=\"flex flex-col min-w-0\">\r\n            <span class=\"font-medium truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n            @if (inputsMap[inputName].optionTemplate!.subTextKey &&\r\n            item[inputsMap[inputName].optionTemplate!.subTextKey!]) {\r\n            <span class=\"text-sm text-gray-500 truncate\">{{ item[inputsMap[inputName].optionTemplate!.subTextKey!]\r\n              }}</span>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n      </ng-template>\r\n      <ng-template #selectedTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n        <div class=\"flex items-center gap-2\">\r\n          @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n          <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n            [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n            class=\"w-6 h-6 rounded-full object-cover flex-shrink-0\" />\r\n          }\r\n          <span class=\"truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n        </div>\r\n        }\r\n      </ng-template>\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')\" [optionValue]=\"inputsMap[inputName]?.optionValue || ''\"\r\n        [filter]=\"inputsMap[inputName].filter || false\" [multiple]=\"inputsMap[inputName].multiple || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || false\" [checkmark]=\"inputsMap[inputName].checkmark ?? true\"\r\n        [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [optionTemplate]=\"inputsMap[inputName].optionTemplate ? optionTpl : null\"\r\n        [selectedItemTemplate]=\"inputsMap[inputName].optionTemplate ? selectedTpl : null\"\r\n        (change)=\"selectChange.emit({ name: inputName, event: $event })\"\r\n        (click)=\"selectClicked.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.CHECKBOX) {\r\n      <div class=\"flex items-center gap-2 my-3\">\r\n        <p-checkbox [inputId]=\"inputsMap[inputName].inputId || inputName\" [binary]=\"true\"\r\n          [formControl]=\"getFormControl(inputName, formGroup)\" [disabled]=\"inputsMap[inputName].disabled || false\" />\r\n        <label [for]=\"inputsMap[inputName].inputId || inputName\">{{ inputsMap[inputName].label }}</label>\r\n      </div>\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'\" [allowedDomains]=\"inputsMap[inputName]?.allowedDomains\" />\r\n      }\r\n      @case(fieldType.UPLOAD_FILE) {\r\n      <app-file-management #fileManager #groupFileManager [maxFileSize]=\"262144000\" [maxConcurrentUploads]=\"1\"\r\n        [allowPreview]=\"true\" [acceptedTypes]=\"getAcceptedTypes()\" (filesUploaded)=\"onFilesUploaded($event)\"\r\n        [control]=\"getFormControl(inputName, formGroup)\" (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>", styles: [".dynamic-form__content>div{margin-bottom:15px}\n"], 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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", "disabledDates", "disabledDays", "hourFormat", "appendTo", "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", "disabledDays", "isShown", "appedToBody"], outputs: ["gregorianUTC", "onClose"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "maxLength", "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", "appendTo", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change", "clicked"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant", "allowedDomains"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: LocalizedLabelPipe, name: "localizedLabel" }] });
+    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", selectClicked: "selectClicked", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect", popUpFilesUploaded: "popUpFilesUploaded", fileDeleted: "fileDeleted", uploadStateChange: "uploadStateChange" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"dynamic-form__content\">\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)\"\r\n        [disabledDates]=\"inputsMap[inputName].disabledDates || []\"\r\n        [disabledDays]=\"inputsMap[inputName].disabledDays || []\"></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        [disabledDates]=\"inputsMap[inputName].disabledDates || []\"\r\n        [disabledDays]=\"inputsMap[inputName].disabledDays || []\"\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        [withoutTime]=\"inputsMap[inputName].withoutTime || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || true\" />\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'\" [maxLength]=\"inputsMap[inputName].maxLength || null\">\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      <ng-template #optionTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n        <div class=\"flex items-center gap-3\">\r\n          @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n          <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n            [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n            class=\"w-8 h-8 rounded-full object-cover flex-shrink-0\" />\r\n          }\r\n          <div class=\"flex flex-col min-w-0\">\r\n            <span class=\"font-medium truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n            @if (inputsMap[inputName].optionTemplate!.subTextKey &&\r\n            item[inputsMap[inputName].optionTemplate!.subTextKey!]) {\r\n            <span class=\"text-sm text-gray-500 truncate\">{{ item[inputsMap[inputName].optionTemplate!.subTextKey!]\r\n              }}</span>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n      </ng-template>\r\n      <ng-template #selectedTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n        <div class=\"flex items-center gap-2\">\r\n          @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n          <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n            [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n            class=\"w-6 h-6 rounded-full object-cover flex-shrink-0\" />\r\n          }\r\n          <span class=\"truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n        </div>\r\n        }\r\n      </ng-template>\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')\" [optionValue]=\"inputsMap[inputName]?.optionValue || ''\"\r\n        [filter]=\"inputsMap[inputName].filter || false\" [multiple]=\"inputsMap[inputName].multiple || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || false\" [checkmark]=\"inputsMap[inputName].checkmark ?? true\"\r\n        [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [optionTemplate]=\"inputsMap[inputName].optionTemplate ? optionTpl : null\"\r\n        [selectedItemTemplate]=\"inputsMap[inputName].optionTemplate ? selectedTpl : null\"\r\n        (change)=\"selectChange.emit({ name: inputName, event: $event })\"\r\n        (click)=\"selectClicked.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.CHECKBOX) {\r\n      <div class=\"flex items-center gap-2 my-3\">\r\n        <p-checkbox [inputId]=\"inputsMap[inputName].inputId || inputName\" [binary]=\"true\"\r\n          [formControl]=\"getFormControl(inputName, formGroup)\" [disabled]=\"inputsMap[inputName].disabled || false\" />\r\n        <label [for]=\"inputsMap[inputName].inputId || inputName\">{{ inputsMap[inputName].label }}</label>\r\n      </div>\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'\" [allowedDomains]=\"inputsMap[inputName]?.allowedDomains\" />\r\n      }\r\n      @case(fieldType.UPLOAD_FILE) {\r\n      <app-file-management #fileManager #groupFileManager\r\n        [maxFileSize]=\"getMaxFileSize(getFileUploadConfig(inputName))\"\r\n        [maxConcurrentUploads]=\"1\"\r\n        [allowPreview]=\"true\"\r\n        [acceptedTypes]=\"getAcceptedTypes(getFileUploadConfig(inputName))\"\r\n        [uploadFn]=\"getFileUploadConfig(inputName)?.uploadFn\"\r\n        (filesUploaded)=\"onFilesUploaded($event)\"\r\n        (uploadStateChange)=\"onUploadStateChange($event)\"\r\n        [control]=\"getFormControl(inputName, formGroup)\"\r\n        (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>", styles: [".dynamic-form__content>div{margin-bottom:15px}\n"], dependencies: [{ kind: "directive", type: 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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", "disabledDates", "disabledDays", "hourFormat", "appendTo", "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", "disabledDays", "disabledDates", "isShown", "appedToBody"], outputs: ["gregorianUTC", "onClose"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "maxLength", "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", "uploadFn"], outputs: ["filesUploaded", "fileDeleted", "filePreview", "fileDownload", "uploadError", "newFilesChange", "uploadStateChange"] }, { kind: "component", type: SelectComponent, selector: "stc-select", inputs: ["selectedItemTemplate", "optionTemplate", "options", "optionLabel", "optionValue", "emptyMessage", "checkmark", "showClear", "editable", "filter", "multiple", "filterBy", "selectAllLabel", "dataKey", "size", "appendTo", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change", "clicked"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant", "allowedDomains"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { 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,
             args: [{ selector: 'app-dynamic-form', standalone: true, imports: [
-                        CommonModule,
+                        NgClass,
                         ReactiveFormsModule,
                         DatePickerComponent,
                         ValidationErrorsPipe,
@@ -2284,7 +2411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         SwitchComponent,
                         LocalizedLabelPipe,
                         CheckboxModule,
-                    ], template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"dynamic-form__content\">\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)\"\r\n        [disabledDays]=\"inputsMap[inputName].disabledDays || []\"></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        [disabledDates]=\"inputsMap[inputName].disabledDates || []\"\r\n        [disabledDays]=\"inputsMap[inputName].disabledDays || []\"\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        [withoutTime]=\"inputsMap[inputName].withoutTime || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || true\" />\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'\" [maxLength]=\"inputsMap[inputName].maxLength || null\">\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      <ng-template #optionTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n        <div class=\"flex items-center gap-3\">\r\n          @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n          <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n            [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n            class=\"w-8 h-8 rounded-full object-cover flex-shrink-0\" />\r\n          }\r\n          <div class=\"flex flex-col min-w-0\">\r\n            <span class=\"font-medium truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n            @if (inputsMap[inputName].optionTemplate!.subTextKey &&\r\n            item[inputsMap[inputName].optionTemplate!.subTextKey!]) {\r\n            <span class=\"text-sm text-gray-500 truncate\">{{ item[inputsMap[inputName].optionTemplate!.subTextKey!]\r\n              }}</span>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n      </ng-template>\r\n      <ng-template #selectedTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n        <div class=\"flex items-center gap-2\">\r\n          @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n          <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n            [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n            class=\"w-6 h-6 rounded-full object-cover flex-shrink-0\" />\r\n          }\r\n          <span class=\"truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n        </div>\r\n        }\r\n      </ng-template>\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')\" [optionValue]=\"inputsMap[inputName]?.optionValue || ''\"\r\n        [filter]=\"inputsMap[inputName].filter || false\" [multiple]=\"inputsMap[inputName].multiple || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || false\" [checkmark]=\"inputsMap[inputName].checkmark ?? true\"\r\n        [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [optionTemplate]=\"inputsMap[inputName].optionTemplate ? optionTpl : null\"\r\n        [selectedItemTemplate]=\"inputsMap[inputName].optionTemplate ? selectedTpl : null\"\r\n        (change)=\"selectChange.emit({ name: inputName, event: $event })\"\r\n        (click)=\"selectClicked.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.CHECKBOX) {\r\n      <div class=\"flex items-center gap-2 my-3\">\r\n        <p-checkbox [inputId]=\"inputsMap[inputName].inputId || inputName\" [binary]=\"true\"\r\n          [formControl]=\"getFormControl(inputName, formGroup)\" [disabled]=\"inputsMap[inputName].disabled || false\" />\r\n        <label [for]=\"inputsMap[inputName].inputId || inputName\">{{ inputsMap[inputName].label }}</label>\r\n      </div>\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'\" [allowedDomains]=\"inputsMap[inputName]?.allowedDomains\" />\r\n      }\r\n      @case(fieldType.UPLOAD_FILE) {\r\n      <app-file-management #fileManager #groupFileManager [maxFileSize]=\"262144000\" [maxConcurrentUploads]=\"1\"\r\n        [allowPreview]=\"true\" [acceptedTypes]=\"getAcceptedTypes()\" (filesUploaded)=\"onFilesUploaded($event)\"\r\n        [control]=\"getFormControl(inputName, formGroup)\" (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>", styles: [".dynamic-form__content>div{margin-bottom:15px}\n"] }]
+                    ], template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"dynamic-form__content\">\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)\"\r\n        [disabledDates]=\"inputsMap[inputName].disabledDates || []\"\r\n        [disabledDays]=\"inputsMap[inputName].disabledDays || []\"></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        [disabledDates]=\"inputsMap[inputName].disabledDates || []\"\r\n        [disabledDays]=\"inputsMap[inputName].disabledDays || []\"\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        [withoutTime]=\"inputsMap[inputName].withoutTime || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || true\" />\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'\" [maxLength]=\"inputsMap[inputName].maxLength || null\">\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      <ng-template #optionTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n        <div class=\"flex items-center gap-3\">\r\n          @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n          <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n            [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n            class=\"w-8 h-8 rounded-full object-cover flex-shrink-0\" />\r\n          }\r\n          <div class=\"flex flex-col min-w-0\">\r\n            <span class=\"font-medium truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n            @if (inputsMap[inputName].optionTemplate!.subTextKey &&\r\n            item[inputsMap[inputName].optionTemplate!.subTextKey!]) {\r\n            <span class=\"text-sm text-gray-500 truncate\">{{ item[inputsMap[inputName].optionTemplate!.subTextKey!]\r\n              }}</span>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n      </ng-template>\r\n      <ng-template #selectedTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n        <div class=\"flex items-center gap-2\">\r\n          @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n          <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n            [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n            class=\"w-6 h-6 rounded-full object-cover flex-shrink-0\" />\r\n          }\r\n          <span class=\"truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n        </div>\r\n        }\r\n      </ng-template>\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')\" [optionValue]=\"inputsMap[inputName]?.optionValue || ''\"\r\n        [filter]=\"inputsMap[inputName].filter || false\" [multiple]=\"inputsMap[inputName].multiple || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || false\" [checkmark]=\"inputsMap[inputName].checkmark ?? true\"\r\n        [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [optionTemplate]=\"inputsMap[inputName].optionTemplate ? optionTpl : null\"\r\n        [selectedItemTemplate]=\"inputsMap[inputName].optionTemplate ? selectedTpl : null\"\r\n        (change)=\"selectChange.emit({ name: inputName, event: $event })\"\r\n        (click)=\"selectClicked.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.CHECKBOX) {\r\n      <div class=\"flex items-center gap-2 my-3\">\r\n        <p-checkbox [inputId]=\"inputsMap[inputName].inputId || inputName\" [binary]=\"true\"\r\n          [formControl]=\"getFormControl(inputName, formGroup)\" [disabled]=\"inputsMap[inputName].disabled || false\" />\r\n        <label [for]=\"inputsMap[inputName].inputId || inputName\">{{ inputsMap[inputName].label }}</label>\r\n      </div>\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'\" [allowedDomains]=\"inputsMap[inputName]?.allowedDomains\" />\r\n      }\r\n      @case(fieldType.UPLOAD_FILE) {\r\n      <app-file-management #fileManager #groupFileManager\r\n        [maxFileSize]=\"getMaxFileSize(getFileUploadConfig(inputName))\"\r\n        [maxConcurrentUploads]=\"1\"\r\n        [allowPreview]=\"true\"\r\n        [acceptedTypes]=\"getAcceptedTypes(getFileUploadConfig(inputName))\"\r\n        [uploadFn]=\"getFileUploadConfig(inputName)?.uploadFn\"\r\n        (filesUploaded)=\"onFilesUploaded($event)\"\r\n        (uploadStateChange)=\"onUploadStateChange($event)\"\r\n        [control]=\"getFormControl(inputName, formGroup)\"\r\n        (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>", styles: [".dynamic-form__content>div{margin-bottom:15px}\n"] }]
         }], propDecorators: { dynamicFormData: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2304,6 +2431,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], fileDeleted: [{
                 type: Output
+            }], uploadStateChange: [{
+                type: Output
             }] } });
 
 class ConfirmationDialogComponent extends DynamicDialogRef {
@@ -2314,23 +2443,51 @@ class ConfirmationDialogComponent extends DynamicDialogRef {
     _subscription = new Subscription();
     dialogFormData;
     uploadedFile;
+    documentId = null;
+    uploadState = { isUploading: false, documentId: null, hasFile: false };
+    get hasFileUpload() {
+        return !!this.dialogFormData?.fileUpload || this.hasFileUploadField();
+    }
+    hasFileUploadField() {
+        const inputsMap = this.dialogFormData?.inputsMap ?? {};
+        return Object.values(inputsMap).some((field) => field.fieldType === FormFieldTypeEnum.UPLOAD_FILE && !!field.fileUpload?.uploadFn);
+    }
+    get isConfirmDisabled() {
+        if (this.dialogFormData?.formGroup?.invalid) {
+            return true;
+        }
+        if (this.hasFileUpload && (this.uploadState.isUploading || !this.uploadState.documentId)) {
+            return true;
+        }
+        return false;
+    }
     ngOnDestroy() {
         this._subscription.unsubscribe();
     }
     ngOnInit() {
-        // closing when navigating back from the browser
         this._subscription.add(this.router.events.pipe(filter((event) => event instanceof NavigationStart)).subscribe(() => {
             if (this.dynamicDialogConfig) {
                 this._ref.close(false);
             }
         }));
-        this.dialogFormData = this.dynamicDialogConfig.data?.inputForm;
+        const inputForm = this.dynamicDialogConfig.data?.inputForm;
+        const fileUpload = inputForm?.fileUpload ?? this.dynamicDialogConfig.data?.fileUpload;
+        this.dialogFormData = {
+            ...inputForm,
+            formGroup: inputForm?.formGroup ?? new FormGroup({}),
+            inputsMap: inputForm?.inputsMap ?? {},
+            fileUpload,
+        };
     }
     submit() {
-        // 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);
-        if (this.uploadedFile) {
+        if (this.documentId) {
+            this._ref.close({
+                isSubmitted: true,
+                documentId: this.documentId,
+                data: this.dialogFormData?.formGroup?.value,
+            });
+        }
+        else if (this.uploadedFile) {
             this._ref.close({ isSubmitted: true, file: this.uploadedFile });
         }
         else {
@@ -2341,12 +2498,25 @@ class ConfirmationDialogComponent extends DynamicDialogRef {
         this._ref.close(false);
     }
     onPopFilesUploaded(file) {
-        this.uploadedFile = file;
+        if (file?.documentId) {
+            this.documentId = file.documentId;
+        }
+        else {
+            this.uploadedFile = file;
+        }
     }
-    onFileDeleted(file) {
+    onFileDeleted() {
+        this.documentId = null;
+        this.uploadedFile = null;
+    }
+    onUploadStateChange(state) {
+        this.uploadState = state;
+        if (state.documentId) {
+            this.documentId = state.documentId;
+        }
     }
     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\"  (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", "selectClicked", "switchChange", "autoCompleteSearch", "autoCompleteSelect", "popUpFilesUploaded", "fileDeleted"] }, { 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 || hasFileUpload) {\r\n      <app-dynamic-form [dynamicFormData]=\"dialogFormData\" (popUpFilesUploaded)=\"onPopFilesUploaded($event)\"\r\n        (fileDeleted)=\"onFileDeleted()\" (uploadStateChange)=\"onUploadStateChange($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]=\"isConfirmDisabled\" [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: [".confirmation-dialog .dialog-wrapper{padding:.5rem}.confirmation-dialog__content{text-align:center}.confirmation-dialog__message{font-weight:600}.confirmation-dialog__hint{color:#6b7280}.confirmation-dialog__actions{display:flex;justify-content:center;gap:.5rem}\n"], 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", "selectClicked", "switchChange", "autoCompleteSearch", "autoCompleteSelect", "popUpFilesUploaded", "fileDeleted", "uploadStateChange"] }, { 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,
@@ -2356,7 +2526,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\"  (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" }]
+                    ], 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 || hasFileUpload) {\r\n      <app-dynamic-form [dynamicFormData]=\"dialogFormData\" (popUpFilesUploaded)=\"onPopFilesUploaded($event)\"\r\n        (fileDeleted)=\"onFileDeleted()\" (uploadStateChange)=\"onUploadStateChange($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]=\"isConfirmDisabled\" [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: [".confirmation-dialog .dialog-wrapper{padding:.5rem}.confirmation-dialog__content{text-align:center}.confirmation-dialog__message{font-weight:600}.confirmation-dialog__hint{color:#6b7280}.confirmation-dialog__actions{display:flex;justify-content:center;gap:.5rem}\n"] }]
         }] });
 
 class ReadMoreComponent {