@acorex/modules 19.2.17-next.0 → 19.2.17

package/fesm2022/{acorex-modules-document-management-acorex-modules-document-management-C9ZCejjs.mjs → acorex-modules-document-management-acorex-modules-document-management-BmLGtKDq.mjs}

@@ -1,8 +1,8 @@
 import { AXPSessionService, AXPAuthGuard, AXP_PERMISSION_PROVIDER } from '@acorex/platform/auth';
-import { AXPSearchCommandProvider, AXPEntityQueryType, AXPEntityCommandScope, createAllQueryView, AXPFileTypeProviderService, AXP_FILE_TYPE_INFO_PROVIDER, AXPSettingScope, AXPSettingService, AXP_MENU_PROVIDER, AXP_SETTING_DEFINITION_PROVIDER, AXP_SEARCH_PROVIDER } from '@acorex/platform/common';
+import { AXPSearchCommandProvider, createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType, AXPFileTypeProviderService, AXP_FILE_TYPE_INFO_PROVIDER, AXPFileStorageService, AXPSettingScope, AXPSettingService, AXP_MENU_PROVIDER, AXP_SETTING_DEFINITION_PROVIDER, AXP_SEARCH_PROVIDER } from '@acorex/platform/common';
 import { AXPEntityService, AXMEntityCrudServiceImpl, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
 import * as i0 from '@angular/core';
-import { inject, Injector, Injectable, NgModule, Component, ChangeDetectionStrategy, signal, computed, viewChild, effect } from '@angular/core';
+import { inject, Injector, Injectable, NgModule, ChangeDetectionStrategy, Component, signal, computed, viewChild, effect } from '@angular/core';
 import { firstValueFrom, Subject } from 'rxjs';
 import * as i6 from '@acorex/platform/layout/builder';
 import { AXPWidgetsCatalog, AXPWidgetComponent, AXPLayoutBuilderModule, AXP_WIDGETS_ADVANCE_GROUP, AXP_WIDGETS_EDITOR_GROUP } from '@acorex/platform/layout/builder';
@@ -26,18 +26,27 @@ import { FormsModule } from '@angular/forms';
 import get from 'lodash-es/get';
 import set from 'lodash-es/set';
 import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY } from '@acorex/platform/widgets';
+import * as i2$1 from '@acorex/components/button';
+import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
+import { AXButtonGroupModule } from '@acorex/components/button-group';
+import * as i3$1 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import * as i4$1 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i4 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
 import { AXDateTimeModule } from '@acorex/core/date-time';
 import * as i3 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
-import { AXTranslationService } from '@acorex/core/translation';
-import { AXPDataGenerator, AXPElementDataDirective } from '@acorex/platform/core';
+import { AXPElementDataDirective } from '@acorex/platform/core';
 import { get as get$1 } from 'lodash-es';
 import { AXDialogService } from '@acorex/components/dialog';
 import { AXPopupService } from '@acorex/components/popup';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
