@acorex/modules 19.2.16 → 19.2.17

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

@@ -1,12 +1,12 @@
 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, untracked, ViewEncapsulation } 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';
-import { Router, ActivatedRoute, RouterModule, ROUTES } from '@angular/router';
+import { RouterModule, ROUTES } from '@angular/router';
 import { AXDataSource } from '@acorex/components/common';
 import { AXMMetaDataDefinitionService } from '@acorex/modules/platform-management';
 import * as i1$1 from '@angular/common';
@@ -26,33 +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$1 from '@acorex/components/menu';
+import * as i4 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
 import { AXDateTimeModule } from '@acorex/core/date-time';
-import * as i8 from '@acorex/core/format';
+import * as i3 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
-import * as i4 from '@acorex/core/translation';
-import { AXTranslationModule, 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 { AXBadgeModule } from '@acorex/components/badge';
-import * as i6$1 from '@acorex/components/breadcrumbs';
-import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
-import * as i2$1 from '@acorex/components/button';
-import { AXButtonModule } from '@acorex/components/button';
-import { AXButtonGroupModule } from '@acorex/components/button-group';
-import * as i3 from '@acorex/components/dropdown';
-import { AXDropdownModule } from '@acorex/components/dropdown';
-import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
-import { AXPSimplePageLayout } from '@acorex/platform/themes/default';
-import * as i7$2 from '@acorex/components/search-box';
-import { AXSearchBoxModule } from '@acorex/components/search-box';
-import { AXFileModule } from '@acorex/core/file';
-import { AXPLayoutThemeService, AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderTemplateComponent, AXPThemeLayoutActionsComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutToolbarComponent, AXPThemeLayoutFooterComponent } from '@acorex/platform/themes/shared';
-import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
 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',
@@ -829,7 +823,7 @@ async function documentTypeFactory(injector) {
                 schema: {
                     dataType: 'object',
                     interface: {
-                        type: AXPWidgetsCatalog.fileTypeExtension,
+                        type: AXPWidgetsCatalog.documentAttachment,
                         options: {},
                     },
                 },
@@ -3011,154 +3005,6 @@ var documentAttachmentWidgetColumn_component = /*#__PURE__*/Object.freeze({
     AXMDocumentAttachmentWidgetColumnComponent: AXMDocumentAttachmentWidgetColumnComponent
 });
 
-var AXPDocumentExplorerSettings;
-(function (AXPDocumentExplorerSettings) {
-    AXPDocumentExplorerSettings["ViewMode"] = "document-explorer:layout:view-mode";
-    AXPDocumentExplorerSettings["SortField"] = "document-explorer:layout:sort-field";
-    AXPDocumentExplorerSettings["SortDirection"] = "document-explorer:layout:sort-direction";
-})(AXPDocumentExplorerSettings || (AXPDocumentExplorerSettings = {}));
-
-const AXPDocumentExplorerViewModel = signalStore({ providedIn: 'root' }, withState(() => ({
-    // View State
-    viewMode: 'grid',
-    isLoading: false,
-    // Navigation State
-    currentPath: [],
-    currentNode: null,
-    loadingFolderId: null,
-    navigatingFolderId: null,
-    // Sort State
-    sortField: 'name',
-    sortDirection: 'asc',
-    // Content State
-    folders: [],
-    files: [],
-    itemsCount: 0,
-    availableSpace: 0,
-    // Drive State
-    currentDrive: null,
-    // File Type State
-    fileTypes: [],
-})), withComputed((store) => ({
-    isRoot: computed(() => {
-        const node = store.currentNode();
-        return node?.id === 'root' || !node?.parentId;
-    }),
-    breadcrumb: computed(() => store.currentPath()),
-    currentFolder: computed(() => store.currentNode()),
-    currentFolderContents: computed(() => ({
-        folders: store.folders(),
-        files: store.files(),
-    })),
-    parentFolder: computed(() => {
-        const currentNode = store.currentNode();
-        return currentNode?.parentId ? store.folders().find(folder => folder.id === currentNode.parentId) : null;
-    }),
-    isGridView: computed(() => store.viewMode() === 'grid'),
-    isListView: computed(() => store.viewMode() === 'list'),
-})), withMethods((store, fileTypeService = inject(AXPFileTypeProviderService), driveService = inject(AXMDocumentManagerService), settingService = inject(AXPSettingService)) => ({
-    async initialize(path = 'root') {
-        // Load file types
-        const fileTypes = await fileTypeService.items();
-        patchState(store, { fileTypes });
-        // Load initial settings
-        const viewMode = await settingService.get(AXPDocumentExplorerSettings.ViewMode);
-        const sortField = await settingService.get(AXPDocumentExplorerSettings.SortField);
-        const sortDirection = await settingService.get(AXPDocumentExplorerSettings.SortDirection);
-        patchState(store, {
-            viewMode: viewMode || 'grid',
-            sortField: sortField || 'name',
-            sortDirection: sortDirection || 'asc'
-        });
-    },
-    _load: async (folderId) => {
-        patchState(store, { loadingFolderId: folderId, isLoading: true });
-        await new Promise(resolve => setTimeout(resolve, 100));
-        try {
-            const node = await driveService.getFolder(folderId);
-            patchState(store, {
-                currentNode: node.result,
-                currentPath: node.path,
-                folders: node.result.children?.filter((item) => item.type === 'folder') || [],
-                files: node.result.children?.filter((item) => item.type === 'file') || [],
-                itemsCount: node.result.children?.length || 0,
-                availableSpace: await driveService.getAvailableSpace(),
-                loadingFolderId: null,
-                isLoading: false,
-                navigatingFolderId: null
-            });
-        }
-        catch (error) {
-            patchState(store, {
-                loadingFolderId: null,
-                isLoading: false
-            });
-            throw error;
-        }
-    },
-    navigateToFolder(folderId) {
-        patchState(store, { navigatingFolderId: folderId });
-    },
-    async loadFolderContents(folderId) {
-        await this._load(folderId);
-    },
-    setViewMode(mode) {
-        patchState(store, { viewMode: mode });
-        settingService.scope(AXPSettingScope.User).set(AXPDocumentExplorerSettings.ViewMode, mode);
-    },
-    setSortField(field) {
-        patchState(store, { sortField: field });
-        settingService.scope(AXPSettingScope.User).set(AXPDocumentExplorerSettings.SortField, field);
-    },
-    setSortDirection(direction) {
-        patchState(store, { sortDirection: direction });
-        settingService.scope(AXPSettingScope.User).set(AXPDocumentExplorerSettings.SortDirection, direction);
-    },
-    setDrive(scope) {
-        patchState(store, { currentDrive: scope });
-    },
-    isLoadingFolder(folderId) {
-        return store.loadingFolderId() === folderId;
-    },
-    getFileInfo(fileName) {
-        const fileTypes = store.fileTypes();
-        const extension = fileName.split('.').pop()?.toLowerCase() || '';
-        const extensions = fileTypes.flatMap(type => type.extensions);
-        const fileType = extensions.find(e => e.name === extension);
-        return {
-            icon: fileType?.icon || 'fa-light fa-file',
-            type: fileType?.name || 'Unknown'
-        };
-    },
-    sortItems(items) {
-        const field = store.sortField();
-        const direction = store.sortDirection();
-        return [...items].sort((a, b) => {
-            let comparison = 0;
-            switch (field) {
-                case 'name':
-                    comparison = a.name.localeCompare(b.name);
-                    break;
-                case 'modified':
-                    const aDate = a.lastModified ? new Date(a.lastModified) : new Date(0);
-                    const bDate = b.lastModified ? new Date(b.lastModified) : new Date(0);
-                    comparison = aDate.getTime() - bDate.getTime();
-                    break;
-                case 'size':
-                    comparison = (a.size || 0) - (b.size || 0);
-                    break;
-            }
-            return direction === 'asc' ? comparison : -comparison;
-        });
-    },
-    async refresh() {
-        const currentFolder = store.currentNode();
-        if (currentFolder) {
-            await this._load(currentFolder.id);
-        }
-    }
-})));
-
 var AXMDriveScope;
 (function (AXMDriveScope) {
     AXMDriveScope["Platform"] = "P";
@@ -3176,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) {
@@ -3186,7 +3033,6 @@ class AXMDocumentManagerService {
         return this.scopedDriveCache.get(cacheKey);
     }
     getScopeCacheKey(scope, options) {
-        // در آینده می‌توان این را برای کش کردن بر اساس ترکیب scope و options گسترش داد
         return scope;
     }
     /**
@@ -3276,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,
@@ -3283,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'],
                 })) || []),
             ],
         };
@@ -3414,6 +3261,8 @@ class AXMDocumentManagerService {
             type: 'file',
             parentId: file.parentId,
             lastModified: new Date(),
+            size: file.meta?.['size'],
+            fileId: file.fileId,
         };
     }
     async createFile(data) {
@@ -3447,7 +3296,8 @@ class AXMDocumentManagerService {
         }
     }
     async showCreateFolderDialog(parentId) {
-        const comp = (await import('./acorex-modules-document-management-create-folder-dialog.component-fNeqoZfY.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: {
@@ -3456,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-C-eCtqLa.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: {
@@ -3501,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),
@@ -3536,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' }); }
 }
@@ -3589,166 +3645,176 @@ 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);
+    }
 }
 
-class AXMDocumentDriveComponent {
-    constructor() {
-        this.layout = inject(AXPLayoutThemeService);
-        this.rootConfig = RootConfig;
-        this.fileTypeService = inject(AXPFileTypeProviderService);
-        this.driveService = inject(AXMDocumentManagerService);
-        this.vm = inject(AXPDocumentExplorerViewModel);
-        this.router = inject(Router);
-        this.activatedRoute = inject(ActivatedRoute);
-        this.sessionService = inject(AXPSessionService);
-        this.filterItems = signal([]);
-        this.selectedFilter = signal('all');
-        this.sortItems = signal([
-            { key: 'name', textKey: 'actions.sort-by-name', icon: 'fa-light fa-font' },
-            { key: 'modified', textKey: 'actions.sort-by-date', icon: 'fa-light fa-calendar' },
-            { key: 'size', textKey: 'actions.sort-by-size', icon: 'fa-light fa-weight-hanging' },
-        ]);
-        this.documentExplorer = viewChild(AXMDocumentExplorerComponent);
-        this.selectedSort = computed(() => {
-            const items = this.sortItems();
-            return items.find((item) => item.key === this.vm.sortField()) || items[0];
-        });
-        this.#navigateEffect = effect(() => {
-            const navigatingFolderId = this.vm.navigatingFolderId();
-            if (navigatingFolderId) {
-                this.handleNavigateToFolder(navigatingFolderId);
-            }
+var AXPDocumentExplorerSettings;
+(function (AXPDocumentExplorerSettings) {
+    AXPDocumentExplorerSettings["ViewMode"] = "document-explorer:layout:view-mode";
+    AXPDocumentExplorerSettings["SortField"] = "document-explorer:layout:sort-field";
+    AXPDocumentExplorerSettings["SortDirection"] = "document-explorer:layout:sort-direction";
+})(AXPDocumentExplorerSettings || (AXPDocumentExplorerSettings = {}));
+
+const AXPDocumentExplorerViewModel = signalStore({ providedIn: 'root' }, withState(() => ({
+    // View State
+    viewMode: 'grid',
+    isLoading: false,
+    // Navigation State
+    currentPath: [],
+    currentNode: null,
+    loadingFolderId: null,
+    navigatingFolderId: null,
+    // Sort State
+    sortField: 'name',
+    sortDirection: 'asc',
+    // Content State
+    folders: [],
+    files: [],
+    itemsCount: 0,
+    availableSpace: 0,
+    // Drive State
+    currentDrive: null,
+    // File Type State
+    fileTypes: [],
+})), withComputed((store) => ({
+    isRoot: computed(() => {
+        const node = store.currentNode();
+        return node?.id === 'root' || !node?.parentId;
+    }),
+    breadcrumb: computed(() => store.currentPath()),
+    currentFolder: computed(() => store.currentNode()),
+    currentFolderContents: computed(() => ({
+        folders: store.folders(),
+        files: store.files(),
+    })),
+    parentFolder: computed(() => {
+        const currentNode = store.currentNode();
+        return currentNode?.parentId ? store.folders().find((folder) => folder.id === currentNode.parentId) : null;
+    }),
+    isGridView: computed(() => store.viewMode() === 'grid'),
+    isListView: computed(() => store.viewMode() === 'list'),
+})), withMethods((store, fileTypeService = inject(AXPFileTypeProviderService), driveService = inject(AXMDocumentManagerService), settingService = inject(AXPSettingService)) => ({
+    async initialize(path = 'root') {
+        // Load file types
+        const fileTypes = await fileTypeService.items();
+        patchState(store, { fileTypes });
+        // Load initial settings
+        const viewMode = await settingService.get(AXPDocumentExplorerSettings.ViewMode);
+        const sortField = await settingService.get(AXPDocumentExplorerSettings.SortField);
+        const sortDirection = await settingService.get(AXPDocumentExplorerSettings.SortDirection);
+        patchState(store, {
+            viewMode: viewMode || 'grid',
+            sortField: sortField || 'name',
+            sortDirection: sortDirection || 'asc',
         });
-        this.#loadingEffect = effect(() => {
-            const isLoading = this.vm.isLoading();
-            untracked(() => {
-                this.layout.setNavigationLoading(isLoading);
+    },
+    _load: async (folderId) => {
+        patchState(store, { loadingFolderId: folderId, isLoading: true });
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        try {
+            const node = await driveService.getFolder(folderId);
+            patchState(store, {
+                currentNode: node.result,
+                currentPath: node.path,
+                folders: node.result.children?.filter((item) => item.type === 'folder') || [],
+                files: node.result.children?.filter((item) => item.type === 'file') || [],
+                itemsCount: node.result.children?.length || 0,
+                availableSpace: await driveService.getAvailableSpace(),
+                loadingFolderId: null,
+                isLoading: false,
+                navigatingFolderId: null,
             });
-        });
-    }
-    #navigateEffect;
-    #loadingEffect;
-    async handleSearchChange(event) {
-        console.log(event);
-        const result = await this.driveService.searchNodes(event.value, AXMDriveScope.Platform);
-        console.log(result);
-    }
-    async ngOnInit() {
-        await this.loadFilterItems();
-        await this.vm.initialize();
-        // Subscribe to route changes
-        this.activatedRoute.paramMap.subscribe(async (params) => {
-            this.loadDrive();
-        });
-    }
-    async loadDrive() {
-        const folderId = this.activatedRoute.snapshot.paramMap.get('id');
-        if (folderId) {
-            await this.vm.loadFolderContents(folderId);
-        }
-        else {
-            const root = await this.driveService.getRoot(AXMDriveScope.Platform);
-            if (root.result) {
-                await this.router.navigate([`${this.sessionService.application?.name}/drive/my/${root.result.id}`], {
-                    replaceUrl: true,
-                });
-            }
         }
-    }
-    async loadFilterItems() {
-        const types = await this.fileTypeService.items();
-        const items = [
-            { key: 'all', textKey: 'file-types.all', icon: 'fa-light fa-folder-closed' },
-            ...types.map((type) => ({
-                key: type.name,
-                textKey: `file-types.${type.name}`,
-                icon: type.icon || 'fa-light fa-file',
-            })),
-        ];
-        this.filterItems.set(items);
-    }
-    setFilter(key) {
-        this.selectedFilter.set(key);
-    }
-    getFilterIcon() {
-        if (this.selectedFilter() === 'all') {
-            return 'fa-light fa-folder-closed';
+        catch (error) {
+            patchState(store, {
+                loadingFolderId: null,
+                isLoading: false,
+            });
+            throw error;
         }
-        const item = this.filterItems().find((item) => item.key === this.selectedFilter());
-        return item?.icon || 'fa-light fa-file';
-    }
-    getFilterText() {
-        if (this.selectedFilter() === 'all') {
-            return 'file-types.all';
+    },
+    navigateToFolder(folderId) {
+        patchState(store, { navigatingFolderId: folderId });
+    },
+    async loadFolderContents(folderId) {
+        await this._load(folderId);
+    },
+    setViewMode(mode) {
+        patchState(store, { viewMode: mode });
+        settingService.scope(AXPSettingScope.User).set(AXPDocumentExplorerSettings.ViewMode, mode);
+    },
+    setSortField(field) {
+        patchState(store, { sortField: field });
+        settingService.scope(AXPSettingScope.User).set(AXPDocumentExplorerSettings.SortField, field);
+    },
+    setSortDirection(direction) {
+        patchState(store, { sortDirection: direction });
+        settingService.scope(AXPSettingScope.User).set(AXPDocumentExplorerSettings.SortDirection, direction);
+    },
+    setDrive(scope) {
+        patchState(store, { currentDrive: scope });
+    },
+    isLoadingFolder(folderId) {
+        return store.loadingFolderId() === folderId;
+    },
+    getFileInfo(fileName) {
+        const fileTypes = store.fileTypes();
+        const extension = fileName.split('.').pop()?.toLowerCase() || '';
+        const extensions = fileTypes.flatMap((type) => type.extensions);
+        const fileType = extensions.find((e) => e.name === extension);
+        return {
+            icon: fileType?.icon || 'fa-light fa-file',
+            type: fileType?.name || 'Unknown',
+        };
+    },
+    sortItems(items) {
+        const field = store.sortField();
+        const direction = store.sortDirection();
+        return [...items].sort((a, b) => {
+            let comparison = 0;
+            switch (field) {
+                case 'name':
+                    comparison = a.name.localeCompare(b.name);
+                    break;
+                case 'modified':
+                    const aDate = a.lastModified ? new Date(a.lastModified) : new Date(0);
+                    const bDate = b.lastModified ? new Date(b.lastModified) : new Date(0);
+                    comparison = aDate.getTime() - bDate.getTime();
+                    break;
+                case 'size':
+                    comparison = (a.size || 0) - (b.size || 0);
+                    break;
+            }
+            return direction === 'asc' ? comparison : -comparison;
+        });
+    },
+    async refresh() {
+        const currentFolder = store.currentNode();
+        if (currentFolder) {
+            await this._load(currentFolder.id);
         }
-        const item = this.filterItems().find((item) => item.key === this.selectedFilter());
-        return item?.textKey || 'file-types.all';
-    }
-    handleNavigateToFolder(folderId) {
-        this.router.navigate([`${this.sessionService.application?.name}/drive/my/${folderId}`]);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentDriveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMDocumentDriveComponent, isStandalone: true, selector: "axp-document-drive", providers: [AXPDocumentExplorerViewModel], viewQueries: [{ propertyName: "documentExplorer", first: true, predicate: AXMDocumentExplorerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Main Layout -->\n<axp-layout-simple-page *translate=\"let t\">\n  <!-- Header Section -->\n  <axp-layout-header>\n    <!-- Title Section -->\n    <axp-layout-title>\n      @if(vm.isRoot()) {\n      {{ t('my-drive.title', { scope: rootConfig.config.i18n }) | async }}\n      }@else {\n      {{ vm.currentFolder()?.name }}\n      }\n    </axp-layout-title>\n\n    <!-- Description Section -->\n    <axp-layout-description>\n      {{\n        t('my-drive.description', {\n          scope: rootConfig.config.i18n,\n          params: {\n            count: vm.itemsCount(),\n            size: vm.availableSpace() | format : 'filesize' | async\n          }\n        }) | async\n      }}\n    </axp-layout-description>\n\n    <!-- Actions Section -->\n    <axp-layout-actions>\n      <!-- Primary Actions -->\n      <axp-layout-actions-primary>\n        <!-- Upload Dropdown -->\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            <ax-button-item-list>\n              <ax-button-item\n                (onClick)=\"documentExplorer()?.createFolder()\"\n                [text]=\"(t('actions.create-folder', { scope: rootConfig.config.i18n }) | async)!\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-folder-plus\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n              <ax-divider></ax-divider>\n              <ax-button-item\n                (onClick)=\"documentExplorer()?.uploadFile()\"\n                [text]=\"(t('actions.upload-file', { 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      </axp-layout-actions-primary>\n\n      <!-- Secondary Actions -->\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('actions.fa-share', { scope: rootConfig.config.i18n }) | async)!\">\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-share-nodes\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n\n    <!-- Breadcrumbs Section -->\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item> {{ t('home') | async }} </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item> {{ t('profile.title', { scope: 'auth' }) | async }} </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n\n    <!-- Toolbar Section -->\n    <axp-layout-toolbar>\n      <!-- Left Side Toolbar -->\n      <axp-layout-prefix>\n        <!-- Filter Dropdown -->\n        <ax-button [text]=\"t(getFilterText(), { scope: rootConfig.config.i18n }) | async\">\n          <ax-prefix>\n            <ax-icon [icon]=\"getFilterIcon()\"></ax-icon>\n          </ax-prefix>\n\n          <ax-dropdown-panel>\n            <ax-button-item-list class=\"ax-p-2\">\n              @for(item of filterItems(); track item.key) {\n              <ax-button-item\n                (onClick)=\"setFilter(item.key)\"\n                [text]=\"(t(item.textKey, { scope: rootConfig.config.i18n }) | async)!\"\n              >\n                <ax-prefix>\n                  <ax-icon [icon]=\"item.icon\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n              }\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n\n        <!-- Search Box -->\n        <ax-search-box\n          (onValueChanged)=\"handleSearchChange($event)\"\n          class=\"ax-w-72\"\n          [placeholder]=\"t('actions.search', { scope: rootConfig.config.i18n }) | async\"\n          ><ax-clear-button></ax-clear-button\n        ></ax-search-box>\n      </axp-layout-prefix>\n\n      <!-- Right Side Toolbar -->\n      <axp-layout-suffix>\n        <!-- Sort Dropdown -->\n        <ax-button>\n          <ax-icon\n            [icon]=\"'fa-light fa-arrow-' + (vm.sortDirection() === 'asc' ? 'up' : 'down') + '-wide-short'\"\n          ></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              <!-- Sort By Options -->\n              @for(item of sortItems(); track item.key) {\n              <ax-button-item\n                [text]=\"(t(item.textKey, { scope: rootConfig.config.i18n }) | async)!\"\n                (onClick)=\"vm.setSortField(item.key)\"\n                [selected]=\"vm.sortField() === item.key\"\n              >\n                <ax-prefix>\n                  <ax-icon [icon]=\"item.icon\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n              }\n              <ax-divider></ax-divider>\n              <!-- Sort Direction Options -->\n              <ax-button-item\n                [text]=\"(t('actions.sort-ascending', { scope: rootConfig.config.i18n }) | async)!\"\n                [selected]=\"vm.sortDirection() === 'asc'\"\n                (onClick)=\"vm.setSortDirection('asc')\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-arrow-up-wide-short\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n              <ax-button-item\n                [text]=\"(t('actions.sort-descending', { scope: rootConfig.config.i18n }) | async)!\"\n                [selected]=\"vm.sortDirection() === 'desc'\"\n                (onClick)=\"vm.setSortDirection('desc')\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-arrow-down-wide-short\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n\n        <!-- View Mode Toggle -->\n        <ax-button>\n          @if(vm.isGridView()) {\n          <ax-icon icon=\"fa-light fa-grid-2\"></ax-icon>\n          }@else {\n          <ax-icon icon=\"fa-light fa-list\"></ax-icon>\n          }\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              <ax-button-item\n                [text]=\"(t('actions.grid-view', { scope: rootConfig.config.i18n }) | async)!\"\n                [selected]=\"vm.isGridView()\"\n                (onClick)=\"vm.setViewMode('grid')\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-grid-2\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n              <ax-button-item\n                [text]=\"(t('actions.list-view', { scope: rootConfig.config.i18n }) | async)!\"\n                (onClick)=\"vm.setViewMode('list')\"\n                [selected]=\"vm.isListView()\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-list\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </axp-layout-suffix>\n    </axp-layout-toolbar>\n  </axp-layout-header>\n\n  <!-- Content Section -->\n  <axp-layout-content class=\"ax-overflow-hidden ax-flex ax-flex-col ax-flex-1\">\n    <axm-document-explorer></axm-document-explorer>\n  </axp-layout-content>\n\n  <!-- Footer Section -->\n  <axp-layout-footer>\n    <axp-layout-prefix>\n      <div class=\"breadcrumb ax-xs\">\n        @for (item of vm.currentPath(); track item.id; let i = $index;let last = $last) {\n        <!-- Navigation Button -->\n        <ax-button look=\"blank\" (onClick)=\"handleNavigateToFolder(item.id)\" [text]=\"item.name\" [disabled]=\"last\">\n          @if(i === 0) {\n          <ax-icon icon=\"fa-light fa-cloud\"></ax-icon>\n          }@else {\n          <ax-icon icon=\"fa-light fa-folder-closed\"></ax-icon>\n          }\n        </ax-button>\n        <!-- Separator -->\n        @if(!last) {\n        <i class=\"fa-regular fa-chevron-right fa-fw fa-xs\"></i>\n        } }\n      </div>\n    </axp-layout-prefix>\n\n    <axp-layout-suffix> </axp-layout-suffix>\n  </axp-layout-footer>\n</axp-layout-simple-page>\n", styles: [".breadcrumb{display:flex;flex-direction:row;align-items:center;gap:.25rem}.breadcrumb .ax-state-disabled button,.breadcrumb .ax-state-loading button{cursor:default!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.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: "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 }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i3.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i4.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: AXLoadingModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i6$1.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i6$1.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i7$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i8.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXFileModule }, { kind: "component", type: AXPSimplePageLayout, selector: "axp-layout-simple-page" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-layout-content,     axp-layout-header-container,    axp-layout-side-container,    axp-layout-sections,    axp-layout-section-container,    axp-layout-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title,     axp-layout-nav-button,     axp-layout-description,     axp-layout-title-bar,    axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutHeaderTemplateComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutActionsComponent, selector: "axp-layout-actions" }, { kind: "component", type: AXPThemeLayoutPagePrimaryActionsComponent, selector: "axp-layout-actions-primary" }, { kind: "component", type: AXPThemeLayoutPageSecondaryActionsComponent, selector: "axp-layout-actions-secondary" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "component", type: AXPThemeLayoutFooterComponent, selector: "axp-layout-footer" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "component", type: AXMDocumentExplorerComponent, selector: "axm-document-explorer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentDriveComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-document-drive', standalone: true, imports: [
-                        CommonModule,
-                        RouterModule,
-                        AXMenuModule,
-                        AXButtonModule,
-                        AXButtonGroupModule,
-                        AXDropdownButtonModule,
-                        AXDropdownModule,
-                        AXTranslationModule,
-                        AXDecoratorModule,
-                        AXLoadingModule,
-                        AXBreadcrumbsModule,
-                        AXBadgeModule,
-                        AXSearchBoxModule,
-                        AXFormatModule,
-                        AXFileModule,
-                        AXPSimplePageLayout,
-                        AXPThemeLayoutBlockComponent,
-                        AXPThemeLayoutHeaderTemplateComponent,
-                        AXPThemeLayoutActionsComponent,
-                        AXPThemeLayoutPagePrimaryActionsComponent,
-                        AXPThemeLayoutPageSecondaryActionsComponent,
-                        AXPThemeLayoutToolbarComponent,
-                        AXPThemeLayoutFooterComponent,
-                        AXDateTimeModule,
-                        AXMDocumentExplorerComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [AXPDocumentExplorerViewModel], template: "<!-- Main Layout -->\n<axp-layout-simple-page *translate=\"let t\">\n  <!-- Header Section -->\n  <axp-layout-header>\n    <!-- Title Section -->\n    <axp-layout-title>\n      @if(vm.isRoot()) {\n      {{ t('my-drive.title', { scope: rootConfig.config.i18n }) | async }}\n      }@else {\n      {{ vm.currentFolder()?.name }}\n      }\n    </axp-layout-title>\n\n    <!-- Description Section -->\n    <axp-layout-description>\n      {{\n        t('my-drive.description', {\n          scope: rootConfig.config.i18n,\n          params: {\n            count: vm.itemsCount(),\n            size: vm.availableSpace() | format : 'filesize' | async\n          }\n        }) | async\n      }}\n    </axp-layout-description>\n\n    <!-- Actions Section -->\n    <axp-layout-actions>\n      <!-- Primary Actions -->\n      <axp-layout-actions-primary>\n        <!-- Upload Dropdown -->\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            <ax-button-item-list>\n              <ax-button-item\n                (onClick)=\"documentExplorer()?.createFolder()\"\n                [text]=\"(t('actions.create-folder', { scope: rootConfig.config.i18n }) | async)!\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-folder-plus\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n              <ax-divider></ax-divider>\n              <ax-button-item\n                (onClick)=\"documentExplorer()?.uploadFile()\"\n                [text]=\"(t('actions.upload-file', { 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      </axp-layout-actions-primary>\n\n      <!-- Secondary Actions -->\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('actions.fa-share', { scope: rootConfig.config.i18n }) | async)!\">\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-share-nodes\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n\n    <!-- Breadcrumbs Section -->\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item> {{ t('home') | async }} </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item> {{ t('profile.title', { scope: 'auth' }) | async }} </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n\n    <!-- Toolbar Section -->\n    <axp-layout-toolbar>\n      <!-- Left Side Toolbar -->\n      <axp-layout-prefix>\n        <!-- Filter Dropdown -->\n        <ax-button [text]=\"t(getFilterText(), { scope: rootConfig.config.i18n }) | async\">\n          <ax-prefix>\n            <ax-icon [icon]=\"getFilterIcon()\"></ax-icon>\n          </ax-prefix>\n\n          <ax-dropdown-panel>\n            <ax-button-item-list class=\"ax-p-2\">\n              @for(item of filterItems(); track item.key) {\n              <ax-button-item\n                (onClick)=\"setFilter(item.key)\"\n                [text]=\"(t(item.textKey, { scope: rootConfig.config.i18n }) | async)!\"\n              >\n                <ax-prefix>\n                  <ax-icon [icon]=\"item.icon\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n              }\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n\n        <!-- Search Box -->\n        <ax-search-box\n          (onValueChanged)=\"handleSearchChange($event)\"\n          class=\"ax-w-72\"\n          [placeholder]=\"t('actions.search', { scope: rootConfig.config.i18n }) | async\"\n          ><ax-clear-button></ax-clear-button\n        ></ax-search-box>\n      </axp-layout-prefix>\n\n      <!-- Right Side Toolbar -->\n      <axp-layout-suffix>\n        <!-- Sort Dropdown -->\n        <ax-button>\n          <ax-icon\n            [icon]=\"'fa-light fa-arrow-' + (vm.sortDirection() === 'asc' ? 'up' : 'down') + '-wide-short'\"\n          ></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              <!-- Sort By Options -->\n              @for(item of sortItems(); track item.key) {\n              <ax-button-item\n                [text]=\"(t(item.textKey, { scope: rootConfig.config.i18n }) | async)!\"\n                (onClick)=\"vm.setSortField(item.key)\"\n                [selected]=\"vm.sortField() === item.key\"\n              >\n                <ax-prefix>\n                  <ax-icon [icon]=\"item.icon\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n              }\n              <ax-divider></ax-divider>\n              <!-- Sort Direction Options -->\n              <ax-button-item\n                [text]=\"(t('actions.sort-ascending', { scope: rootConfig.config.i18n }) | async)!\"\n                [selected]=\"vm.sortDirection() === 'asc'\"\n                (onClick)=\"vm.setSortDirection('asc')\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-arrow-up-wide-short\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n              <ax-button-item\n                [text]=\"(t('actions.sort-descending', { scope: rootConfig.config.i18n }) | async)!\"\n                [selected]=\"vm.sortDirection() === 'desc'\"\n                (onClick)=\"vm.setSortDirection('desc')\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-arrow-down-wide-short\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n\n        <!-- View Mode Toggle -->\n        <ax-button>\n          @if(vm.isGridView()) {\n          <ax-icon icon=\"fa-light fa-grid-2\"></ax-icon>\n          }@else {\n          <ax-icon icon=\"fa-light fa-list\"></ax-icon>\n          }\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              <ax-button-item\n                [text]=\"(t('actions.grid-view', { scope: rootConfig.config.i18n }) | async)!\"\n                [selected]=\"vm.isGridView()\"\n                (onClick)=\"vm.setViewMode('grid')\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-grid-2\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n              <ax-button-item\n                [text]=\"(t('actions.list-view', { scope: rootConfig.config.i18n }) | async)!\"\n                (onClick)=\"vm.setViewMode('list')\"\n                [selected]=\"vm.isListView()\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-list\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </axp-layout-suffix>\n    </axp-layout-toolbar>\n  </axp-layout-header>\n\n  <!-- Content Section -->\n  <axp-layout-content class=\"ax-overflow-hidden ax-flex ax-flex-col ax-flex-1\">\n    <axm-document-explorer></axm-document-explorer>\n  </axp-layout-content>\n\n  <!-- Footer Section -->\n  <axp-layout-footer>\n    <axp-layout-prefix>\n      <div class=\"breadcrumb ax-xs\">\n        @for (item of vm.currentPath(); track item.id; let i = $index;let last = $last) {\n        <!-- Navigation Button -->\n        <ax-button look=\"blank\" (onClick)=\"handleNavigateToFolder(item.id)\" [text]=\"item.name\" [disabled]=\"last\">\n          @if(i === 0) {\n          <ax-icon icon=\"fa-light fa-cloud\"></ax-icon>\n          }@else {\n          <ax-icon icon=\"fa-light fa-folder-closed\"></ax-icon>\n          }\n        </ax-button>\n        <!-- Separator -->\n        @if(!last) {\n        <i class=\"fa-regular fa-chevron-right fa-fw fa-xs\"></i>\n        } }\n      </div>\n    </axp-layout-prefix>\n\n    <axp-layout-suffix> </axp-layout-suffix>\n  </axp-layout-footer>\n</axp-layout-simple-page>\n", styles: [".breadcrumb{display:flex;flex-direction:row;align-items:center;gap:.25rem}.breadcrumb .ax-state-disabled button,.breadcrumb .ax-state-loading button{cursor:default!important}\n"] }]
-        }] });
-
-var drive_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXMDocumentDriveComponent: AXMDocumentDriveComponent
-});
+    },
+})));
 
 class AXMDocumentExplorerComponent {
     constructor() {
@@ -3770,6 +3836,7 @@ class AXMDocumentExplorerComponent {
     #effect;
     handleNavigateToFolder(folderId) {
         this.vm.navigateToFolder(folderId);
+        console.log(this.vm.currentFolder());
     }
     // Context Menu Handlers
     async handleContextMenuOnOpening(e) {
@@ -3838,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,
             {
@@ -3891,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
@@ -3927,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
@@ -3937,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;
@@ -3946,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();
             }
@@ -3980,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: i8.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i4$1.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,
@@ -3994,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({
@@ -4111,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: () => Promise.resolve().then(function () { return drive_component; }).then((c) => c.AXMDocumentDriveComponent),
+                    loadComponent: () => import('./acorex-modules-document-management-drive.component-B6az6-_w.mjs').then((c) => c.AXMDocumentDriveComponent),
                 },
                 {
                     path: ':id',
-                    loadComponent: () => Promise.resolve().then(function () { return drive_component; }).then((c) => c.AXMDocumentDriveComponent),
+                    loadComponent: () => import('./acorex-modules-document-management-drive.component-B6az6-_w.mjs').then((c) => c.AXMDocumentDriveComponent),
                 },
             ],
         },
@@ -4134,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,
@@ -4178,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,
@@ -4193,6 +4397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             widgets: [AXmFileTypeExtensionWidget, AXMDocumentAttachmentWidget],
                         }),
                         AXMFileTypeModule,
+                        AXMediaViewerModule.forRoot(),
                     ],
                     exports: [],
                     providers: [
@@ -4238,5 +4443,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXMDocumentManagerService as A, AXMSearchCommandProvider as B, AXMSettingProvider as C, RootConfig as R, AXMDocumentManagementModule as a, AXMDocumentManagementDocumentEntityModule as b, AXMDocumentService as c, documentFactory as d, AXMDocumentServiceImpl as e, documentTypeFactory as f, AXMDocumentManagementDocumentTypeEntityModule as g, AXMDocumentManagementDocumentTypeEntityService as h, AXMDocumentManagementDocumentTypeEntityServiceImpl as i, documentTypeMetaDefinitionfactory as j, AXMDocumentManagementDocumentTypeMetaDefinitionEntityModule as k, AXMDocumentManagementDocumentTypeMetaDefinitionEntityService as l, AXMDocumentManagementDocumentTypeMetaDefinitionEntityServiceImpl as m, documentTypeMetaValueFactory as n, AXMDocumentManagementDocumentTypeMetaValueEntityModule as o, AXMDocumentManagementDocumentTypeMetaValueEntityService as p, AXMDocumentManagementDocumentTypeMetaValueEntityServiceImpl as q, documentTypeStatusDefinitionFactory as r, AXMDocumentManagementDocumentTypeStatusDefinitionEntityModule as s, AXMDocumentManagementDocumentTypeStatusDefinitionEntityService as t, AXMDocumentManagementDocumentTypeStatusDefinitionEntityServiceImpl as u, folderFactory as v, AXMFolderService as w, AXMFolderServiceImpl as x, AXMEntityProvider as y, AXMMenuProvider as z };
-//# sourceMappingURL=acorex-modules-document-management-acorex-modules-document-management-DagdBc6i.mjs.map
+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-BmLGtKDq.mjs.map