+import * as i3$2 from '@acorex/components/media-viewer';
+import { AXMediaViewerModule } from '@acorex/components/media-viewer';
 
 const config = {
     i18n: 'document-management',
@@ -814,7 +823,7 @@ async function documentTypeFactory(injector) {
                 schema: {
                     dataType: 'object',
                     interface: {
-                        type: AXPWidgetsCatalog.fileTypeExtension,
+                        type: AXPWidgetsCatalog.documentAttachment,
                         options: {},
                     },
                 },
@@ -3013,6 +3022,7 @@ class AXMDocumentManagerService {
         this.documentService = inject(AXMDocumentService);
         this.popupService = inject(AXPopupService);
         this.dialogService = inject(AXDialogService);
+        this.fileService = inject(AXPFileStorageService);
         this.scopedDriveCache = new Map();
     }
     scope(scope, options) {
@@ -3023,7 +3033,6 @@ class AXMDocumentManagerService {
         return this.scopedDriveCache.get(cacheKey);
     }
     getScopeCacheKey(scope, options) {
-        // در آینده می‌توان این را برای کش کردن بر اساس ترکیب scope و options گسترش داد
         return scope;
     }
     /**
@@ -3113,6 +3122,7 @@ class AXMDocumentManagerService {
             type: 'folder',
             parentId: folder.parentId || null,
             lastModified: folder.updatedAt,
+            childrenCount: folder.nodeCount,
             children: [
                 ...(folder.folders?.map((child) => ({
                     id: child.id,
@@ -3120,15 +3130,15 @@ class AXMDocumentManagerService {
                     type: 'folder',
                     parentId: child.parentId || null,
                     lastModified: child.updatedAt,
-                    size: AXPDataGenerator.number(50, 9000000),
+                    childrenCount: child.nodeCount,
                 })) || []),
                 ...(folder.documents?.map((doc) => ({
                     id: doc.id,
                     name: doc.name,
                     type: 'file',
                     parentId: doc.parentId,
-                    lastModified: AXPDataGenerator.date(),
-                    size: AXPDataGenerator.number(50, 9000000),
+                    lastModified: doc.meta?.['uploadedAt'],
+                    size: doc.meta?.['size'],
                 })) || []),
             ],
         };
@@ -3251,6 +3261,8 @@ class AXMDocumentManagerService {
             type: 'file',
             parentId: file.parentId,
             lastModified: new Date(),
+            size: file.meta?.['size'],
+            fileId: file.fileId,
         };
     }
     async createFile(data) {
@@ -3284,7 +3296,8 @@ class AXMDocumentManagerService {
         }
     }
     async showCreateFolderDialog(parentId) {
-        const comp = (await import('./acorex-modules-document-management-create-folder-dialog.component-BnRaCq_Q.mjs')).AXMCreateFolderDialog;
+        const comp = (await import('./acorex-modules-document-management-create-folder-dialog.component-DqoWmtm7.mjs'))
+            .AXMCreateFolderDialog;
         const popup = await this.popupService.open(comp, {
             title: 't("actions.create-folder")',
             data: {
@@ -3293,8 +3306,139 @@ class AXMDocumentManagerService {
         });
         return popup.data?.folder;
     }
+    //Todo beacuse id is String here return type is string and need dynamic type and wrong process
+    async showTreeFolderPopup() {
+        const comp = (await import('./acorex-modules-document-management-index-9l8D5iEE.mjs')).AXMTreeFolderPopupComponent;
+        const popup = await this.popupService.open(comp, {
+            title: 't("actions.create-folder")',
+            data: {
+            //  parentId,
+            },
+        });
+        return popup.data?.selectedNodeId;
+    }
+    async showFileViewerPopup(node) {
+        const parentFolder = await this.folderService.getOne(node.parentId);
+        const parentFolderName = parentFolder.name;
+        const nodes = await Promise.all(parentFolder.documents?.map(async (doc) => {
+            const fileInfo = await this.fileService.getInfo(doc.fileId);
+            // Convert mimeType to supported type
+            let fileType = 'image';
+            if (fileInfo.mimeType.startsWith('image/')) {
+                fileType = 'image';
+            }
+            else if (fileInfo.mimeType.startsWith('audio/')) {
+                fileType = 'audio';
+            }
+            else if (fileInfo.mimeType.startsWith('video/')) {
+                fileType = 'video';
+            }
+            else if (fileInfo.mimeType === 'application/pdf') {
+                fileType = 'pdf';
+            }
+            return {
+                id: doc.id || '',
+                name: doc.name,
+                type: fileType,
+                url: fileInfo.url || '',
+                size: String(fileInfo.size),
+                thumbnail: fileInfo.url || '',
+            };
+        }) || []);
+        console.log(nodes);
+        const comp = (await import('./acorex-modules-document-management-file-viewer-popup.component-CaSagveT.mjs'))
+            .AXMFileViewerPopupComponent;
+        await this.popupService.open(comp, {
+            title: `t("gallery" , ${RootConfig.module.name})` + ' - ' + parentFolderName,
+            data: {
+                nodes,
+            },
+        });
+    }
+    async openFile(node) {
+        const file = await this.documentService.getOne(node.id);
+        if (file && file.fileId) {
+            const fileInfo = await this.fileService.getInfo(file.fileId);
+            if (fileInfo.url) {
+                try {
+                    // Check if the URL looks like base64 - only attempt decoding if it matches base64 pattern
+                    const isBase64 = /^[A-Za-z0-9+/]*={0,2}$/.test(fileInfo.url);
+                    let url = fileInfo.url;
+                    if (isBase64) {
+                        try {
+                            url = atob(fileInfo.url);
+                            console.log('Successfully decoded base64 URL:', url);
+                        }
+                        catch (e) {
+                            console.warn('Failed to decode as base64, using original URL:', e);
+                        }
+                    }
+                    // Make sure URL has a protocol, add https if missing
+                    let finalUrl = url.startsWith('http') ? url : `https://${url}`;
+                    console.log('Attempting to open URL:', finalUrl);
+                    // Try to open in a new window with a friendly message to copy URL if it fails
+                    this.showUrlDialog(finalUrl, file.name);
+                }
+                catch (error) {
+                    console.error('Error processing URL:', error);
+                    this.showUrlDialog(fileInfo.url, file.name, true);
+                }
+            }
+            else {
+                console.warn('No URL found for file:', file);
+                this.dialogService.alert('No URL Available', 'No URL found for this file.', 'warning');
+            }
+        }
+        else {
+            console.warn('File not found or has no fileId:', node.id);
+            this.dialogService.alert('File Not Found', 'File information could not be retrieved.', 'warning');
+        }
+    }
+    /**
+     * Shows a dialog with URL options including a copy button
+     */
+    async showUrlDialog(url, fileName, isError = false) {
+        const title = `Open "${fileName}"`;
+        const message = isError
+            ? 'There was an issue processing the URL. You can try opening it manually:\n' + url
+            : 'Click the button below to open the URL, or copy it to open manually:\n' + url;
+        const result = await this.dialogService.confirm(title, message, 'primary');
+        if (result) {
+            try {
+                window.open(url, '_blank', 'noopener,noreferrer');
+            }
+            catch (e) {
+                console.error('Error opening URL from dialog:', e);
+                this.dialogService.alert('Error', 'Could not open URL in browser', 'danger');
+            }
+        }
+        else {
+            // If user cancels, offer to copy the URL
+            const copyResult = await this.dialogService.confirm('Copy URL', 'Would you like to copy the URL to clipboard?', 'primary');
+            if (copyResult) {
+                try {
+                    navigator.clipboard.writeText(url);
+                    this.dialogService.alert('Success', 'URL copied to clipboard', 'success');
+                }
+                catch (e) {
+                    console.error('Error copying URL to clipboard:', e);
+                    // Fallback for clipboard API not available
+                    const textArea = document.createElement('textarea');
+                    textArea.value = url;
+                    document.body.appendChild(textArea);
+                    textArea.focus();
+                    textArea.select();
+                    document.execCommand('copy');
+                    document.body.removeChild(textArea);
+                    this.dialogService.alert('Success', 'URL copied to clipboard', 'success');
+                }
+            }
+        }
+        return result;
+    }
     async rename(node) {
-        const comp = (await import('./acorex-modules-document-management-rename-node-dialog.component-EBf1XqU8.mjs')).AXMRenameNodeDialog;
+        const comp = (await import('./acorex-modules-document-management-rename-node-dialog.component-BoODbM0H.mjs'))
+            .AXMRenameNodeDialog;
         const popup = await this.popupService.open(comp, {
             title: 't("actions.rename")',
             data: {
@@ -3338,34 +3482,16 @@ class AXMDocumentManagerService {
             ],
         });
     }
-    /**
-     * جستجوی فولدرها با نام مشخص شده در اسکوپ
-     * @param searchTerm عبارت جستجو
-     * @param scope اسکوپ جستجو
-     * @param options گزینه‌های اضافی مانند tenantId و userId
-     */
     async searchFolders(searchTerm, scope, options) {
         const { result: rootNode } = await this.getRoot(scope, options);
         const folders = await this.folderService.searchFolders(searchTerm, rootNode.id);
         return folders.map((folder) => this.mapFolderDtoToFolderNode(folder));
     }
-    /**
-     * جستجوی فایل‌ها با نام مشخص شده در اسکوپ
-     * @param searchTerm عبارت جستجو
-     * @param scope اسکوپ جستجو
-     * @param options گزینه‌های اضافی مانند tenantId و userId
-     */
     async searchFiles(searchTerm, scope, options) {
         const { result: rootNode } = await this.getRoot(scope, options);
         const files = await this.documentService.searchFiles(searchTerm, rootNode.id);
         return files.map((file) => this.mapFileToNode(file));
     }
-    /**
-     * جستجوی تمام نودها (فولدرها و فایل‌ها) با نام مشخص شده در اسکوپ
-     * @param searchTerm عبارت جستجو
-     * @param scope اسکوپ جستجو
-     * @param options گزینه‌های اضافی مانند tenantId و userId
-     */
     async searchNodes(searchTerm, scope, options) {
         const [folders, files] = await Promise.all([
             this.searchFolders(searchTerm, scope, options),
@@ -3373,6 +3499,99 @@ class AXMDocumentManagerService {
         ]);
         return [...folders, ...files];
     }
+    async getAllFolders() {
+        //TODO filter by scope
+        return (await this.folderService.query()).items.map(this.mapFolderDtoToFolderNode);
+    }
+    async getAllFiles() {
+        //TODO filter by scope
+        return (await this.documentService.query()).items.map(this.mapFileToNode);
+    }
+    async getAllNodes() {
+        return [...(await this.getAllFolders()), ...(await this.getAllFiles())];
+    }
+    async showChooseFileDialog() {
+        const comp = (await import('./acorex-modules-document-management-drive-choose.component-CkS8s7zm.mjs')).AXMDocumentDriveChooseComponent;
+        await this.popupService.open(comp);
+    }
+    async downloadFile(node) {
+        const file = await this.documentService.getOne(node.id);
+        if (file && file.fileId) {
+            const fileInfo = await this.fileService.getInfo(file.fileId);
+            const link = document.createElement('a');
+            link.href = fileInfo.url ?? '';
+            link.download = file.name; // Set the desired file name
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+        else {
+            console.log('id is null');
+        }
+    }
+    /**
+     * Creates a copy of a node (file or folder)
+     * @param node The node to copy
+     * @returns The newly created copied node
+     */
+    async copy(node) {
+        if (!node) {
+            throw new Error('Node to copy cannot be null or undefined');
+        }
+        // Create a name with " copy" before the extension
+        const newName = this.createCopyName(node.name);
+        if (node.type === 'file') {
+            // Get the original file to copy all its data
+            const originalFile = await this.documentService.getOne(node.id);
+            if (!originalFile) {
+                throw new Error(`File with ID ${node.id} not found`);
+            }
+            // Create a document model from the original with the new name
+            // Extract needed properties without id
+            const { id, ...fileDataWithoutId } = originalFile;
+            const fileData = {
+                ...fileDataWithoutId,
+                name: newName,
+                title: newName,
+            };
+            // Create the new file
+            return await this.createFile(fileData);
+        }
+        else if (node.type === 'folder') {
+            // Get the original folder to copy all its data
+            const originalFolder = await this.folderService.getOne(node.id);
+            if (!originalFolder) {
+                throw new Error(`Folder with ID ${node.id} not found`);
+            }
+            // Create a folder model from the original with the new name
+            // Extract needed properties without id
+            const { id, ...folderDataWithoutId } = originalFolder;
+            const folderData = {
+                ...folderDataWithoutId,
+                name: newName,
+            };
+            // Create the new folder
+            return await this.createFolder(folderData);
+        }
+        else {
+            throw new Error(`Unsupported node type: ${node.type}`);
+        }
+    }
+    /**
+     * Creates a copy name by adding " copy" before the extension
+     * @param originalName The original filename
+     * @returns The new filename with " copy" added before the extension
+     */
+    createCopyName(originalName) {
+        const lastDotIndex = originalName.lastIndexOf('.');
+        if (lastDotIndex === -1) {
+            // No extension
+            return `${originalName} copy`;
+        }
+        const nameWithoutExt = originalName.substring(0, lastDotIndex);
+        const extension = originalName.substring(lastDotIndex);
+        return `${nameWithoutExt} copy${extension}`;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentManagerService, providedIn: 'root' }); }
 }
@@ -3426,30 +3645,27 @@ class ScopedDriveService {
     async getAvailableSpace() {
         return this.parent.getAvailableSpace();
     }
-    /**
-     * جستجوی فولدرها با نام مشخص شده در اسکوپ فعلی
-     * @param searchTerm عبارت جستجو
-     */
     async searchFolders(searchTerm) {
         this.validateScopeOptions();
         return this.parent.searchFolders(searchTerm, this.scope, this.options);
     }
-    /**
-     * جستجوی فایل‌ها با نام مشخص شده در اسکوپ فعلی
-     * @param searchTerm عبارت جستجو
-     */
     async searchFiles(searchTerm) {
         this.validateScopeOptions();
         return this.parent.searchFiles(searchTerm, this.scope, this.options);
     }
-    /**
-     * جستجوی تمام نودها (فولدرها و فایل‌ها) با نام مشخص شده در اسکوپ فعلی
-     * @param searchTerm عبارت جستجو
-     */
     async searchNodes(searchTerm) {
         this.validateScopeOptions();
         return this.parent.searchNodes(searchTerm, this.scope, this.options);
     }
+    /**
+     * Creates a copy of a node (file or folder)
+     * @param node The node to copy
+     * @returns The newly created copied node
+     */
+    async copy(node) {
+        this.validateScopeOptions();
+        return this.parent.copy(node);
+    }
 }
 
 var AXPDocumentExplorerSettings;
@@ -3620,6 +3836,7 @@ class AXMDocumentExplorerComponent {
     #effect;
     handleNavigateToFolder(folderId) {
         this.vm.navigateToFolder(folderId);
+        console.log(this.vm.currentFolder());
     }
     // Context Menu Handlers
     async handleContextMenuOnOpening(e) {
@@ -3688,6 +3905,20 @@ class AXMDocumentExplorerComponent {
             ],
             break: true,
         };
+        const openWith = {
+            name: 'open-with',
+            text: 'Open with',
+            icon: 'fa-light fa-circle-info',
+            items: [
+                {
+                    name: 'open-gallery',
+                    text: 'Gallery',
+                    icon: 'fa-light fa-images',
+                    data: node,
+                },
+            ],
+            break: true,
+        };
         e.items = [
             ...open,
             {
@@ -3741,6 +3972,9 @@ class AXMDocumentExplorerComponent {
                 data: node,
             },
         ];
+        if (node.type == 'file') {
+            e.items.splice(e.items.length - 1, 0, openWith);
+        }
     }
     handleContextMenuRootOnOpening(e) {
         //TODO: check async translate method in acorex
@@ -3777,6 +4011,15 @@ class AXMDocumentExplorerComponent {
             case 'open-folder':
                 this.handleNavigateToFolder(node.id);
                 break;
+            case 'open-file':
+                this.openFile(node);
+                break;
+            case 'open-gallery':
+                this.openGallery(node);
+                break;
+            case 'download':
+                this.handleDownloadFile(node);
+                break;
             case 'new-folder':
                 await this.createFolder(node);
                 // Handle new folder creation
@@ -3787,6 +4030,12 @@ class AXMDocumentExplorerComponent {
             case 'paste':
                 // Handle paste operation
                 break;
+            case 'move-to':
+                this.moveNode(node);
+                break;
+            case 'copy-to':
+                this.copyNodeToNewPath(node);
+                break;
             case 'rename':
                 this.renameNode(node);
                 break;
@@ -3796,12 +4045,24 @@ class AXMDocumentExplorerComponent {
             case 'refresh':
                 this.vm.refresh();
                 break;
+            case 'copy':
+                this.makeCopy(node);
+                break;
         }
     }
+    async openGallery(node) {
+        await this.driveService.showFileViewerPopup(node);
+    }
+    async openFile(node) {
+        await this.driveService.openFile(node);
+    }
+    handleDownloadFile(node) {
+        this.driveService.downloadFile(node);
+    }
     async createFolder(node) {
-        const folderId = node?.id ?? this.vm.currentFolder()?.id;
-        if (folderId) {
-            const result = await this.driveService.showCreateFolderDialog(this.vm.currentFolder()?.id);
+        const parentId = node?.id ?? this.vm.currentFolder()?.id;
+        if (parentId) {
+            const result = await this.driveService.showCreateFolderDialog(parentId);
             if (result) {
                 await this.vm.refresh();
             }
@@ -3830,8 +4091,61 @@ class AXMDocumentExplorerComponent {
             // }
         }
     }
+    async chooseFile() {
+        await this.driveService.showChooseFileDialog();
+        await this.vm.refresh();
+    }
+    async makeCopy(node) {
+        if (node) {
+            try {
+                const copiedNode = await this.driveService.copy(node);
+                await this.vm.refresh();
+            }
+            catch (error) {
+                console.error('Error copying node:', error);
+            }
+        }
+    }
+    async moveNode(node) {
+        if (node) {
+            const result = await this.driveService.showTreeFolderPopup();
+            if (result) {
+                if (node.type === 'folder') {
+                    await this.driveService.updateFolder(node.id, { parentId: result });
+                }
+                else {
+                    await this.driveService.updateFile(node.id, { parentId: result });
+                }
+                await this.vm.refresh();
+            }
+        }
+    }
+    async copyNodeToNewPath(node) {
+        if (node) {
+            const result = await this.driveService.showTreeFolderPopup();
+            if (result) {
+                if (node.type === 'folder') {
+                    await this.driveService.createFolder({
+                        name: node.name,
+                        parentId: result,
+                        color: '#ffffff',
+                    });
+                }
+                else {
+                    await this.driveService.createFile({
+                        title: node.name,
+                        name: node.name,
+                        parentId: result,
+                        //TODO upload file to file storage
+                        fileId: '',
+                    });
+                }
+                await this.vm.refresh();
+            }
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentExplorerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMDocumentExplorerComponent, isStandalone: true, selector: "axm-document-explorer", viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["itemsContextMenu"], descendants: true, isSignal: true }, { propertyName: "rootContextMenu", first: true, predicate: ["rootContextMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Content -->\n<div class=\"content\">\n  <!-- Empty State -->\n  @if (vm.folders().length === 0 && vm.files().length === 0) {\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-16 ax-h-full\">\n    <ax-icon icon=\"fa-light fa-folder-open\" class=\"ax-text-6xl ax-mb-4\"></ax-icon>\n    <h3 class=\"ax-text-xl ax-font-medium ax-mb-2\">No Items Found</h3>\n    <p class=\"\">This folder is empty. Add some files or folders to get started.</p>\n  </div>\n  } @else {\n  <!-- Grid View -->\n  @if (vm.isGridView()) {\n  <!-- Folders Section -->\n  @if (vm.folders().length > 0) {\n  <div class=\"section\">\n    <h3 class=\"section-title\">Folders</h3>\n    <div class=\"items-grid\">\n      @for (folder of vm.folders(); track folder.id) {\n      <ng-container [ngTemplateOutlet]=\"gridFolderTemplate\" [ngTemplateOutletContext]=\"{ $implicit: folder }\">\n      </ng-container>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Files Section -->\n  @if (vm.files().length > 0) {\n  <div class=\"section\">\n    <h3 class=\"section-title\">Files</h3>\n    <div class=\"items-grid\">\n      @for (file of vm.files(); track file.id) {\n      <ng-container [ngTemplateOutlet]=\"gridFileTemplate\" [ngTemplateOutletContext]=\"{ $implicit: file }\">\n      </ng-container>\n      }\n    </div>\n  </div>\n  }\n  <!-- Grid View End -->\n  }\n\n  <!-- List View -->\n  @if (vm.isListView()) {\n  <div class=\"list-view\">\n    <table class=\"items-table\">\n      <thead>\n        <tr>\n          <th class=\"name-column\">Name</th>\n          <th class=\"type-column\">Type</th>\n          <th class=\"size-column\">Size</th>\n          <th class=\"date-column\">Last Modified</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (folder of vm.folders(); track folder.id) {\n        <ng-container [ngTemplateOutlet]=\"listFolderTemplate\" [ngTemplateOutletContext]=\"{ $implicit: folder }\">\n        </ng-container>\n        } @for (file of vm.files(); track file.id) {\n        <ng-container [ngTemplateOutlet]=\"listFileTemplate\" [ngTemplateOutletContext]=\"{ $implicit: file }\">\n        </ng-container>\n        }\n      </tbody>\n    </table>\n  </div>\n  } }\n</div>\n\n<!-- Grid View Templates -->\n<ng-template #gridFolderTemplate let-folder>\n  <div class=\"ax-group ax-cursor-pointer axp-explorer-item\" [axp-data]=\"folder\"\n    (dblclick)=\"handleNavigateToFolder(folder.id)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-p-4 ax-rounded-lg ax-border ax-lighter-surface\">\n      <div class=\"ax-text-yellow-400  fa-3x ax-mb-2\" style=\"--fa-animation-duration: 2s\">\n        @if (vm.isLoadingFolder(folder.id)) {\n        <ng-container [ngTemplateOutlet]=\"folderLoading\"> </ng-container>\n        } @else {\n        <ax-icon icon=\"fa-solid fa-folder-closed \"></ax-icon>\n        }\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-font-semibold ax-w-full\">\n        <span class=\"ax-text-sm ax-truncate  ax-text-start\">{{ folder.name }}</span>\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-w-full ax-font-semibold ax-opacity-65\">\n        <span class=\"ax-text-xs ax-text-neutral\">15 items</span>\n        <span class=\"ax-text-xs ax-text-neutral\">{{ folder.lastModified | format : 'datetime' : { format: 'datetime' } |\n          async }}</span>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #gridFileTemplate let-file>\n  @let fileInfo = vm.getFileInfo(file.name);\n  <div class=\"ax-group ax-cursor-pointer axp-explorer-item\" [axp-data]=\"file\"\n    (dblclick)=\"handleNavigateToFolder(file.id)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-p-4 ax-rounded-lg ax-border ax-lighter-surface\">\n      <div class=\"ax-text-yellow-400  fa-3x ax-mb-2\" style=\"--fa-animation-duration: 2s\">\n        <i class=\"fa-fw  {{ fileInfo.icon }} fa-solid\"></i>\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-font-semibold ax-w-full\">\n        <span class=\"ax-text-sm ax-truncate  ax-text-start\">{{ file.name }}</span>\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-w-full ax-font-semibold ax-opacity-65\">\n        <span class=\"ax-text-xs ax-text-neutral\">{{ file.size | format : 'filesize' | async }}</span>\n        <span class=\"ax-text-xs ax-text-neutral\">{{ file.lastModified | format : 'datetime' : { format: 'datetime' } |\n          async }}</span>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- List View Templates -->\n<ng-template #listFolderTemplate let-folder>\n  <tr class=\"folder-row\" (dblclick)=\"handleNavigateToFolder(folder.id)\">\n    <td class=\"name-column axp-explorer-item\" [axp-data]=\"folder\">\n      <div class=\"item-name\">\n        @if (vm.isLoadingFolder(folder.id)) {\n        <ng-container [ngTemplateOutlet]=\"folderLoading\"> </ng-container>\n        } @else {\n        <i class=\"fas fa-folder-closed\"></i>\n        }\n        <span>{{ folder.name }}</span>\n      </div>\n    </td>\n    <td class=\"type-column axp-explorer-item\" [axp-data]=\"folder\">Folder</td>\n    <td class=\"size-column axp-explorer-item\" [axp-data]=\"folder\">{{ folder.size | format : 'filesize' | async }}</td>\n    <td class=\"date-column axp-explorer-item\" [axp-data]=\"folder\">\n      {{ folder.lastModified | format : 'datetime' : { format: 'datetime' } | async }}\n    </td>\n  </tr>\n</ng-template>\n\n<ng-template #listFileTemplate let-file>\n  <tr class=\"file-row\">\n    @let fileInfo = vm.getFileInfo(file.name);\n    <td class=\"name-column axp-explorer-item\" [axp-data]=\"file\">\n      <div class=\"item-name hover:ax-underline\">\n        <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n        <span>{{ file.name }}</span>\n      </div>\n    </td>\n    <td class=\"type-column axp-explorer-item\" [axp-data]=\"file\">{{ fileInfo.type }}</td>\n    <td class=\"size-column axp-explorer-item\" [axp-data]=\"file\">{{ file.size | format : 'filesize' | async }}</td>\n    <td class=\"date-column axp-explorer-item\" [axp-data]=\"file\">\n      {{ file.lastModified | format : 'datetime' : { format: 'datetime' } | async }}\n    </td>\n  </tr>\n</ng-template>\n\n<ng-template #folderLoading>\n  <i class=\"fa-light fa-spinner fa-spin-pulse ax-text-2xl\"></i>\n</ng-template>\n\n<!-- Context Menu-->\n<ax-context-menu #itemsContextMenu [target]=\"'.axp-explorer-item'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\" (onOpening)=\"handleContextMenuOnOpening($event)\">\n</ax-context-menu>\n\n<ax-context-menu #rootContextMenu [target]=\"'axm-document-explorer'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\" (onOpening)=\"handleContextMenuRootOnOpening($event)\">\n</ax-context-menu>", styles: [":host{display:flex;height:100%;flex:1 1 0%;flex-direction:column;gap:1rem}:host .content{flex:1 1 0%;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;overflow-y:auto}:host .content .loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}:host .content .loading-state i{font-size:1.5rem;line-height:2rem}:host .content .section{margin-bottom:2rem}:host .content .section:last-child{margin-bottom:0}:host .content .section .section-title{margin-bottom:1rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}:host .content .section .items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}:host .content .list-view .items-table{width:100%;border-collapse:collapse}:host .content .list-view .items-table th{border-bottom-width:1px;padding:.75rem;text-align:start;font-weight:500;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host .content .list-view .items-table th.name-column{width:50%}:host .content .list-view .items-table th.type-column{width:20%}:host .content .list-view .items-table th.size-column{width:15%}:host .content .list-view .items-table th.date-column{width:15%}:host .content .list-view .items-table td{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1));padding:.75rem}:host .content .list-view .items-table td.name-column .item-name{display:flex;align-items:center;gap:.5rem}:host .content .list-view .items-table td.name-column .item-name i{font-size:1.25rem;line-height:1.75rem}:host .content .list-view .items-table tr{cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content .list-view .items-table tr:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}:host .content .list-view .items-table tr.folder-row td .item-name i{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i3.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i4.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "directive", type: AXPElementDataDirective, selector: "[axp-data]", inputs: ["axp-data", "axp-data-path"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMDocumentExplorerComponent, isStandalone: true, selector: "axm-document-explorer", viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["itemsContextMenu"], descendants: true, isSignal: true }, { propertyName: "rootContextMenu", first: true, predicate: ["rootContextMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Content -->\n<div class=\"content\">\n  <!-- Empty State -->\n  @if (vm.folders().length === 0 && vm.files().length === 0) {\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-16 ax-h-full\">\n    <ax-icon icon=\"fa-light fa-folder-open\" class=\"ax-text-6xl ax-mb-4\"></ax-icon>\n    <h3 class=\"ax-text-xl ax-font-medium ax-mb-2\">No Items Found</h3>\n    <p class=\"\">This folder is empty. Add some files or folders to get started.</p>\n  </div>\n  } @else {\n  <!-- Grid View -->\n  @if (vm.isGridView()) {\n  <!-- Folders Section -->\n  @if (vm.folders().length > 0) {\n  <div class=\"section\">\n    <h3 class=\"section-title\">Folders</h3>\n    <div class=\"items-grid\">\n      @for (folder of vm.folders(); track folder.id) {\n      <ng-container [ngTemplateOutlet]=\"gridFolderTemplate\" [ngTemplateOutletContext]=\"{ $implicit: folder }\">\n      </ng-container>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Files Section -->\n  @if (vm.files().length > 0) {\n  <div class=\"section\">\n    <h3 class=\"section-title\">Files</h3>\n    <div class=\"items-grid\">\n      @for (file of vm.files(); track file.id) {\n      <ng-container [ngTemplateOutlet]=\"gridFileTemplate\" [ngTemplateOutletContext]=\"{ $implicit: file }\">\n      </ng-container>\n      }\n    </div>\n  </div>\n  }\n  <!-- Grid View End -->\n  }\n\n  <!-- List View -->\n  @if (vm.isListView()) {\n  <div class=\"list-view\">\n    <table class=\"items-table\">\n      <thead>\n        <tr>\n          <th class=\"name-column\">Name</th>\n          <th class=\"type-column\">Type</th>\n          <th class=\"size-column\">Size</th>\n          <th class=\"date-column\">Last Modified</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (folder of vm.folders(); track folder.id) {\n        <ng-container [ngTemplateOutlet]=\"listFolderTemplate\" [ngTemplateOutletContext]=\"{ $implicit: folder }\">\n        </ng-container>\n        } @for (file of vm.files(); track file.id) {\n        <ng-container [ngTemplateOutlet]=\"listFileTemplate\" [ngTemplateOutletContext]=\"{ $implicit: file }\">\n        </ng-container>\n        }\n      </tbody>\n    </table>\n  </div>\n  } }\n</div>\n\n<!-- Grid View Templates -->\n<ng-template #gridFolderTemplate let-folder>\n  <div\n    class=\"ax-group ax-cursor-pointer axp-explorer-item\"\n    [axp-data]=\"folder\"\n    (dblclick)=\"handleNavigateToFolder(folder.id)\"\n  >\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-p-4 ax-rounded-lg ax-border ax-lighter-surface\">\n      <div class=\"ax-text-yellow-400 fa-3x ax-mb-2\" style=\"--fa-animation-duration: 2s\">\n        @if (vm.isLoadingFolder(folder.id)) {\n        <ng-container [ngTemplateOutlet]=\"folderLoading\"> </ng-container>\n        } @else {\n        <ax-icon icon=\"fa-solid fa-folder-closed \"></ax-icon>\n        }\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-font-semibold ax-w-full\">\n        <span class=\"ax-text-sm ax-truncate ax-text-start\">{{ folder.name }}</span>\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-w-full ax-font-semibold ax-opacity-65\">\n        <span class=\"ax-text-xs ax-text-neutral\">{{ folder.childrenCount }} items</span>\n        <span class=\"ax-text-xs ax-text-neutral\">{{\n          folder.lastModified | format : 'datetime' : { format: 'datetime' } | async\n        }}</span>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #gridFileTemplate let-file>\n  @let fileInfo = vm.getFileInfo(file.name);\n  <div class=\"ax-group ax-cursor-pointer axp-explorer-item\" [axp-data]=\"file\" (dblclick)=\"openFile(file)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-p-4 ax-rounded-lg ax-border ax-lighter-surface\">\n      <div class=\"ax-text-yellow-400 fa-3x ax-mb-2\" style=\"--fa-animation-duration: 2s\">\n        <i class=\"fa-fw  {{ fileInfo.icon }} fa-solid\"></i>\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-font-semibold ax-w-full\">\n        <span class=\"ax-text-sm ax-truncate ax-text-start\">{{ file.name }}</span>\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-w-full ax-font-semibold ax-opacity-65\">\n        <span class=\"ax-text-xs ax-text-neutral\">{{ file.size | format : 'filesize' | async }}</span>\n        <span class=\"ax-text-xs ax-text-neutral\">{{\n          file.lastModified | format : 'datetime' : { format: 'datetime' } | async\n        }}</span>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- List View Templates -->\n<ng-template #listFolderTemplate let-folder>\n  <tr class=\"folder-row\" (dblclick)=\"handleNavigateToFolder(folder.id)\">\n    <td class=\"name-column axp-explorer-item\" [axp-data]=\"folder\">\n      <div class=\"item-name\">\n        @if (vm.isLoadingFolder(folder.id)) {\n        <ng-container [ngTemplateOutlet]=\"folderLoading\"> </ng-container>\n        } @else {\n        <i class=\"fas fa-folder-closed\"></i>\n        }\n        <span>{{ folder.name }}</span>\n      </div>\n    </td>\n    <td class=\"type-column axp-explorer-item\" [axp-data]=\"folder\">Folder</td>\n    <td class=\"size-column axp-explorer-item\" [axp-data]=\"folder\">{{ folder.size | format : 'filesize' | async }}</td>\n    <td class=\"date-column axp-explorer-item\" [axp-data]=\"folder\">\n      {{ folder.lastModified | format : 'datetime' : { format: 'datetime' } | async }}\n    </td>\n  </tr>\n</ng-template>\n\n<ng-template #listFileTemplate let-file>\n  <tr class=\"file-row\">\n    @let fileInfo = vm.getFileInfo(file.name);\n    <td class=\"name-column axp-explorer-item\" [axp-data]=\"file\">\n      <div class=\"item-name hover:ax-underline\">\n        <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n        <span>{{ file.name }}</span>\n      </div>\n    </td>\n    <td class=\"type-column axp-explorer-item\" [axp-data]=\"file\">{{ fileInfo.type }}</td>\n    <td class=\"size-column axp-explorer-item\" [axp-data]=\"file\">{{ file.size | format : 'filesize' | async }}</td>\n    <td class=\"date-column axp-explorer-item\" [axp-data]=\"file\">\n      {{ file.lastModified | format : 'datetime' : { format: 'datetime' } | async }}\n    </td>\n  </tr>\n</ng-template>\n\n<ng-template #folderLoading>\n  <i class=\"fa-light fa-spinner fa-spin-pulse ax-text-2xl\"></i>\n</ng-template>\n\n<!-- Context Menu-->\n<ax-context-menu\n  #itemsContextMenu\n  [target]=\"'.axp-explorer-item'\"\n  [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\"\n  (onOpening)=\"handleContextMenuOnOpening($event)\"\n>\n</ax-context-menu>\n\n<ax-context-menu\n  #rootContextMenu\n  [target]=\"'axm-document-explorer'\"\n  [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\"\n  (onOpening)=\"handleContextMenuRootOnOpening($event)\"\n>\n</ax-context-menu>\n", styles: [":host{display:flex;height:100%;flex:1 1 0%;flex-direction:column;gap:1rem}:host .content{flex:1 1 0%;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;overflow-y:auto}:host .content .loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}:host .content .loading-state i{font-size:1.5rem;line-height:2rem}:host .content .section{margin-bottom:2rem}:host .content .section:last-child{margin-bottom:0}:host .content .section .section-title{margin-bottom:1rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}:host .content .section .items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}:host .content .list-view .items-table{width:100%;border-collapse:collapse}:host .content .list-view .items-table th{border-bottom-width:1px;padding:.75rem;text-align:start;font-weight:500;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host .content .list-view .items-table th.name-column{width:50%}:host .content .list-view .items-table th.type-column{width:20%}:host .content .list-view .items-table th.size-column{width:15%}:host .content .list-view .items-table th.date-column{width:15%}:host .content .list-view .items-table td{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1));padding:.75rem}:host .content .list-view .items-table td.name-column .item-name{display:flex;align-items:center;gap:.5rem}:host .content .list-view .items-table td.name-column .item-name i{font-size:1.25rem;line-height:1.75rem}:host .content .list-view .items-table tr{cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content .list-view .items-table tr:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}:host .content .list-view .items-table tr.folder-row td .item-name i{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}.animation-duration-2s{--fa-animation-duration: 2s}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i3.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i4.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "directive", type: AXPElementDataDirective, selector: "[axp-data]", inputs: ["axp-data", "axp-data-path"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentExplorerComponent, decorators: [{
             type: Component,
@@ -3844,22 +4158,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXDateTimeModule,
                         AXMenuModule,
                         AXPElementDataDirective,
-                    ], template: "<!-- Content -->\n<div class=\"content\">\n  <!-- Empty State -->\n  @if (vm.folders().length === 0 && vm.files().length === 0) {\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-16 ax-h-full\">\n    <ax-icon icon=\"fa-light fa-folder-open\" class=\"ax-text-6xl ax-mb-4\"></ax-icon>\n    <h3 class=\"ax-text-xl ax-font-medium ax-mb-2\">No Items Found</h3>\n    <p class=\"\">This folder is empty. Add some files or folders to get started.</p>\n  </div>\n  } @else {\n  <!-- Grid View -->\n  @if (vm.isGridView()) {\n  <!-- Folders Section -->\n  @if (vm.folders().length > 0) {\n  <div class=\"section\">\n    <h3 class=\"section-title\">Folders</h3>\n    <div class=\"items-grid\">\n      @for (folder of vm.folders(); track folder.id) {\n      <ng-container [ngTemplateOutlet]=\"gridFolderTemplate\" [ngTemplateOutletContext]=\"{ $implicit: folder }\">\n      </ng-container>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Files Section -->\n  @if (vm.files().length > 0) {\n  <div class=\"section\">\n    <h3 class=\"section-title\">Files</h3>\n    <div class=\"items-grid\">\n      @for (file of vm.files(); track file.id) {\n      <ng-container [ngTemplateOutlet]=\"gridFileTemplate\" [ngTemplateOutletContext]=\"{ $implicit: file }\">\n      </ng-container>\n      }\n    </div>\n  </div>\n  }\n  <!-- Grid View End -->\n  }\n\n  <!-- List View -->\n  @if (vm.isListView()) {\n  <div class=\"list-view\">\n    <table class=\"items-table\">\n      <thead>\n        <tr>\n          <th class=\"name-column\">Name</th>\n          <th class=\"type-column\">Type</th>\n          <th class=\"size-column\">Size</th>\n          <th class=\"date-column\">Last Modified</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (folder of vm.folders(); track folder.id) {\n        <ng-container [ngTemplateOutlet]=\"listFolderTemplate\" [ngTemplateOutletContext]=\"{ $implicit: folder }\">\n        </ng-container>\n        } @for (file of vm.files(); track file.id) {\n        <ng-container [ngTemplateOutlet]=\"listFileTemplate\" [ngTemplateOutletContext]=\"{ $implicit: file }\">\n        </ng-container>\n        }\n      </tbody>\n    </table>\n  </div>\n  } }\n</div>\n\n<!-- Grid View Templates -->\n<ng-template #gridFolderTemplate let-folder>\n  <div class=\"ax-group ax-cursor-pointer axp-explorer-item\" [axp-data]=\"folder\"\n    (dblclick)=\"handleNavigateToFolder(folder.id)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-p-4 ax-rounded-lg ax-border ax-lighter-surface\">\n      <div class=\"ax-text-yellow-400  fa-3x ax-mb-2\" style=\"--fa-animation-duration: 2s\">\n        @if (vm.isLoadingFolder(folder.id)) {\n        <ng-container [ngTemplateOutlet]=\"folderLoading\"> </ng-container>\n        } @else {\n        <ax-icon icon=\"fa-solid fa-folder-closed \"></ax-icon>\n        }\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-font-semibold ax-w-full\">\n        <span class=\"ax-text-sm ax-truncate  ax-text-start\">{{ folder.name }}</span>\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-w-full ax-font-semibold ax-opacity-65\">\n        <span class=\"ax-text-xs ax-text-neutral\">15 items</span>\n        <span class=\"ax-text-xs ax-text-neutral\">{{ folder.lastModified | format : 'datetime' : { format: 'datetime' } |\n          async }}</span>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #gridFileTemplate let-file>\n  @let fileInfo = vm.getFileInfo(file.name);\n  <div class=\"ax-group ax-cursor-pointer axp-explorer-item\" [axp-data]=\"file\"\n    (dblclick)=\"handleNavigateToFolder(file.id)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-p-4 ax-rounded-lg ax-border ax-lighter-surface\">\n      <div class=\"ax-text-yellow-400  fa-3x ax-mb-2\" style=\"--fa-animation-duration: 2s\">\n        <i class=\"fa-fw  {{ fileInfo.icon }} fa-solid\"></i>\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-font-semibold ax-w-full\">\n        <span class=\"ax-text-sm ax-truncate  ax-text-start\">{{ file.name }}</span>\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-w-full ax-font-semibold ax-opacity-65\">\n        <span class=\"ax-text-xs ax-text-neutral\">{{ file.size | format : 'filesize' | async }}</span>\n        <span class=\"ax-text-xs ax-text-neutral\">{{ file.lastModified | format : 'datetime' : { format: 'datetime' } |\n          async }}</span>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- List View Templates -->\n<ng-template #listFolderTemplate let-folder>\n  <tr class=\"folder-row\" (dblclick)=\"handleNavigateToFolder(folder.id)\">\n    <td class=\"name-column axp-explorer-item\" [axp-data]=\"folder\">\n      <div class=\"item-name\">\n        @if (vm.isLoadingFolder(folder.id)) {\n        <ng-container [ngTemplateOutlet]=\"folderLoading\"> </ng-container>\n        } @else {\n        <i class=\"fas fa-folder-closed\"></i>\n        }\n        <span>{{ folder.name }}</span>\n      </div>\n    </td>\n    <td class=\"type-column axp-explorer-item\" [axp-data]=\"folder\">Folder</td>\n    <td class=\"size-column axp-explorer-item\" [axp-data]=\"folder\">{{ folder.size | format : 'filesize' | async }}</td>\n    <td class=\"date-column axp-explorer-item\" [axp-data]=\"folder\">\n      {{ folder.lastModified | format : 'datetime' : { format: 'datetime' } | async }}\n    </td>\n  </tr>\n</ng-template>\n\n<ng-template #listFileTemplate let-file>\n  <tr class=\"file-row\">\n    @let fileInfo = vm.getFileInfo(file.name);\n    <td class=\"name-column axp-explorer-item\" [axp-data]=\"file\">\n      <div class=\"item-name hover:ax-underline\">\n        <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n        <span>{{ file.name }}</span>\n      </div>\n    </td>\n    <td class=\"type-column axp-explorer-item\" [axp-data]=\"file\">{{ fileInfo.type }}</td>\n    <td class=\"size-column axp-explorer-item\" [axp-data]=\"file\">{{ file.size | format : 'filesize' | async }}</td>\n    <td class=\"date-column axp-explorer-item\" [axp-data]=\"file\">\n      {{ file.lastModified | format : 'datetime' : { format: 'datetime' } | async }}\n    </td>\n  </tr>\n</ng-template>\n\n<ng-template #folderLoading>\n  <i class=\"fa-light fa-spinner fa-spin-pulse ax-text-2xl\"></i>\n</ng-template>\n\n<!-- Context Menu-->\n<ax-context-menu #itemsContextMenu [target]=\"'.axp-explorer-item'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\" (onOpening)=\"handleContextMenuOnOpening($event)\">\n</ax-context-menu>\n\n<ax-context-menu #rootContextMenu [target]=\"'axm-document-explorer'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\" (onOpening)=\"handleContextMenuRootOnOpening($event)\">\n</ax-context-menu>", styles: [":host{display:flex;height:100%;flex:1 1 0%;flex-direction:column;gap:1rem}:host .content{flex:1 1 0%;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;overflow-y:auto}:host .content .loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}:host .content .loading-state i{font-size:1.5rem;line-height:2rem}:host .content .section{margin-bottom:2rem}:host .content .section:last-child{margin-bottom:0}:host .content .section .section-title{margin-bottom:1rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}:host .content .section .items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}:host .content .list-view .items-table{width:100%;border-collapse:collapse}:host .content .list-view .items-table th{border-bottom-width:1px;padding:.75rem;text-align:start;font-weight:500;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host .content .list-view .items-table th.name-column{width:50%}:host .content .list-view .items-table th.type-column{width:20%}:host .content .list-view .items-table th.size-column{width:15%}:host .content .list-view .items-table th.date-column{width:15%}:host .content .list-view .items-table td{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1));padding:.75rem}:host .content .list-view .items-table td.name-column .item-name{display:flex;align-items:center;gap:.5rem}:host .content .list-view .items-table td.name-column .item-name i{font-size:1.25rem;line-height:1.75rem}:host .content .list-view .items-table tr{cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content .list-view .items-table tr:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}:host .content .list-view .items-table tr.folder-row td .item-name i{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}\n"] }]
+                    ], template: "<!-- Content -->\n<div class=\"content\">\n  <!-- Empty State -->\n  @if (vm.folders().length === 0 && vm.files().length === 0) {\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-16 ax-h-full\">\n    <ax-icon icon=\"fa-light fa-folder-open\" class=\"ax-text-6xl ax-mb-4\"></ax-icon>\n    <h3 class=\"ax-text-xl ax-font-medium ax-mb-2\">No Items Found</h3>\n    <p class=\"\">This folder is empty. Add some files or folders to get started.</p>\n  </div>\n  } @else {\n  <!-- Grid View -->\n  @if (vm.isGridView()) {\n  <!-- Folders Section -->\n  @if (vm.folders().length > 0) {\n  <div class=\"section\">\n    <h3 class=\"section-title\">Folders</h3>\n    <div class=\"items-grid\">\n      @for (folder of vm.folders(); track folder.id) {\n      <ng-container [ngTemplateOutlet]=\"gridFolderTemplate\" [ngTemplateOutletContext]=\"{ $implicit: folder }\">\n      </ng-container>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Files Section -->\n  @if (vm.files().length > 0) {\n  <div class=\"section\">\n    <h3 class=\"section-title\">Files</h3>\n    <div class=\"items-grid\">\n      @for (file of vm.files(); track file.id) {\n      <ng-container [ngTemplateOutlet]=\"gridFileTemplate\" [ngTemplateOutletContext]=\"{ $implicit: file }\">\n      </ng-container>\n      }\n    </div>\n  </div>\n  }\n  <!-- Grid View End -->\n  }\n\n  <!-- List View -->\n  @if (vm.isListView()) {\n  <div class=\"list-view\">\n    <table class=\"items-table\">\n      <thead>\n        <tr>\n          <th class=\"name-column\">Name</th>\n          <th class=\"type-column\">Type</th>\n          <th class=\"size-column\">Size</th>\n          <th class=\"date-column\">Last Modified</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (folder of vm.folders(); track folder.id) {\n        <ng-container [ngTemplateOutlet]=\"listFolderTemplate\" [ngTemplateOutletContext]=\"{ $implicit: folder }\">\n        </ng-container>\n        } @for (file of vm.files(); track file.id) {\n        <ng-container [ngTemplateOutlet]=\"listFileTemplate\" [ngTemplateOutletContext]=\"{ $implicit: file }\">\n        </ng-container>\n        }\n      </tbody>\n    </table>\n  </div>\n  } }\n</div>\n\n<!-- Grid View Templates -->\n<ng-template #gridFolderTemplate let-folder>\n  <div\n    class=\"ax-group ax-cursor-pointer axp-explorer-item\"\n    [axp-data]=\"folder\"\n    (dblclick)=\"handleNavigateToFolder(folder.id)\"\n  >\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-p-4 ax-rounded-lg ax-border ax-lighter-surface\">\n      <div class=\"ax-text-yellow-400 fa-3x ax-mb-2\" style=\"--fa-animation-duration: 2s\">\n        @if (vm.isLoadingFolder(folder.id)) {\n        <ng-container [ngTemplateOutlet]=\"folderLoading\"> </ng-container>\n        } @else {\n        <ax-icon icon=\"fa-solid fa-folder-closed \"></ax-icon>\n        }\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-font-semibold ax-w-full\">\n        <span class=\"ax-text-sm ax-truncate ax-text-start\">{{ folder.name }}</span>\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-w-full ax-font-semibold ax-opacity-65\">\n        <span class=\"ax-text-xs ax-text-neutral\">{{ folder.childrenCount }} items</span>\n        <span class=\"ax-text-xs ax-text-neutral\">{{\n          folder.lastModified | format : 'datetime' : { format: 'datetime' } | async\n        }}</span>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #gridFileTemplate let-file>\n  @let fileInfo = vm.getFileInfo(file.name);\n  <div class=\"ax-group ax-cursor-pointer axp-explorer-item\" [axp-data]=\"file\" (dblclick)=\"openFile(file)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-p-4 ax-rounded-lg ax-border ax-lighter-surface\">\n      <div class=\"ax-text-yellow-400 fa-3x ax-mb-2\" style=\"--fa-animation-duration: 2s\">\n        <i class=\"fa-fw  {{ fileInfo.icon }} fa-solid\"></i>\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-font-semibold ax-w-full\">\n        <span class=\"ax-text-sm ax-truncate ax-text-start\">{{ file.name }}</span>\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-w-full ax-font-semibold ax-opacity-65\">\n        <span class=\"ax-text-xs ax-text-neutral\">{{ file.size | format : 'filesize' | async }}</span>\n        <span class=\"ax-text-xs ax-text-neutral\">{{\n          file.lastModified | format : 'datetime' : { format: 'datetime' } | async\n        }}</span>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- List View Templates -->\n<ng-template #listFolderTemplate let-folder>\n  <tr class=\"folder-row\" (dblclick)=\"handleNavigateToFolder(folder.id)\">\n    <td class=\"name-column axp-explorer-item\" [axp-data]=\"folder\">\n      <div class=\"item-name\">\n        @if (vm.isLoadingFolder(folder.id)) {\n        <ng-container [ngTemplateOutlet]=\"folderLoading\"> </ng-container>\n        } @else {\n        <i class=\"fas fa-folder-closed\"></i>\n        }\n        <span>{{ folder.name }}</span>\n      </div>\n    </td>\n    <td class=\"type-column axp-explorer-item\" [axp-data]=\"folder\">Folder</td>\n    <td class=\"size-column axp-explorer-item\" [axp-data]=\"folder\">{{ folder.size | format : 'filesize' | async }}</td>\n    <td class=\"date-column axp-explorer-item\" [axp-data]=\"folder\">\n      {{ folder.lastModified | format : 'datetime' : { format: 'datetime' } | async }}\n    </td>\n  </tr>\n</ng-template>\n\n<ng-template #listFileTemplate let-file>\n  <tr class=\"file-row\">\n    @let fileInfo = vm.getFileInfo(file.name);\n    <td class=\"name-column axp-explorer-item\" [axp-data]=\"file\">\n      <div class=\"item-name hover:ax-underline\">\n        <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n        <span>{{ file.name }}</span>\n      </div>\n    </td>\n    <td class=\"type-column axp-explorer-item\" [axp-data]=\"file\">{{ fileInfo.type }}</td>\n    <td class=\"size-column axp-explorer-item\" [axp-data]=\"file\">{{ file.size | format : 'filesize' | async }}</td>\n    <td class=\"date-column axp-explorer-item\" [axp-data]=\"file\">\n      {{ file.lastModified | format : 'datetime' : { format: 'datetime' } | async }}\n    </td>\n  </tr>\n</ng-template>\n\n<ng-template #folderLoading>\n  <i class=\"fa-light fa-spinner fa-spin-pulse ax-text-2xl\"></i>\n</ng-template>\n\n<!-- Context Menu-->\n<ax-context-menu\n  #itemsContextMenu\n  [target]=\"'.axp-explorer-item'\"\n  [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\"\n  (onOpening)=\"handleContextMenuOnOpening($event)\"\n>\n</ax-context-menu>\n\n<ax-context-menu\n  #rootContextMenu\n  [target]=\"'axm-document-explorer'\"\n  [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\"\n  (onOpening)=\"handleContextMenuRootOnOpening($event)\"\n>\n</ax-context-menu>\n", styles: [":host{display:flex;height:100%;flex:1 1 0%;flex-direction:column;gap:1rem}:host .content{flex:1 1 0%;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;overflow-y:auto}:host .content .loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}:host .content .loading-state i{font-size:1.5rem;line-height:2rem}:host .content .section{margin-bottom:2rem}:host .content .section:last-child{margin-bottom:0}:host .content .section .section-title{margin-bottom:1rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}:host .content .section .items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}:host .content .list-view .items-table{width:100%;border-collapse:collapse}:host .content .list-view .items-table th{border-bottom-width:1px;padding:.75rem;text-align:start;font-weight:500;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host .content .list-view .items-table th.name-column{width:50%}:host .content .list-view .items-table th.type-column{width:20%}:host .content .list-view .items-table th.size-column{width:15%}:host .content .list-view .items-table th.date-column{width:15%}:host .content .list-view .items-table td{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1));padding:.75rem}:host .content .list-view .items-table td.name-column .item-name{display:flex;align-items:center;gap:.5rem}:host .content .list-view .items-table td.name-column .item-name i{font-size:1.25rem;line-height:1.75rem}:host .content .list-view .items-table tr{cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content .list-view .items-table tr:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}:host .content .list-view .items-table tr.folder-row td .item-name i{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}.animation-duration-2s{--fa-animation-duration: 2s}\n"] }]
         }] });
 
 class AXMDocumentAttachmentWidgetEditComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.driveService = inject(AXMDocumentManagerService);
+        this.vm = inject(AXPDocumentExplorerViewModel);
+        this.rootConfig = RootConfig;
+        this.documentExplorer = viewChild(AXMDocumentExplorerComponent);
+        this.#navigateEffect = effect(() => {
+            const navigatingFolderId = this.vm.navigatingFolderId();
+            if (navigatingFolderId) {
+                this.loadDrive(navigatingFolderId);
+            }
+        });
+    }
+    #navigateEffect;
+    ngOnInit() {
+        super.ngOnInit();
+        this.vm.initialize();
+        this.loadDrive();
+    }
+    async loadDrive(folderId) {
+        if (folderId) {
+            await this.vm.loadFolderContents(folderId);
+        }
+        else {
+            const root = await this.driveService.getRoot(AXMDriveScope.Platform);
+            if (root.result) {
+                await this.vm.loadFolderContents(root.result.id);
+            }
+        }
+    }
+    handleNavigateToFolder(folderId) {
+        this.vm.navigateToFolder(folderId);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentAttachmentWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXMDocumentAttachmentWidgetEditComponent, isStandalone: true, selector: "axm-document-attachment-widget", usesInheritance: true, ngImport: i0, template: `<axm-document-explorer></axm-document-explorer>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXMDocumentExplorerComponent, selector: "axm-document-explorer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXMDocumentAttachmentWidgetEditComponent, isStandalone: true, selector: "axm-document-attachment-edit-widget", providers: [AXPDocumentExplorerViewModel], viewQueries: [{ propertyName: "documentExplorer", first: true, predicate: AXMDocumentExplorerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-gap-3\" *translate=\"let t\">\n  <!-- Header Section -->\n  <div class=\"ax-flex ax-flex-row ax-justify-between\">\n    <ax-button\n      (onClick)=\"handleNavigateToFolder(vm.currentFolder()?.parentId!)\"\n      [ngClass]=\"{ 'ax-invisible': !vm.currentFolder()?.parentId }\"\n    >\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-arrow-left\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    <!-- Primary Actions -->\n    <ax-button [text]=\"t('actions.add-item', { scope: rootConfig.config.i18n }) | async\" [color]=\"'primary'\">\n      <ax-prefix>\n        <ax-icon icon=\"fa-light  fa-plus\"></ax-icon>\n      </ax-prefix>\n      <ax-dropdown-panel>\n        <!-- Upload Dropdown -->\n        <ax-button-item-list>\n          <ax-button-item\n            (onClick)=\"documentExplorer()?.chooseFile()\"\n            [text]=\"(t('drive-types.platform-drive', { scope: rootConfig.config.i18n }) | async)!\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-file-arrow-up\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n  <axm-document-explorer></axm-document-explorer>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: AXMDocumentExplorerComponent, selector: "axm-document-explorer" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i3$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i4$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXButtonGroupModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentAttachmentWidgetEditComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'axm-document-attachment-widget',
-                    template: `<axm-document-explorer></axm-document-explorer>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXMDocumentExplorerComponent],
-                    inputs: [],
-                }]
+            args: [{ selector: 'axm-document-attachment-edit-widget', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        AXMDocumentExplorerComponent,
+                        AXButtonComponent,
+                        AXDropdownButtonModule,
+                        AXDropdownModule,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXButtonModule,
+                        AXButtonGroupModule,
+                    ], inputs: [], providers: [AXPDocumentExplorerViewModel], template: "<div class=\"ax-flex ax-flex-col ax-gap-3\" *translate=\"let t\">\n  <!-- Header Section -->\n  <div class=\"ax-flex ax-flex-row ax-justify-between\">\n    <ax-button\n      (onClick)=\"handleNavigateToFolder(vm.currentFolder()?.parentId!)\"\n      [ngClass]=\"{ 'ax-invisible': !vm.currentFolder()?.parentId }\"\n    >\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-arrow-left\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    <!-- Primary Actions -->\n    <ax-button [text]=\"t('actions.add-item', { scope: rootConfig.config.i18n }) | async\" [color]=\"'primary'\">\n      <ax-prefix>\n        <ax-icon icon=\"fa-light  fa-plus\"></ax-icon>\n      </ax-prefix>\n      <ax-dropdown-panel>\n        <!-- Upload Dropdown -->\n        <ax-button-item-list>\n          <ax-button-item\n            (onClick)=\"documentExplorer()?.chooseFile()\"\n            [text]=\"(t('drive-types.platform-drive', { scope: rootConfig.config.i18n }) | async)!\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-file-arrow-up\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n  <axm-document-explorer></axm-document-explorer>\n</div>\n" }]
         }] });
 
 var documentAttachmentWidgetEdit_component = /*#__PURE__*/Object.freeze({
@@ -3961,17 +4312,19 @@ function routesFacory() {
     const routes = [
         {
             path: ':app/drive/:scope',
-            component: config.viewers.root(),
+            loadComponent: () => {
+                return config.viewers.root();
+            },
             canActivate: [AXPAuthGuard],
             data: { reuse: true },
             children: [
                 {
                     path: '',
-                    loadComponent: () => import('./acorex-modules-document-management-drive.component-Sz198sA6.mjs').then((c) => c.AXMDocumentDriveComponent),
+                    loadComponent: () => import('./acorex-modules-document-management-drive.component-B6az6-_w.mjs').then((c) => c.AXMDocumentDriveComponent),
                 },
                 {
                     path: ':id',
-                    loadComponent: () => import('./acorex-modules-document-management-drive.component-Sz198sA6.mjs').then((c) => c.AXMDocumentDriveComponent),
+                    loadComponent: () => import('./acorex-modules-document-management-drive.component-B6az6-_w.mjs').then((c) => c.AXMDocumentDriveComponent),
                 },
             ],
         },
@@ -3984,7 +4337,7 @@ class AXMDocumentManagementModule {
             AXMDocumentManagementDocumentTypeMetaValueEntityModule,
             AXMDocumentManagementDocumentTypeMetaDefinitionEntityModule,
             AXMDocumentManagementDocumentTypeEntityModule,
-            AXMDocumentManagementDocumentEntityModule, i6.AXPLayoutBuilderModule, AXMFileTypeModule] }); }
+            AXMDocumentManagementDocumentEntityModule, i6.AXPLayoutBuilderModule, AXMFileTypeModule, i3$2.AXMediaViewerModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentManagementModule, providers: [
             {
                 provide: AXMFolderService,
@@ -4028,7 +4381,8 @@ class AXMDocumentManagementModule {
             AXPLayoutBuilderModule.forChild({
                 widgets: [AXmFileTypeExtensionWidget, AXMDocumentAttachmentWidget],
             }),
-            AXMFileTypeModule] }); }
+            AXMFileTypeModule,
+            AXMediaViewerModule.forRoot()] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentManagementModule, decorators: [{
             type: NgModule,
@@ -4043,6 +4397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             widgets: [AXmFileTypeExtensionWidget, AXMDocumentAttachmentWidget],
                         }),
                         AXMFileTypeModule,
+                        AXMediaViewerModule.forRoot(),
                     ],
                     exports: [],
                     providers: [
@@ -4089,4 +4444,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  */
 
 export { AXMDocumentManagerService as A, AXMFolderServiceImpl as B, AXMEntityProvider as C, AXMMenuProvider as D, AXMSearchCommandProvider as E, AXMSettingProvider as F, RootConfig as R, AXPDocumentExplorerViewModel as a, AXMDocumentExplorerComponent as b, AXMDriveScope as c, AXMDocumentManagementModule as d, documentFactory as e, AXMDocumentManagementDocumentEntityModule as f, AXMDocumentService as g, AXMDocumentServiceImpl as h, documentTypeFactory as i, AXMDocumentManagementDocumentTypeEntityModule as j, AXMDocumentManagementDocumentTypeEntityService as k, AXMDocumentManagementDocumentTypeEntityServiceImpl as l, documentTypeMetaDefinitionfactory as m, AXMDocumentManagementDocumentTypeMetaDefinitionEntityModule as n, AXMDocumentManagementDocumentTypeMetaDefinitionEntityService as o, AXMDocumentManagementDocumentTypeMetaDefinitionEntityServiceImpl as p, documentTypeMetaValueFactory as q, AXMDocumentManagementDocumentTypeMetaValueEntityModule as r, AXMDocumentManagementDocumentTypeMetaValueEntityService as s, AXMDocumentManagementDocumentTypeMetaValueEntityServiceImpl as t, documentTypeStatusDefinitionFactory as u, AXMDocumentManagementDocumentTypeStatusDefinitionEntityModule as v, AXMDocumentManagementDocumentTypeStatusDefinitionEntityService as w, AXMDocumentManagementDocumentTypeStatusDefinitionEntityServiceImpl as x, folderFactory as y, AXMFolderService as z };
-//# sourceMappingURL=acorex-modules-document-management-acorex-modules-document-management-C9ZCejjs.mjs.map
+//# sourceMappingURL=acorex-modules-document-management-acorex-modules-document-management-BmLGtKDq.mjs.map