@acorex/modules 19.2.17-next.0 → 19.2.19

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

@@ -1,9 +1,9 @@
 import { AXPSessionService, AXPAuthGuard, AXP_PERMISSION_PROVIDER } from '@acorex/platform/auth';
-import { AXPSearchCommandProvider, AXPEntityQueryType, AXPEntityCommandScope, createAllQueryView, AXPFileTypeProviderService, AXP_FILE_TYPE_INFO_PROVIDER, AXPSettingScope, AXPSettingService, AXP_MENU_PROVIDER, AXP_SETTING_DEFINITION_PROVIDER, AXP_SEARCH_PROVIDER } from '@acorex/platform/common';
+import { AXPSearchCommandProvider, createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType, AXPFileTypeProviderService, AXP_FILE_TYPE_INFO_PROVIDER, AXPFileStorageService, AXPSettingScope, AXPSettingService, AXP_MENU_PROVIDER, AXP_SETTING_DEFINITION_PROVIDER, AXP_SEARCH_PROVIDER } from '@acorex/platform/common';
 import { AXPEntityService, AXMEntityCrudServiceImpl, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
 import * as i0 from '@angular/core';
-import { inject, Injector, Injectable, NgModule, Component, ChangeDetectionStrategy, signal, computed, viewChild, effect } from '@angular/core';
-import { firstValueFrom, Subject } from 'rxjs';
+import { inject, Injector, Injectable, NgModule, ChangeDetectionStrategy, Component, signal, computed, viewChild, input, effect, ViewEncapsulation } from '@angular/core';
+import { firstValueFrom } 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 { RouterModule, ROUTES } from '@angular/router';
@@ -13,11 +13,11 @@ import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i7$1 from '@acorex/components/collapse';
 import { AXCollapseModule } from '@acorex/components/collapse';
-import * as i5$1 from '@acorex/components/decorators';
+import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i7 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
-import * as i5 from '@acorex/components/label';
+import * as i4 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
 import * as i1 from '@acorex/components/select-box';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
@@ -26,18 +26,31 @@ 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 i3$2 from '@acorex/components/media-viewer';
+import { AXMediaViewerModule } from '@acorex/components/media-viewer';
+import * as i3$4 from '@acorex/platform/workflow';
+import { AXPWorkflowService, AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
+import * as i2$1 from '@acorex/components/button';
+import { AXButtonModule, AXButtonComponent } from '@acorex/components/button';
+import { AXButtonGroupModule } from '@acorex/components/button-group';
+import * as i2$2 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import * as i3$3 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { AXLoadingModule } from '@acorex/components/loading';
-import * as i4 from '@acorex/components/menu';
+import * as i3$1 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
 import { AXDateTimeModule } from '@acorex/core/date-time';
-import * as i3 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
-import { AXTranslationService } from '@acorex/core/translation';
-import { AXPDataGenerator, AXPElementDataDirective } from '@acorex/platform/core';
-import { get as get$1 } from 'lodash-es';
+import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
+import { get as get$1, set as set$1 } from 'lodash-es';
 import { AXDialogService } from '@acorex/components/dialog';
 import { AXPopupService } from '@acorex/components/popup';
+import { AXFileService } from '@acorex/core/file';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
+import { AXBasePageComponent } from '@acorex/components/page';
+import { AXUploaderService } from '@acorex/components/uploader';
 
 const config = {
     i18n: 'document-management',
@@ -105,11 +118,11 @@ class AXMEntityProvider {
         if (moduleName == RootConfig.module.name) {
             switch (entityName) {
                 case RootConfig.entities.document.name:
-                    return (await Promise.resolve().then(function () { return index; })).documentFactory(this.injector);
+                    return (await Promise.resolve().then(function () { return index$1; })).documentFactory(this.injector);
                 case RootConfig.entities.documentType.name:
-                    return (await Promise.resolve().then(function () { return index; })).documentTypeFactory(this.injector);
+                    return (await Promise.resolve().then(function () { return index$1; })).documentTypeFactory(this.injector);
                 case RootConfig.entities.folder.name:
-                    return (await Promise.resolve().then(function () { return index; })).folderFactory(this.injector);
+                    return (await Promise.resolve().then(function () { return index$1; })).folderFactory(this.injector);
             }
         }
         return null;
@@ -659,9 +672,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }] });
 
-class AXMDocumentManagementDocumentTypeEntityService extends AXMEntityCrudServiceImpl {
+class AXMDocumentTypeService extends AXMEntityCrudServiceImpl {
 }
-class AXMDocumentManagementDocumentTypeEntityServiceImpl extends AXMDocumentManagementDocumentTypeEntityService {
+class AXMDocumentManagementDocumentTypeEntityServiceImpl extends AXMDocumentTypeService {
     constructor() {
         super(`${RootConfig.module.name}.${RootConfig.entities.documentType.name}`);
     }
@@ -673,7 +686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         }], ctorParameters: () => [] });
 
 async function documentTypeFactory(injector) {
-    const dataService = injector.get(AXMDocumentManagementDocumentTypeEntityService);
+    const dataService = injector.get(AXMDocumentTypeService);
     const metaDefinitionService = injector.get(AXMMetaDataDefinitionService);
     const i18n = RootConfig.config.i18n;
     const entityDef = {
@@ -842,9 +855,7 @@ async function documentTypeFactory(injector) {
         queries: {
             byKey: {
                 execute: async (id) => {
-                    const x = await dataService.getOne(id);
-                    console.log(x);
-                    return x;
+                    return await dataService.getOne(id);
                 },
                 type: AXPEntityQueryType.Single,
             },
@@ -1117,7 +1128,7 @@ class AXMDocumentManagementDocumentTypeEntityModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentManagementDocumentTypeEntityModule }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentManagementDocumentTypeEntityModule, providers: [
             {
-                provide: AXMDocumentManagementDocumentTypeEntityService,
+                provide: AXMDocumentTypeService,
                 useClass: AXMDocumentManagementDocumentTypeEntityServiceImpl,
             },
         ] }); }
@@ -1130,7 +1141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     declarations: [],
                     providers: [
                         {
-                            provide: AXMDocumentManagementDocumentTypeEntityService,
+                            provide: AXMDocumentTypeService,
                             useClass: AXMDocumentManagementDocumentTypeEntityServiceImpl,
                         },
                     ],
@@ -2194,11 +2205,10 @@ async function folderFactory(injector) {
     return entityDef;
 }
 
-var index = /*#__PURE__*/Object.freeze({
+var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     AXMDocumentManagementDocumentEntityModule: AXMDocumentManagementDocumentEntityModule,
     AXMDocumentManagementDocumentTypeEntityModule: AXMDocumentManagementDocumentTypeEntityModule,
-    AXMDocumentManagementDocumentTypeEntityService: AXMDocumentManagementDocumentTypeEntityService,
     AXMDocumentManagementDocumentTypeEntityServiceImpl: AXMDocumentManagementDocumentTypeEntityServiceImpl,
     AXMDocumentManagementDocumentTypeMetaDefinitionEntityModule: AXMDocumentManagementDocumentTypeMetaDefinitionEntityModule,
     AXMDocumentManagementDocumentTypeMetaDefinitionEntityService: AXMDocumentManagementDocumentTypeMetaDefinitionEntityService,
@@ -2211,6 +2221,7 @@ var index = /*#__PURE__*/Object.freeze({
     AXMDocumentManagementDocumentTypeStatusDefinitionEntityServiceImpl: AXMDocumentManagementDocumentTypeStatusDefinitionEntityServiceImpl,
     AXMDocumentService: AXMDocumentService,
     AXMDocumentServiceImpl: AXMDocumentServiceImpl,
+    AXMDocumentTypeService: AXMDocumentTypeService,
     AXMFolderService: AXMFolderService,
     AXMFolderServiceImpl: AXMFolderServiceImpl,
     documentFactory: documentFactory,
@@ -2596,22 +2607,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }] });
 
-// @if(allowSearch()) {
-//     <ax-search-box><ax-clear-button></ax-clear-button></ax-search-box>
-//     } @if(hasClearButton()) {
-//     <ax-clear-button></ax-clear-button>
-//     } @for (validation of validationRules(); track $index) {
-//     <ax-validation-rule
-//       [rule]="validation.rule"
-//       [message]="validation.options?.message"
-//       [options]="validation.options"
-//     ></ax-validation-rule>
-//     } @for (validation of validationRules(); track $index) {
-//     <ax-validation-rule
-//       [rule]="validation.rule"
-//       [message]="validation.options?.message"
-//       [options]="validation.options"
-//     ></ax-validation-rule>
 class AXMFileTypeExtensionWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
@@ -2656,6 +2651,7 @@ class AXMFileTypeExtensionWidgetEditComponent extends AXPWidgetComponent {
         super.ngOnInit();
         this.selectedItems.set(this.getValue()?.selectedItems ?? []);
         this.context.set(this.getValue()?.context ?? {});
+        console.log(this.selectedItems());
     }
     outputs() {
         return ['selectedItems', 'context'];
@@ -2714,137 +2710,143 @@ class AXMFileTypeExtensionWidgetEditComponent extends AXPWidgetComponent {
         }
         return false;
     }
+    hasMetaInExtensions(extensions) {
+        return extensions.some((ext) => ext.meta && ext.meta.length > 0);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFileTypeExtensionWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMFileTypeExtensionWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div>
-      <ax-select-box
-        #dd
-        [dataSource]="dataSource"
-        valueField="name"
-        textField="title"
-        [multiple]="true"
-        [ngModel]="getValue()?.selectedItems"
-        (onValueChanged)="handleValueChange($event)"
-      >
-      </ax-select-box>
-      <div class="ax-py-3"></div>
-      <axp-widgets-container (onContextChanged)="handleOnContextChange($event)" [context]="context()">
-        @if (selectedItems().length > 0) {
-          <ax-collapse-group look="fill">
-            @for (item of selectedItems(); track item.name) {
-              <!-- File Types -->
-              <ax-collapse [caption]="item.title">
-                <div class="ax-flex ax-flex-col ax-gap-5">
-                  @if (item.meta && item.meta.length > 0) {
-                    <div class="ax-flex ax-flex-col ax-gap-2">
-                      <ax-text [textContent]="'Global Meta Data'" class="ax-font-bold ax-text-sm"></ax-text>
-                      @for (metaFile of item.meta; track metaFile.name) {
-                        <!-- File Meta Data -->
-                        <ax-form-field>
-                        <ax-label [required]="filedIsRequired(metaFile)">{{ metaFile.title }}</ax-label>
-                        <ng-container axp-widget-renderer [node]="getNode(metaFile)" [mode]="'edit'"></ng-container>
-                      </ax-form-field>
-                      }
-                    </div>
-                  }
-                  @if (item.extensions && item.extensions.length > 0) {
-                    <div class="ax-flex ax-flex-col ax-gap-3">
-                      @for (ext of item.extensions; track ext.name) {
-                        <!-- Extensions -->
-                        @if (ext.meta && ext.meta.length > 0) {
-                          <ax-text [textContent]="ext.title" class="ax-font-bold ax-text-sm"></ax-text>
-                          <div class="ax-flex ax-flex-col ax-gap-2">
-                            @for (extMeta of ext.meta; track $index) {
-                              <!-- Extension Meta Data -->
-                              <ax-form-field>
-                                <ax-label [required]="filedIsRequired(extMeta)">{{ extMeta.title }}</ax-label>
-                                <ng-container axp-widget-renderer [node]="getNode(extMeta)"
-                                              [mode]="'edit'"></ng-container>
-                              </ax-form-field>
-                            }
-                          </div>
-                        }
-                        <!-- End Extension Meta Data -->
-                      }
-                    </div>
-                    <!-- End Extensions -->
-                  }
-                </div>
-              </ax-collapse>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMFileTypeExtensionWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ` <div>
+    <ax-select-box
+      #dd
+      [dataSource]="dataSource"
+      valueField="name"
+      textField="title"
+      [multiple]="true"
+      [ngModel]="getValue()?.selectedItems"
+      (onValueChanged)="handleValueChange($event)"
+    >
+    </ax-select-box>
+    <div class="ax-py-3"></div>
+    <axp-widgets-container (onContextChanged)="handleOnContextChange($event)" [context]="context()">
+      @if (selectedItems().length > 0) {
+      <ax-collapse-group look="fill">
+        @for (item of selectedItems(); track item.name) {
+        <!-- File Types -->
+        <ax-collapse [caption]="item.title">
+          <div class="ax-flex ax-flex-col ax-gap-5">
+            @if (item.meta && item.meta.length > 0) {
+            <div class="ax-flex ax-flex-col ax-gap-2">
+              <ax-text [textContent]="'Global Meta Data'" class="ax-font-bold ax-text-sm"></ax-text>
+              @for (metaFile of item.meta; track metaFile.name) {
+              <!-- File Meta Data -->
+              <ax-form-field>
+                <ax-label [required]="filedIsRequired(metaFile)">{{ metaFile.title }}</ax-label>
+                <ng-container axp-widget-renderer [node]="getNode(metaFile)" [mode]="'edit'"></ng-container>
+              </ax-form-field>
+              }
+            </div>
+            } @if (item.extensions && item.extensions.length > 0) {
+            <div class="ax-flex ax-flex-col ax-gap-3">
+              @for (ext of item.extensions; track ext.name) {
+              <!-- Extensions -->
+              @if (ext.meta && ext.meta.length > 0) {
+              <ax-text [textContent]="ext.title" class="ax-font-bold ax-text-sm"></ax-text>
+              <div class="ax-flex ax-flex-col ax-gap-2">
+                @for (extMeta of ext.meta; track $index) {
+                <!-- Extension Meta Data -->
+                <ax-form-field>
+                  <ax-label [required]="filedIsRequired(extMeta)">{{ extMeta.title }}</ax-label>
+                  <ng-container axp-widget-renderer [node]="getNode(extMeta)" [mode]="'edit'"></ng-container>
+                </ax-form-field>
+                }
+              </div>
+              }
+              <!-- End Extension Meta Data -->
+              }
+            </div>
+            <!-- End Extensions -->
             }
-            <!-- End File Types -->
-          </ax-collapse-group>
-        }
-      </axp-widgets-container>
-    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i7.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i5.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { 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: AXPLayoutBuilderModule }, { kind: "component", type: i6.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i7$1.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i7$1.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+          </div>
+        </ax-collapse>
+          }
+        <!-- End File Types -->
+      </ax-collapse-group>
+      }
+    </axp-widgets-container>
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i7.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.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: AXPLayoutBuilderModule }, { kind: "component", type: i6.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i7$1.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i7$1.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFileTypeExtensionWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `
-    <div>
-      <ax-select-box
-        #dd
-        [dataSource]="dataSource"
-        valueField="name"
-        textField="title"
-        [multiple]="true"
-        [ngModel]="getValue()?.selectedItems"
-        (onValueChanged)="handleValueChange($event)"
-      >
-      </ax-select-box>
-      <div class="ax-py-3"></div>
-      <axp-widgets-container (onContextChanged)="handleOnContextChange($event)" [context]="context()">
-        @if (selectedItems().length > 0) {
-          <ax-collapse-group look="fill">
-            @for (item of selectedItems(); track item.name) {
-              <!-- File Types -->
-              <ax-collapse [caption]="item.title">
-                <div class="ax-flex ax-flex-col ax-gap-5">
-                  @if (item.meta && item.meta.length > 0) {
-                    <div class="ax-flex ax-flex-col ax-gap-2">
-                      <ax-text [textContent]="'Global Meta Data'" class="ax-font-bold ax-text-sm"></ax-text>
-                      @for (metaFile of item.meta; track metaFile.name) {
-                        <!-- File Meta Data -->
-                        <ax-form-field>
-                        <ax-label [required]="filedIsRequired(metaFile)">{{ metaFile.title }}</ax-label>
-                        <ng-container axp-widget-renderer [node]="getNode(metaFile)" [mode]="'edit'"></ng-container>
-                      </ax-form-field>
-                      }
-                    </div>
-                  }
-                  @if (item.extensions && item.extensions.length > 0) {
-                    <div class="ax-flex ax-flex-col ax-gap-3">
-                      @for (ext of item.extensions; track ext.name) {
-                        <!-- Extensions -->
-                        @if (ext.meta && ext.meta.length > 0) {
-                          <ax-text [textContent]="ext.title" class="ax-font-bold ax-text-sm"></ax-text>
-                          <div class="ax-flex ax-flex-col ax-gap-2">
-                            @for (extMeta of ext.meta; track $index) {
-                              <!-- Extension Meta Data -->
-                              <ax-form-field>
-                                <ax-label [required]="filedIsRequired(extMeta)">{{ extMeta.title }}</ax-label>
-                                <ng-container axp-widget-renderer [node]="getNode(extMeta)"
-                                              [mode]="'edit'"></ng-container>
-                              </ax-form-field>
-                            }
-                          </div>
-                        }
-                        <!-- End Extension Meta Data -->
-                      }
-                    </div>
-                    <!-- End Extensions -->
-                  }
-                </div>
-              </ax-collapse>
+                    template: ` <div>
+    <ax-select-box
+      #dd
+      [dataSource]="dataSource"
+      valueField="name"
+      textField="title"
+      [multiple]="true"
+      [ngModel]="getValue()?.selectedItems"
+      (onValueChanged)="handleValueChange($event)"
+    >
+    </ax-select-box>
+    <div class="ax-py-3"></div>
+    <axp-widgets-container (onContextChanged)="handleOnContextChange($event)" [context]="context()">
+      @if (selectedItems().length > 0) {
+      <ax-collapse-group look="fill">
+        @for (item of selectedItems(); track item.name) {
+        <!-- File Types -->
+        <ax-collapse [caption]="item.title">
+          <div class="ax-flex ax-flex-col ax-gap-5">
+            @if (item.meta && item.meta.length > 0) {
+            <div class="ax-flex ax-flex-col ax-gap-2">
+              <ax-text [textContent]="'Global Meta Data'" class="ax-font-bold ax-text-sm"></ax-text>
+              @for (metaFile of item.meta; track metaFile.name) {
+              <!-- File Meta Data -->
+              <ax-form-field>
+                <ax-label [required]="filedIsRequired(metaFile)">{{ metaFile.title }}</ax-label>
+                <ng-container axp-widget-renderer [node]="getNode(metaFile)" [mode]="'edit'"></ng-container>
+              </ax-form-field>
+              }
+            </div>
+            } @if (item.extensions && item.extensions.length > 0) {
+            <div class="ax-flex ax-flex-col ax-gap-3">
+              @for (ext of item.extensions; track ext.name) {
+              <!-- Extensions -->
+              @if (ext.meta && ext.meta.length > 0) {
+              <ax-text [textContent]="ext.title" class="ax-font-bold ax-text-sm"></ax-text>
+              <div class="ax-flex ax-flex-col ax-gap-2">
+                @for (extMeta of ext.meta; track $index) {
+                <!-- Extension Meta Data -->
+                <ax-form-field>
+                  <ax-label [required]="filedIsRequired(extMeta)">{{ extMeta.title }}</ax-label>
+                  <ng-container axp-widget-renderer [node]="getNode(extMeta)" [mode]="'edit'"></ng-container>
+                </ax-form-field>
+                }
+              </div>
+              }
+              <!-- End Extension Meta Data -->
+              }
+            </div>
+            <!-- End Extensions -->
             }
-            <!-- End File Types -->
-          </ax-collapse-group>
-        }
-      </axp-widgets-container>
-    </div>`,
+          </div>
+        </ax-collapse>
+          }
+        <!-- End File Types -->
+      </ax-collapse-group>
+      }
+    </axp-widgets-container>
+  </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXSelectBoxModule, FormsModule, AXFormModule, AXLabelModule, AXDecoratorModule, AXPLayoutBuilderModule, AXCollapseModule],
+                    imports: [
+                        CommonModule,
+                        AXSelectBoxModule,
+                        FormsModule,
+                        AXFormModule,
+                        AXLabelModule,
+                        AXDecoratorModule,
+                        AXPLayoutBuilderModule,
+                        AXCollapseModule,
+                    ],
                     inputs: [],
                 }]
         }] });
@@ -3013,6 +3015,9 @@ class AXMDocumentManagerService {
         this.documentService = inject(AXMDocumentService);
         this.popupService = inject(AXPopupService);
         this.dialogService = inject(AXDialogService);
+        this.fileService = inject(AXPFileStorageService);
+        this.fileMangerService = inject(AXFileService);
+        this.workflow = inject(AXPWorkflowService);
         this.scopedDriveCache = new Map();
     }
     scope(scope, options) {
@@ -3023,7 +3028,6 @@ class AXMDocumentManagerService {
         return this.scopedDriveCache.get(cacheKey);
     }
     getScopeCacheKey(scope, options) {
-        // در آینده می‌توان این را برای کش کردن بر اساس ترکیب scope و options گسترش داد
         return scope;
     }
     /**
@@ -3112,23 +3116,32 @@ class AXMDocumentManagerService {
             name: folder.name,
             type: 'folder',
             parentId: folder.parentId || null,
-            lastModified: folder.updatedAt,
+            modifiedAt: folder.updatedAt,
+            createdAt: folder.createdAt,
+            description: folder.description,
+            childrenCount: folder.nodeCount,
+            size: folder.size,
             children: [
                 ...(folder.folders?.map((child) => ({
                     id: child.id,
                     name: child.name,
                     type: 'folder',
                     parentId: child.parentId || null,
-                    lastModified: child.updatedAt,
-                    size: AXPDataGenerator.number(50, 9000000),
+                    modifiedAt: child.updatedAt,
+                    createdAt: child.createdAt,
+                    childrenCount: child.nodeCount,
+                    description: child.description,
+                    size: child.size,
                 })) || []),
                 ...(folder.documents?.map((doc) => ({
                     id: doc.id,
                     name: doc.name,
                     type: 'file',
                     parentId: doc.parentId,
-                    lastModified: AXPDataGenerator.date(),
-                    size: AXPDataGenerator.number(50, 9000000),
+                    modifiedAt: doc.updatedAt,
+                    createdAt: doc.createdAt,
+                    size: doc.size,
+                    description: doc.description,
                 })) || []),
             ],
         };
@@ -3220,6 +3233,7 @@ class AXMDocumentManagerService {
             isSystem: false,
             isHidden: false,
             isDeleted: false,
+            size: 0,
         };
         const createdFolder = await this.folderService.insertOne(folderToCreate);
         const folder = await this.folderService.getOne(createdFolder);
@@ -3250,7 +3264,10 @@ class AXMDocumentManagerService {
             name: file.name,
             type: 'file',
             parentId: file.parentId,
-            lastModified: new Date(),
+            modifiedAt: file.updatedAt,
+            createdAt: file.createdAt,
+            size: file.size,
+            fileId: file.fileId,
         };
     }
     async createFile(data) {
@@ -3268,23 +3285,19 @@ class AXMDocumentManagerService {
     async deleteFile(fileId) {
         await this.documentService.deleteOne(fileId);
     }
-    async deleteNodes(nodeIds) {
-        for (const nodeId of nodeIds) {
-            try {
-                await this.deleteFolder(nodeId);
+    async deleteNodes(nodes) {
+        for (const node of nodes) {
+            if (node.type == 'folder') {
+                await this.deleteFolder(node.id);
             }
-            catch {
-                try {
-                    await this.deleteFile(nodeId);
-                }
-                catch (error) {
-                    console.error(`Failed to delete node with id ${nodeId}:`, error);
-                }
+            else {
+                await this.deleteFile(node.id);
             }
         }
     }
     async showCreateFolderDialog(parentId) {
-        const comp = (await import('./acorex-modules-document-management-create-folder-dialog.component-BnRaCq_Q.mjs')).AXMCreateFolderDialog;
+        const comp = (await import('./acorex-modules-document-management-create-folder-dialog.component-Cp26sAs9.mjs'))
+            .AXMCreateFolderDialog;
         const popup = await this.popupService.open(comp, {
             title: 't("actions.create-folder")',
             data: {
@@ -3293,79 +3306,138 @@ class AXMDocumentManagerService {
         });
         return popup.data?.folder;
     }
+    async moveTo(options) {
+        const comp = (await import('./acorex-modules-document-management-drive-choose.component-HSZ-b7-z.mjs')).AXMDocumentDriveChooseComponent;
+        //
+        const popup = await this.popupService.open(comp, {
+            title: `Choose ${options.browseMode == 'file' ? 'File' : 'Folder'}`,
+            data: {
+                selectionMode: options.multiple ? 'multiple' : 'single',
+                browseMode: options.browseMode ?? 'file',
+            },
+        });
+        //
+        const selectedFolders = popup.data.result ? popup.data?.items ?? [] : [];
+        if (selectedFolders.length > 0) {
+            const selectedFolder = selectedFolders[0];
+            if (selectedFolder) {
+                if (options.node.type === 'folder') {
+                    await this.updateFolder(options.node.id, { parentId: selectedFolder.id });
+                }
+                else {
+                    await this.updateFile(options.node.id, { parentId: selectedFolder.id });
+                }
+                return true;
+            }
+            else {
+                return false;
+            }
+        }
+        else {
+            return false;
+        }
+    }
+    async copyTo(options) {
+        const comp = (await import('./acorex-modules-document-management-drive-choose.component-HSZ-b7-z.mjs')).AXMDocumentDriveChooseComponent;
+        //
+        const popup = await this.popupService.open(comp, {
+            title: `Choose ${options.browseMode == 'file' ? 'File' : 'Folder'}`,
+            data: {
+                selectionMode: options.multiple ? 'multiple' : 'single',
+                browseMode: options.browseMode ?? 'file',
+            },
+        });
+        //
+        const selectedFolders = popup.data.result ? popup.data?.items ?? [] : [];
+        if (selectedFolders.length > 0) {
+            const selectedFolder = selectedFolders[0];
+            if (selectedFolder) {
+                if (options.node.type === 'folder') {
+                    await this.createFolder({
+                        name: options.node.name,
+                        parentId: selectedFolder.id,
+                        color: '#ffffff',
+                        size: options.node.size,
+                    });
+                }
+                else {
+                    await this.createFile({
+                        title: options.node.name,
+                        name: options.node.name,
+                        parentId: selectedFolder.id,
+                        //TODO upload file to file storage
+                        fileId: '',
+                        size: 0,
+                    });
+                }
+                return true;
+            }
+            else {
+                return false;
+            }
+        }
+        else {
+            return false;
+        }
+    }
+    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) => {
+            return {
+                id: doc.id || '',
+                name: doc.name,
+                type: doc.meta?.['type'],
+                url: doc.fileId,
+                size: doc.size.toString(),
+                thumbnail: doc.fileId,
+            };
+        }) || []);
+        console.log(nodes);
+        const comp = (await Promise.resolve().then(function () { return fileViewerPopup_component; }))
+            .AXMFileViewerPopupComponent;
+        await this.popupService.open(comp, {
+            title: `t("gallery" , ${RootConfig.module.name})` + ' - ' + parentFolderName,
+            data: {
+                nodes,
+            },
+        });
+    }
+    async openFile(node) {
+        console.log(node);
+        const file = await this.documentService.getOne(node.id);
+        console.log(file);
+    }
     async rename(node) {
-        const comp = (await import('./acorex-modules-document-management-rename-node-dialog.component-EBf1XqU8.mjs')).AXMRenameNodeDialog;
+        const comp = (await import('./acorex-modules-document-management-rename-node-dialog.component-D3Cg9_5d.mjs'))
+            .AXMRenameNodeDialog;
         const popup = await this.popupService.open(comp, {
             title: 't("actions.rename")',
             data: {
                 node,
             },
         });
-        return popup.data?.folder;
+        return popup.data?.result;
     }
     async showDeleteNodesDialog(nodeIds) {
-        const subject = new Subject();
-        subject.subscribe((status) => {
-            console.log(`The process has been "${status}".`);
-        });
-        const dialog = this.dialogService.open({
-            content: 'Are you sure?',
-            title: 'Delete',
-            type: 'danger',
-            buttons: [
-                {
-                    text: 'Yes',
-                    color: 'danger',
-                    onClick: async (e) => {
-                        e.handled = true;
-                        e.source.text = 'Deleting...';
-                        e.source.disabled = true;
-                        e.source.loading = true;
-                        subject.next('Started');
-                        await this.deleteNodes(nodeIds);
-                        subject.complete();
-                        dialog.close();
-                    },
-                },
-                {
-                    text: 'No',
-                    color: 'default',
-                    autofocus: true,
-                    onClick: () => {
-                        dialog.close();
-                    },
-                },
-            ],
+        const result = await this.workflow.execute('delete-entity', {
+            entities: nodeIds.map((node) => ({
+                source: `${RootConfig.module.name}.${node.type == 'folder' ? RootConfig.entities.folder.name : RootConfig.entities.document.name}`,
+                ids: [node.id],
+            })),
         });
+        return result.getOutput('result') ?? false;
     }
-    /**
-     * جستجوی فولدرها با نام مشخص شده در اسکوپ
-     * @param searchTerm عبارت جستجو
-     * @param scope اسکوپ جستجو
-     * @param options گزینه‌های اضافی مانند tenantId و userId
-     */
     async searchFolders(searchTerm, scope, options) {
         const { result: rootNode } = await this.getRoot(scope, options);
         const folders = await this.folderService.searchFolders(searchTerm, rootNode.id);
         return folders.map((folder) => this.mapFolderDtoToFolderNode(folder));
     }
-    /**
-     * جستجوی فایل‌ها با نام مشخص شده در اسکوپ
-     * @param searchTerm عبارت جستجو
-     * @param scope اسکوپ جستجو
-     * @param options گزینه‌های اضافی مانند tenantId و userId
-     */
     async searchFiles(searchTerm, scope, options) {
         const { result: rootNode } = await this.getRoot(scope, options);
         const files = await this.documentService.searchFiles(searchTerm, rootNode.id);
         return files.map((file) => this.mapFileToNode(file));
     }
-    /**
-     * جستجوی تمام نودها (فولدرها و فایل‌ها) با نام مشخص شده در اسکوپ
-     * @param searchTerm عبارت جستجو
-     * @param scope اسکوپ جستجو
-     * @param options گزینه‌های اضافی مانند tenantId و userId
-     */
     async searchNodes(searchTerm, scope, options) {
         const [folders, files] = await Promise.all([
             this.searchFolders(searchTerm, scope, options),
@@ -3373,6 +3445,125 @@ 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-HSZ-b7-z.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}`;
+    }
+    async uploadFile(folderId) {
+        const folder = await this.folderService.getOne(folderId);
+        var docTypes = folder.documentType;
+        if (folder && docTypes == null) {
+            const comp = (await Promise.resolve().then(function () { return index; })).AXMChooseDocumentTypeComponent;
+            const result = await this.popupService.open(comp);
+            if (result.data != null && result.data.documentType != null) {
+                const { upload, ...metaContext } = result.data.context;
+                //Todo 
+                const fileInfo = await this.fileService.getInfo(upload[0]);
+                const file = await this.documentService.insertOne({
+                    fileId: upload[0],
+                    meta: metaContext,
+                    parentId: folderId,
+                    size: fileInfo.size,
+                    name: `test.${fileInfo.mimeType.split('/')[1]}`,
+                    title: 'Test',
+                });
+                return true;
+            }
+            else {
+                return false;
+            }
+        }
+        return false;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentManagerService, providedIn: 'root' }); }
 }
@@ -3426,30 +3617,27 @@ class ScopedDriveService {
     async getAvailableSpace() {
         return this.parent.getAvailableSpace();
     }
-    /**
-     * جستجوی فولدرها با نام مشخص شده در اسکوپ فعلی
-     * @param searchTerm عبارت جستجو
-     */
     async searchFolders(searchTerm) {
         this.validateScopeOptions();
         return this.parent.searchFolders(searchTerm, this.scope, this.options);
     }
-    /**
-     * جستجوی فایل‌ها با نام مشخص شده در اسکوپ فعلی
-     * @param searchTerm عبارت جستجو
-     */
     async searchFiles(searchTerm) {
         this.validateScopeOptions();
         return this.parent.searchFiles(searchTerm, this.scope, this.options);
     }
-    /**
-     * جستجوی تمام نودها (فولدرها و فایل‌ها) با نام مشخص شده در اسکوپ فعلی
-     * @param searchTerm عبارت جستجو
-     */
     async searchNodes(searchTerm) {
         this.validateScopeOptions();
         return this.parent.searchNodes(searchTerm, this.scope, this.options);
     }
+    /**
+     * Creates a copy of a node (file or folder)
+     * @param node The node to copy
+     * @returns The newly created copied node
+     */
+    async copy(node) {
+        this.validateScopeOptions();
+        return this.parent.copy(node);
+    }
 }
 
 var AXPDocumentExplorerSettings;
@@ -3461,13 +3649,19 @@ var AXPDocumentExplorerSettings;
 
 const AXPDocumentExplorerViewModel = signalStore({ providedIn: 'root' }, withState(() => ({
     // View State
-    viewMode: 'grid',
+    viewMode: 'large-tiles',
     isLoading: false,
     // Navigation State
     currentPath: [],
     currentNode: null,
     loadingFolderId: null,
     navigatingFolderId: null,
+    backHistory: [],
+    // Selection State
+    selectionMode: 'none',
+    selectedNodes: [],
+    // Browse State
+    browseMode: 'file',
     // Sort State
     sortField: 'name',
     sortDirection: 'asc',
@@ -3480,36 +3674,49 @@ const AXPDocumentExplorerViewModel = signalStore({ providedIn: 'root' }, withSta
     currentDrive: null,
     // File Type State
     fileTypes: [],
+    // Detail Panel State
+    detailPanel: false,
 })), 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'),
+    isLargeTilesView: computed(() => store.viewMode() === 'large-tiles'),
+    isSmallTilesView: computed(() => store.viewMode() === 'small-tiles'),
     isListView: computed(() => store.viewMode() === 'list'),
-})), withMethods((store, fileTypeService = inject(AXPFileTypeProviderService), driveService = inject(AXMDocumentManagerService), settingService = inject(AXPSettingService)) => ({
-    async initialize(path = 'root') {
+    isDetailsView: computed(() => store.viewMode() === 'details'),
+    isLargeIconsView: computed(() => store.viewMode() === 'large-icons'),
+    isSmallIconsView: computed(() => store.viewMode() === 'small-icons'),
+    isBackAvailable: computed(() => store.backHistory().length > 0),
+    isUpAvailable: computed(() => {
+        const node = store.currentNode();
+        return node?.parentId != null;
+    }),
+    selectedCount: computed(() => store.selectedNodes().length),
+    hasSelectedItems: computed(() => store.selectedNodes().length > 0),
+    hasMultipleSelectedItems: computed(() => store.selectedNodes().length > 1),
+    isMultiSelect: computed(() => store.selectionMode() === 'multiple'),
+    selectedNode: computed(() => store.selectedNodes()[0] ?? null),
+    isDetailPanelOpen: computed(() => store.detailPanel()),
+})), withMethods((store, fileTypeService = inject(AXPFileTypeProviderService), driveService = inject(AXMDocumentManagerService), settingService = inject(AXPSettingService), translateService = inject(AXTranslationService)) => ({
+    async initialize(options) {
         // 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);
+        const viewMode = await settingService.scope(AXPSettingScope.User).get(AXPDocumentExplorerSettings.ViewMode);
+        const sortField = await settingService.scope(AXPSettingScope.User).get(AXPDocumentExplorerSettings.SortField);
+        const sortDirection = await settingService.scope(AXPSettingScope.User).get(AXPDocumentExplorerSettings.SortDirection);
         patchState(store, {
-            viewMode: viewMode || 'grid',
+            viewMode: viewMode || 'large-tiles',
             sortField: sortField || 'name',
             sortDirection: sortDirection || 'asc',
+            browseMode: options?.browseMode || 'file',
         });
     },
     _load: async (folderId) => {
@@ -3521,7 +3728,7 @@ const AXPDocumentExplorerViewModel = signalStore({ providedIn: 'root' }, withSta
                 currentNode: node.result,
                 currentPath: node.path,
                 folders: node.result.children?.filter((item) => item.type === 'folder') || [],
-                files: node.result.children?.filter((item) => item.type === 'file') || [],
+                files: node.result.children?.filter((item) => store.browseMode() == 'file' && item.type === 'file') || [],
                 itemsCount: node.result.children?.length || 0,
                 availableSpace: await driveService.getAvailableSpace(),
                 loadingFolderId: null,
@@ -3538,15 +3745,25 @@ const AXPDocumentExplorerViewModel = signalStore({ providedIn: 'root' }, withSta
         }
     },
     navigateToFolder(folderId) {
+        const currentNode = store.currentNode();
+        if (currentNode) {
+            patchState(store, {
+                backHistory: [...store.backHistory(), { folderId: currentNode.id, path: store.currentPath() }],
+            });
+        }
         patchState(store, { navigatingFolderId: folderId });
     },
     async loadFolderContents(folderId) {
         await this._load(folderId);
+        this.deselectAll();
     },
     setViewMode(mode) {
         patchState(store, { viewMode: mode });
         settingService.scope(AXPSettingScope.User).set(AXPDocumentExplorerSettings.ViewMode, mode);
     },
+    isViewMode(mode) {
+        return store.viewMode() === mode;
+    },
     setSortField(field) {
         patchState(store, { sortField: field });
         settingService.scope(AXPSettingScope.User).set(AXPDocumentExplorerSettings.SortField, field);
@@ -3555,6 +3772,9 @@ const AXPDocumentExplorerViewModel = signalStore({ providedIn: 'root' }, withSta
         patchState(store, { sortDirection: direction });
         settingService.scope(AXPSettingScope.User).set(AXPDocumentExplorerSettings.SortDirection, direction);
     },
+    setSelectionMode(mode) {
+        patchState(store, { selectionMode: mode });
+    },
     setDrive(scope) {
         patchState(store, { currentDrive: scope });
     },
@@ -3571,6 +3791,107 @@ const AXPDocumentExplorerViewModel = signalStore({ providedIn: 'root' }, withSta
             type: fileType?.name || 'Unknown',
         };
     },
+    getNodeInfo(node) {
+        // If no node, return a default object
+        if (!node) {
+            return {
+                name: '---',
+                icon: 'fa-light fa-folder',
+                type: 'Folder',
+                sections: [
+                    {
+                        title: 'Details',
+                        details: [],
+                    },
+                ],
+            };
+        }
+        // If the node is a file, return the file info
+        if (node.type === 'file') {
+            const fileTypes = store.fileTypes();
+            const extension = node.name.split('.').pop()?.toLowerCase() || '';
+            const extensions = fileTypes.flatMap((type) => type.extensions);
+            const fileType = extensions.find((e) => e.name === extension);
+            return {
+                name: node.name,
+                icon: fileType?.icon || 'fa-light fa-file',
+                type: 'File',
+                sections: [
+                    {
+                        title: 'Details',
+                        details: [
+                            {
+                                title: 'Description',
+                                content: node.description,
+                                icon: 'fa-solid fa-file-lines',
+                            },
+                            {
+                                title: 'Size',
+                                content: node.size || 0,
+                                format: 'filesize',
+                                icon: 'fa-solid fa-file-lines',
+                            },
+                            {
+                                title: 'Created at',
+                                content: node.createdAt || new Date(),
+                                format: 'datetime',
+                                icon: 'fa-solid fa-calendar-days',
+                            },
+                            {
+                                title: 'Modified at',
+                                content: node.modifiedAt || new Date(),
+                                format: 'datetime',
+                                icon: 'fa-solid fa-calendar-days',
+                            }
+                        ]
+                    }
+                ]
+            };
+        }
+        // If the node is a folder, return the folder info
+        else {
+            return {
+                name: node.name,
+                icon: 'fa-light fa-folder ax-text-yellow-500',
+                type: 'Folder',
+                sections: [
+                    {
+                        title: 'Details',
+                        details: [
+                            {
+                                title: 'Description',
+                                content: node.description,
+                                icon: 'fa-solid fa-file-lines',
+                            },
+                            {
+                                title: 'Items',
+                                content: node.childrenCount,
+                                icon: 'fa-solid fa-file-lines',
+                            },
+                            {
+                                title: 'Size',
+                                content: node.size || 0,
+                                format: 'filesize',
+                                icon: 'fa-solid fa-file-lines',
+                            },
+                            {
+                                title: 'Created at',
+                                content: node.createdAt || new Date(),
+                                format: 'datetime',
+                                icon: 'fa-solid fa-calendar-days',
+                            },
+                            {
+                                title: 'Modified at',
+                                content: node.modifiedAt || new Date(),
+                                format: 'datetime',
+                                icon: 'fa-solid fa-calendar-days',
+                            }
+                        ]
+                    }
+                ]
+            };
+        }
+    },
     sortItems(items) {
         const field = store.sortField();
         const direction = store.sortDirection();
@@ -3581,8 +3902,8 @@ const AXPDocumentExplorerViewModel = signalStore({ providedIn: 'root' }, withSta
                     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);
+                    const aDate = a.modifiedAt ? new Date(a.modifiedAt) : new Date(0);
+                    const bDate = b.modifiedAt ? new Date(b.modifiedAt) : new Date(0);
                     comparison = aDate.getTime() - bDate.getTime();
                     break;
                 case 'size':
@@ -3598,6 +3919,99 @@ const AXPDocumentExplorerViewModel = signalStore({ providedIn: 'root' }, withSta
             await this._load(currentFolder.id);
         }
     },
+    navigateToUp() {
+        const currentNode = store.currentNode();
+        const parentId = currentNode?.parentId;
+        if (parentId && currentNode) {
+            patchState(store, {
+                backHistory: [...store.backHistory(), { folderId: currentNode.id, path: store.currentPath() }],
+            });
+            patchState(store, { navigatingFolderId: parentId });
+            this.loadFolderContents(parentId);
+        }
+    },
+    async navigateBack() {
+        const history = store.backHistory();
+        if (history.length === 0) {
+            return;
+        }
+        const lastEntry = history[history.length - 1];
+        patchState(store, { backHistory: history.slice(0, history.length - 1) });
+        patchState(store, { navigatingFolderId: lastEntry.folderId });
+        await this.loadFolderContents(lastEntry.folderId);
+    },
+    async openFile(file) {
+        await driveService.openFile(file);
+    },
+    //TODO: Delete only one node at a time  
+    async deleteNodes(nodes = store.selectedNodes()) {
+        const result = await driveService.showDeleteNodesDialog(nodes);
+        if (result) {
+            this.deselectAll();
+            await this.refresh();
+        }
+    },
+    toggleSelect(node) {
+        if (store.selectionMode() === 'multiple') {
+            patchState(store, { selectedNodes: store.selectedNodes().includes(node) ? store.selectedNodes().filter(n => n.id !== node.id) : [...store.selectedNodes(), node] });
+        }
+        else {
+            patchState(store, { selectedNodes: [node] });
+        }
+        console.log(store.currentPath());
+    },
+    isItemSelected(node) {
+        return store.selectedNodes().some(selectedNode => selectedNode.id === node.id);
+    },
+    selectAll() {
+        patchState(store, { selectedNodes: [...store.folders(), ...store.files()] });
+    },
+    deselectAll() {
+        patchState(store, { selectedNodes: [] });
+    },
+    openDetailPanel() {
+        patchState(store, { detailPanel: true });
+    },
+    closeDetailPanel() {
+        patchState(store, { detailPanel: false });
+    },
+    toggleDetailPanel() {
+        patchState(store, { detailPanel: !store.detailPanel() });
+    },
+    //#region Menu Items
+    getFolderAddMenuItems() {
+        const scope = RootConfig.config.i18n;
+        return [
+            {
+                name: 'new-folder',
+                title: `t("actions.create-folder",{scope:"${scope}"})`,
+                icon: 'fa-light fa-folder-plus',
+                break: true,
+            },
+            {
+                name: 'upload-file',
+                title: `t("actions.upload-file",{scope:"${scope}"})`,
+                icon: 'fa-light fa-file-arrow-up',
+            },
+        ];
+    },
+    getFolderActionMenuItems() {
+        return [
+            {
+                name: 'refresh',
+                title: 'Refresh',
+                icon: 'fa-light fa-rotate-right',
+                break: true,
+            },
+            {
+                name: 'delete',
+                title: 'Delete',
+                color: 'danger',
+                icon: 'fa-light fa-trash',
+            },
+        ];
+    }
+    //#endregion
 })));
 
 class AXMDocumentExplorerComponent {
@@ -3607,21 +4021,51 @@ class AXMDocumentExplorerComponent {
         this.rootContextMenu = viewChild('rootContextMenu');
         this.driveService = inject(AXMDocumentManagerService);
         this.translateService = inject(AXTranslationService);
+        this.layout = inject(AXPLayoutThemeService);
+        this.browseMode = input('file');
+        this.viewMode = input();
+        this.selectionMode = input('none');
+        this.showContextMenu = input(true);
+        this.view = signal(null);
+        this.viewMap = {
+            list: async () => (await import('./acorex-modules-document-management-list-view.component-DjULM8Me.mjs')).AXMDocumentExplorerListViewComponent,
+            'small-tiles': async () => (await import('./acorex-modules-document-management-small-tiles-view.component-CXPXrH4g.mjs')).AXMDocumentExplorerSmallTilesViewComponent,
+            'large-tiles': async () => (await import('./acorex-modules-document-management-large-tiles-view.component-D9PFgzMQ.mjs')).AXMDocumentExplorerLargeTilesViewComponent,
+            details: async () => (await import('./acorex-modules-document-management-details-view.component-CZyOdjEl.mjs')).AXMDocumentExplorerDetailsViewComponent,
+            'large-icons': async () => (await import('./acorex-modules-document-management-large-icons-view.component-C5pB5bc2.mjs')).AXMDocumentExplorerLargeIconsViewComponent,
+            'small-icons': async () => (await import('./acorex-modules-document-management-small-icons-view.component-4M8c_1Dt.mjs')).AXMDocumentExplorerSmallIconsViewComponent,
+        };
         this.#effect = effect(() => {
             const navigatingFolderId = this.vm.loadingFolderId();
             if (!navigatingFolderId) {
                 setTimeout(() => {
                     this.contextMenu()?.refresh();
                     this.rootContextMenu()?.refresh();
-                }, 100);
+                }, 300);
+            }
+        });
+        this.#effect2 = effect(() => {
+            if (this.viewMode()) {
+                this.vm.setViewMode(this.viewMode());
+            }
+            if (this.selectionMode()) {
+                this.vm.setSelectionMode(this.selectionMode());
             }
         });
+        this.#effect3 = effect(async () => {
+            const func = get$1(this.viewMap, this.vm.viewMode()) ?? this.viewMap['large-tiles'];
+            const comp = await func();
+            this.view.set(comp);
+        });
     }
     #effect;
+    #effect2;
+    #effect3;
     handleNavigateToFolder(folderId) {
         this.vm.navigateToFolder(folderId);
+        console.log(this.vm.currentFolder());
     }
-    // Context Menu Handlers
+    //#region Menu and Context Menu
     async handleContextMenuOnOpening(e) {
         const node = get$1(e.targetElement, '__data__');
         if (!node) {
@@ -3688,6 +4132,20 @@ class AXMDocumentExplorerComponent {
             ],
             break: true,
         };
+        const openWith = {
+            name: 'open-with',
+            text: 'Open with',
+            icon: 'fa-light fa-circle-info',
+            items: [
+                {
+                    name: 'open-gallery',
+                    text: 'Gallery',
+                    icon: 'fa-light fa-images',
+                    data: node,
+                },
+            ],
+            break: true,
+        };
         e.items = [
             ...open,
             {
@@ -3741,35 +4199,16 @@ class AXMDocumentExplorerComponent {
                 data: node,
             },
         ];
+        if (node.type == 'file') {
+            e.items.splice(1, 0, openWith);
+        }
     }
     handleContextMenuRootOnOpening(e) {
         //TODO: check async translate method in acorex
-        const scope = RootConfig.config.i18n;
-        e.items = [
-            {
-                name: 'new-folder',
-                text: this.translateService.translateSync('actions.create-folder', { scope }),
-                icon: 'fa-light fa-folder-plus',
-            },
-            {
-                name: 'upload-file',
-                text: this.translateService.translateSync('actions.upload-file', { scope }),
-                icon: 'fa-light fa-file-arrow-up',
-                break: true,
-            },
-            {
-                name: 'refresh',
-                text: 'Refresh',
-                icon: 'fa-light fa-rotate-right',
-                break: true,
-            },
-            {
-                name: 'delete',
-                text: 'Delete',
-                color: 'danger',
-                icon: 'fa-light fa-trash',
-            },
-        ];
+        e.items = [...this.vm.getFolderAddMenuItems(), ...this.vm.getFolderActionMenuItems()].map(m => ({
+            ...m,
+            text: `t("${m.name}")`,
+        }));
     }
     async handleContextMenuItemClick(e) {
         const node = e.item.data;
@@ -3777,6 +4216,15 @@ class AXMDocumentExplorerComponent {
             case 'open-folder':
                 this.handleNavigateToFolder(node.id);
                 break;
+            case 'open-file':
+                this.openFile(node);
+                break;
+            case 'open-gallery':
+                this.openGallery(node);
+                break;
+            case 'download':
+                this.handleDownloadFile(node);
+                break;
             case 'new-folder':
                 await this.createFolder(node);
                 // Handle new folder creation
@@ -3787,32 +4235,45 @@ class AXMDocumentExplorerComponent {
             case 'paste':
                 // Handle paste operation
                 break;
+            case 'move-to':
+                this.moveTo(node);
+                break;
+            case 'copy-to':
+                this.copyTo(node);
+                break;
             case 'rename':
                 this.renameNode(node);
                 break;
             case 'delete':
-                this.deleteNode(node);
+                this.vm.deleteNodes([node]);
                 break;
             case 'refresh':
                 this.vm.refresh();
                 break;
+            case 'copy':
+                this.makeCopy(node);
+                break;
         }
     }
+    //#endregion 
+    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();
             }
         }
     }
-    async deleteNode(node) {
-        if (node) {
-            await this.driveService.showDeleteNodesDialog([node.id]);
-            await this.vm.refresh();
-        }
-    }
     async renameNode(node) {
         if (node) {
             const result = await this.driveService.rename(node);
@@ -3824,18 +4285,49 @@ class AXMDocumentExplorerComponent {
     async uploadFile(node) {
         const folderId = node?.id ?? this.vm.currentFolder()?.id;
         if (folderId) {
-            // const result = await this.driveService.showCreateFolderDialog(this.vm.currentFolder()?.id);
-            // if (result) {
-            //   await this.vm.refresh();
-            // }
+            const res = await this.driveService.uploadFile(folderId);
+            if (res) {
+                await this.vm.refresh();
+            }
+        }
+    }
+    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 moveTo(node) {
+        if (node) {
+            const result = await this.driveService.moveTo({ browseMode: 'folder', node: node });
+            if (result) {
+                await this.vm.refresh();
+            }
+        }
+    }
+    async copyTo(node) {
+        if (node) {
+            const result = await this.driveService.copyTo({ browseMode: 'folder', node: node });
+            if (result) {
+                await this.vm.refresh();
+            }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentExplorerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMDocumentExplorerComponent, isStandalone: true, selector: "axm-document-explorer", viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["itemsContextMenu"], descendants: true, isSignal: true }, { propertyName: "rootContextMenu", first: true, predicate: ["rootContextMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Content -->\n<div class=\"content\">\n  <!-- Empty State -->\n  @if (vm.folders().length === 0 && vm.files().length === 0) {\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-16 ax-h-full\">\n    <ax-icon icon=\"fa-light fa-folder-open\" class=\"ax-text-6xl ax-mb-4\"></ax-icon>\n    <h3 class=\"ax-text-xl ax-font-medium ax-mb-2\">No Items Found</h3>\n    <p class=\"\">This folder is empty. Add some files or folders to get started.</p>\n  </div>\n  } @else {\n  <!-- Grid View -->\n  @if (vm.isGridView()) {\n  <!-- Folders Section -->\n  @if (vm.folders().length > 0) {\n  <div class=\"section\">\n    <h3 class=\"section-title\">Folders</h3>\n    <div class=\"items-grid\">\n      @for (folder of vm.folders(); track folder.id) {\n      <ng-container [ngTemplateOutlet]=\"gridFolderTemplate\" [ngTemplateOutletContext]=\"{ $implicit: folder }\">\n      </ng-container>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Files Section -->\n  @if (vm.files().length > 0) {\n  <div class=\"section\">\n    <h3 class=\"section-title\">Files</h3>\n    <div class=\"items-grid\">\n      @for (file of vm.files(); track file.id) {\n      <ng-container [ngTemplateOutlet]=\"gridFileTemplate\" [ngTemplateOutletContext]=\"{ $implicit: file }\">\n      </ng-container>\n      }\n    </div>\n  </div>\n  }\n  <!-- Grid View End -->\n  }\n\n  <!-- List View -->\n  @if (vm.isListView()) {\n  <div class=\"list-view\">\n    <table class=\"items-table\">\n      <thead>\n        <tr>\n          <th class=\"name-column\">Name</th>\n          <th class=\"type-column\">Type</th>\n          <th class=\"size-column\">Size</th>\n          <th class=\"date-column\">Last Modified</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (folder of vm.folders(); track folder.id) {\n        <ng-container [ngTemplateOutlet]=\"listFolderTemplate\" [ngTemplateOutletContext]=\"{ $implicit: folder }\">\n        </ng-container>\n        } @for (file of vm.files(); track file.id) {\n        <ng-container [ngTemplateOutlet]=\"listFileTemplate\" [ngTemplateOutletContext]=\"{ $implicit: file }\">\n        </ng-container>\n        }\n      </tbody>\n    </table>\n  </div>\n  } }\n</div>\n\n<!-- Grid View Templates -->\n<ng-template #gridFolderTemplate let-folder>\n  <div class=\"ax-group ax-cursor-pointer axp-explorer-item\" [axp-data]=\"folder\"\n    (dblclick)=\"handleNavigateToFolder(folder.id)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-p-4 ax-rounded-lg ax-border ax-lighter-surface\">\n      <div class=\"ax-text-yellow-400  fa-3x ax-mb-2\" style=\"--fa-animation-duration: 2s\">\n        @if (vm.isLoadingFolder(folder.id)) {\n        <ng-container [ngTemplateOutlet]=\"folderLoading\"> </ng-container>\n        } @else {\n        <ax-icon icon=\"fa-solid fa-folder-closed \"></ax-icon>\n        }\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-font-semibold ax-w-full\">\n        <span class=\"ax-text-sm ax-truncate  ax-text-start\">{{ folder.name }}</span>\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-w-full ax-font-semibold ax-opacity-65\">\n        <span class=\"ax-text-xs ax-text-neutral\">15 items</span>\n        <span class=\"ax-text-xs ax-text-neutral\">{{ folder.lastModified | format : 'datetime' : { format: 'datetime' } |\n          async }}</span>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #gridFileTemplate let-file>\n  @let fileInfo = vm.getFileInfo(file.name);\n  <div class=\"ax-group ax-cursor-pointer axp-explorer-item\" [axp-data]=\"file\"\n    (dblclick)=\"handleNavigateToFolder(file.id)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-p-4 ax-rounded-lg ax-border ax-lighter-surface\">\n      <div class=\"ax-text-yellow-400  fa-3x ax-mb-2\" style=\"--fa-animation-duration: 2s\">\n        <i class=\"fa-fw  {{ fileInfo.icon }} fa-solid\"></i>\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-font-semibold ax-w-full\">\n        <span class=\"ax-text-sm ax-truncate  ax-text-start\">{{ file.name }}</span>\n      </div>\n      <div class=\"ax-flex ax-justify-between ax-w-full ax-font-semibold ax-opacity-65\">\n        <span class=\"ax-text-xs ax-text-neutral\">{{ file.size | format : 'filesize' | async }}</span>\n        <span class=\"ax-text-xs ax-text-neutral\">{{ file.lastModified | format : 'datetime' : { format: 'datetime' } |\n          async }}</span>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- List View Templates -->\n<ng-template #listFolderTemplate let-folder>\n  <tr class=\"folder-row\" (dblclick)=\"handleNavigateToFolder(folder.id)\">\n    <td class=\"name-column axp-explorer-item\" [axp-data]=\"folder\">\n      <div class=\"item-name\">\n        @if (vm.isLoadingFolder(folder.id)) {\n        <ng-container [ngTemplateOutlet]=\"folderLoading\"> </ng-container>\n        } @else {\n        <i class=\"fas fa-folder-closed\"></i>\n        }\n        <span>{{ folder.name }}</span>\n      </div>\n    </td>\n    <td class=\"type-column axp-explorer-item\" [axp-data]=\"folder\">Folder</td>\n    <td class=\"size-column axp-explorer-item\" [axp-data]=\"folder\">{{ folder.size | format : 'filesize' | async }}</td>\n    <td class=\"date-column axp-explorer-item\" [axp-data]=\"folder\">\n      {{ folder.lastModified | format : 'datetime' : { format: 'datetime' } | async }}\n    </td>\n  </tr>\n</ng-template>\n\n<ng-template #listFileTemplate let-file>\n  <tr class=\"file-row\">\n    @let fileInfo = vm.getFileInfo(file.name);\n    <td class=\"name-column axp-explorer-item\" [axp-data]=\"file\">\n      <div class=\"item-name hover:ax-underline\">\n        <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n        <span>{{ file.name }}</span>\n      </div>\n    </td>\n    <td class=\"type-column axp-explorer-item\" [axp-data]=\"file\">{{ fileInfo.type }}</td>\n    <td class=\"size-column axp-explorer-item\" [axp-data]=\"file\">{{ file.size | format : 'filesize' | async }}</td>\n    <td class=\"date-column axp-explorer-item\" [axp-data]=\"file\">\n      {{ file.lastModified | format : 'datetime' : { format: 'datetime' } | async }}\n    </td>\n  </tr>\n</ng-template>\n\n<ng-template #folderLoading>\n  <i class=\"fa-light fa-spinner fa-spin-pulse ax-text-2xl\"></i>\n</ng-template>\n\n<!-- Context Menu-->\n<ax-context-menu #itemsContextMenu [target]=\"'.axp-explorer-item'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\" (onOpening)=\"handleContextMenuOnOpening($event)\">\n</ax-context-menu>\n\n<ax-context-menu #rootContextMenu [target]=\"'axm-document-explorer'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\" (onOpening)=\"handleContextMenuRootOnOpening($event)\">\n</ax-context-menu>", styles: [":host{display:flex;height:100%;flex:1 1 0%;flex-direction:column;gap:1rem}:host .content{flex:1 1 0%;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;overflow-y:auto}:host .content .loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}:host .content .loading-state i{font-size:1.5rem;line-height:2rem}:host .content .section{margin-bottom:2rem}:host .content .section:last-child{margin-bottom:0}:host .content .section .section-title{margin-bottom:1rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}:host .content .section .items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}:host .content .list-view .items-table{width:100%;border-collapse:collapse}:host .content .list-view .items-table th{border-bottom-width:1px;padding:.75rem;text-align:start;font-weight:500;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host .content .list-view .items-table th.name-column{width:50%}:host .content .list-view .items-table th.type-column{width:20%}:host .content .list-view .items-table th.size-column{width:15%}:host .content .list-view .items-table th.date-column{width:15%}:host .content .list-view .items-table td{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1));padding:.75rem}:host .content .list-view .items-table td.name-column .item-name{display:flex;align-items:center;gap:.5rem}:host .content .list-view .items-table td.name-column .item-name i{font-size:1.25rem;line-height:1.75rem}:host .content .list-view .items-table tr{cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .content .list-view .items-table tr:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}:host .content .list-view .items-table tr.folder-row td .item-name i{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i3.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i4.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "directive", type: AXPElementDataDirective, selector: "[axp-data]", inputs: ["axp-data", "axp-data-path"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMDocumentExplorerComponent, isStandalone: true, selector: "axm-document-explorer", inputs: { browseMode: { classPropertyName: "browseMode", publicName: "browseMode", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, showContextMenu: { classPropertyName: "showContextMenu", publicName: "showContextMenu", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["itemsContextMenu"], descendants: true, isSignal: true }, { propertyName: "rootContextMenu", first: true, predicate: ["rootContextMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Empty State -->\n<div class=\"view-container\">\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  <ng-container [ngComponentOutlet]=\"view()\"></ng-container>\n  }\n</div>\n\n<!-- Context Menu -->\n@if (showContextMenu()) {\n<!-- Item Context Menu-->\n<ax-context-menu\n  #itemsContextMenu\n  [target]=\"'.__explorer-item'\"\n  [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\"\n  (onOpening)=\"handleContextMenuOnOpening($event)\"\n>\n</ax-context-menu>\n<!-- Root Context Menu-->\n<ax-context-menu\n  #rootContextMenu\n  [target]=\"'.view-container'\"\n  [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\"\n  (onOpening)=\"handleContextMenuRootOnOpening($event)\"\n>\n</ax-context-menu>\n}\n", styles: ["axm-document-explorer{display:flex;height:100%;width:100%;flex-direction:row;gap:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}axm-document-explorer>.view-container{display:flex;flex:1 1 0%;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;flex-direction:column;gap:1rem}axm-document-explorer .animation-duration-2s{--fa-animation-duration: 2s}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i3$1.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentExplorerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-document-explorer', standalone: true, imports: [
+            args: [{ selector: 'axm-document-explorer', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
                         RouterModule,
                         AXDecoratorModule,
@@ -3843,23 +4335,167 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXFormatModule,
                         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: "<!-- Empty State -->\n<div class=\"view-container\">\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  <ng-container [ngComponentOutlet]=\"view()\"></ng-container>\n  }\n</div>\n\n<!-- Context Menu -->\n@if (showContextMenu()) {\n<!-- Item Context Menu-->\n<ax-context-menu\n  #itemsContextMenu\n  [target]=\"'.__explorer-item'\"\n  [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\"\n  (onOpening)=\"handleContextMenuOnOpening($event)\"\n>\n</ax-context-menu>\n<!-- Root Context Menu-->\n<ax-context-menu\n  #rootContextMenu\n  [target]=\"'.view-container'\"\n  [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\"\n  (onOpening)=\"handleContextMenuRootOnOpening($event)\"\n>\n</ax-context-menu>\n}\n", styles: ["axm-document-explorer{display:flex;height:100%;width:100%;flex-direction:row;gap:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}axm-document-explorer>.view-container{display:flex;flex:1 1 0%;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;flex-direction:column;gap:1rem}axm-document-explorer .animation-duration-2s{--fa-animation-duration: 2s}\n"] }]
+        }] });
+
+class AXMChooseDocumentTypeComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        this.documentTypeService = inject(AXMDocumentTypeService);
+        this.fileTypeService = inject(AXPFileTypeProviderService);
+        this.documentTypeSelected = signal([]);
+        this.context = signal({});
+        this.documentTypesSource = new AXDataSource({
+            load: async (_) => {
+                return await this.documentTypeService.query();
+            },
+            pageSize: 10,
+            key: 'id',
+        });
+        this.uploadNode = signal({
+            name: 'upload',
+            path: 'upload',
+            type: 'file',
+            options: {
+                accept: '.pdf',
+                multiple: false,
+            },
+        });
+    }
+    async handleChangeDocumentType(event) {
+        const item = event.component.selectedItems[0];
+        this.uploadNode.update((old) => {
+            return {
+                ...old,
+                options: {
+                    multiple: item.isMultiple,
+                    accept: item.name == 'any' ? '' : item.type.selectedItems.map((i) => `.${i.name.split('.')[1]}`).join(','),
+                },
+            };
+        });
+        for (const i of item.meta) {
+            console.log(JSON.parse(i.interface)['children'][0]);
+            if (!get(i, '__node__')) {
+                set$1(i, '__node__', typeof i.interface == 'function' ? await i.interface() :
+                    JSON.parse(i.interface)['children'][0]['children'][0]);
+            }
+        }
+        this.documentTypeSelected.set([item]);
+    }
+    handleContextChanged(e) {
+        this.context.set(e.data);
+    }
+    handleCancel() {
+        this.close();
+    }
+    handlesubmit() {
+        this.close({
+            documentType: this.documentTypeSelected(),
+            context: this.context(),
+        });
+    }
+    getNode(meta) {
+        console.log(meta);
+        return get(meta, '__node__');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMChooseDocumentTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMChooseDocumentTypeComponent, isStandalone: true, selector: "axm-choose-document-type", usesInheritance: true, ngImport: i0, template: "<ax-header> </ax-header>\n<ax-content>\n  <div class=\"ax-flex ax-flex-col ax-py-4 ax-px-6\">\n    <ax-label> Select Document Type </ax-label>\n    <ax-select-box\n      [dataSource]=\"documentTypesSource\"\n      textField=\"title\"\n      valueField=\"id\"\n      (onValueChanged)=\"handleChangeDocumentType($event)\"\n    >\n    </ax-select-box>\n    @if (documentTypeSelected().length > 0) {\n      <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChanged($event)\">\n      <ax-form>\n        @for(doc of documentTypeSelected()[0].meta; track doc.name) {\n          <ax-form-field>\n            <ax-label >{{ doc.title }}</ax-label>\n            <ng-container axp-widget-renderer [node]=\"getNode(doc)\" [mode]=\"'edit'\"></ng-container>\n          </ax-form-field>\n        }\n\n        <ng-container axp-widget-renderer [node]=\"uploadNode()\" mode=\"edit\"></ng-container>\n\n      </ax-form>\n    </axp-widgets-container>\n    }\n  </div>\n</ax-content>\n<ax-footer>\n  <ax-suffix>\n    <ax-button text=\"Cancel\" look=\"blank\" (onClick)=\"handleCancel()\"> </ax-button>\n    <ax-button text=\"Next\" (onClick)=\"handlesubmit()\"> </ax-button>\n  </ax-suffix>\n</ax-footer>\n", dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.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: AXFormModule }, { kind: "component", type: i7.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i7.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i6.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMChooseDocumentTypeComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'axm-choose-document-type', imports: [AXButtonModule, AXDecoratorModule, AXFormModule, AXLabelModule, AXSelectBoxModule, AXPLayoutBuilderModule], template: "<ax-header> </ax-header>\n<ax-content>\n  <div class=\"ax-flex ax-flex-col ax-py-4 ax-px-6\">\n    <ax-label> Select Document Type </ax-label>\n    <ax-select-box\n      [dataSource]=\"documentTypesSource\"\n      textField=\"title\"\n      valueField=\"id\"\n      (onValueChanged)=\"handleChangeDocumentType($event)\"\n    >\n    </ax-select-box>\n    @if (documentTypeSelected().length > 0) {\n      <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChanged($event)\">\n      <ax-form>\n        @for(doc of documentTypeSelected()[0].meta; track doc.name) {\n          <ax-form-field>\n            <ax-label >{{ doc.title }}</ax-label>\n            <ng-container axp-widget-renderer [node]=\"getNode(doc)\" [mode]=\"'edit'\"></ng-container>\n          </ax-form-field>\n        }\n\n        <ng-container axp-widget-renderer [node]=\"uploadNode()\" mode=\"edit\"></ng-container>\n\n      </ax-form>\n    </axp-widgets-container>\n    }\n  </div>\n</ax-content>\n<ax-footer>\n  <ax-suffix>\n    <ax-button text=\"Cancel\" look=\"blank\" (onClick)=\"handleCancel()\"> </ax-button>\n    <ax-button text=\"Next\" (onClick)=\"handlesubmit()\"> </ax-button>\n  </ax-suffix>\n</ax-footer>\n" }]
+        }] });
+
+class AXMFileViewerPopupComponent extends AXBasePageComponent {
+    onClose() {
+        this.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFileViewerPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXMFileViewerPopupComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div>\n  <ax-content>\n    <ax-media-viewer-container #c [dataArray]=\"nodes\">\n      <ax-header>\n        <ax-file-info></ax-file-info>\n      </ax-header>\n\n      <ax-prefix>\n        <ax-button (click)=\"c.next()\">\n          <ax-icon class=\"ax-icon ax-icon-chevron-right\"> </ax-icon>\n        </ax-button>\n      </ax-prefix>\n\n      <ax-suffix>\n        <ax-button (click)=\"c.prev()\">\n          <ax-icon class=\"ax-icon ax-icon-chevron-left\"> </ax-icon>\n        </ax-button>\n      </ax-suffix>\n    </ax-media-viewer-container>\n  </ax-content>\n\n  <ax-footer>\n    <ax-suffix>\n      <ax-button [text]=\"'close'\" (click)=\"onClose()\" />\n    </ax-suffix>\n  </ax-footer>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXMediaViewerModule }, { kind: "component", type: i3$2.AXMediaViewerContainerComponent, selector: "ax-media-viewer-container", inputs: ["dataArray", "thumbnail"] }, { kind: "component", type: i3$2.AXFileInfoComponent, selector: "ax-file-info" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFileViewerPopupComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXDecoratorModule, AXButtonModule, AXMediaViewerModule], template: "<div>\n  <ax-content>\n    <ax-media-viewer-container #c [dataArray]=\"nodes\">\n      <ax-header>\n        <ax-file-info></ax-file-info>\n      </ax-header>\n\n      <ax-prefix>\n        <ax-button (click)=\"c.next()\">\n          <ax-icon class=\"ax-icon ax-icon-chevron-right\"> </ax-icon>\n        </ax-button>\n      </ax-prefix>\n\n      <ax-suffix>\n        <ax-button (click)=\"c.prev()\">\n          <ax-icon class=\"ax-icon ax-icon-chevron-left\"> </ax-icon>\n        </ax-button>\n      </ax-suffix>\n    </ax-media-viewer-container>\n  </ax-content>\n\n  <ax-footer>\n    <ax-suffix>\n      <ax-button [text]=\"'close'\" (click)=\"onClose()\" />\n    </ax-suffix>\n  </ax-footer>\n</div>\n" }]
+        }] });
+
+var fileViewerPopup_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXMFileViewerPopupComponent: AXMFileViewerPopupComponent
+});
+
+class AXMFolderPathBreadcrumbsComponent {
+    constructor() {
+        this.vm = inject(AXPDocumentExplorerViewModel);
+        this.layout = inject(AXPLayoutThemeService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFolderPathBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMFolderPathBreadcrumbsComponent, isStandalone: true, selector: "axm-folder-path-breadcrumbs", ngImport: i0, template: "<!-- Breadcrumbs Section -->\n<div class=\"__breadcrumb ax-xs\">\n  <!-- Desktop Breadcrumb -->\n  @for (item of vm.currentPath(); track item.id; let i = $index;let last = $last) {\n  <!-- Navigation Button -->\n  <ax-button look=\"blank\" (onClick)=\"vm.navigateToFolder(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=\"far fa-chevron-right rtl:ax-rotate-180 fa-fw fa-xs ax-me-2\"></i>\n  }\n  <!-- End Navigation Button -->\n  }\n</div>\n", styles: [":host{display:flex;width:100%;align-items:center}:host .__nav{display:flex;flex-direction:row;align-items:center;gap:.25rem;border-inline-end-width:1px;padding-inline-start:.25rem;padding-inline-end:.5rem}:host .__breadcrumb{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;padding-inline-start:.5rem;padding-inline-end:.25rem}:host .__breadcrumb .ax-state-disabled button,:host .__breadcrumb .ax-state-loading button{cursor:default!important}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFolderPathBreadcrumbsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-folder-path-breadcrumbs', standalone: true, imports: [
+                        AXButtonModule,
+                        AXDecoratorModule,
+                    ], template: "<!-- Breadcrumbs Section -->\n<div class=\"__breadcrumb ax-xs\">\n  <!-- Desktop Breadcrumb -->\n  @for (item of vm.currentPath(); track item.id; let i = $index;let last = $last) {\n  <!-- Navigation Button -->\n  <ax-button look=\"blank\" (onClick)=\"vm.navigateToFolder(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=\"far fa-chevron-right rtl:ax-rotate-180 fa-fw fa-xs ax-me-2\"></i>\n  }\n  <!-- End Navigation Button -->\n  }\n</div>\n", styles: [":host{display:flex;width:100%;align-items:center}:host .__nav{display:flex;flex-direction:row;align-items:center;gap:.25rem;border-inline-end-width:1px;padding-inline-start:.25rem;padding-inline-end:.5rem}:host .__breadcrumb{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;padding-inline-start:.5rem;padding-inline-end:.25rem}:host .__breadcrumb .ax-state-disabled button,:host .__breadcrumb .ax-state-loading button{cursor:default!important}\n"] }]
         }] });
 
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXMChooseDocumentTypeComponent: AXMChooseDocumentTypeComponent,
+    AXMFileViewerPopupComponent: AXMFileViewerPopupComponent,
+    AXMFolderPathBreadcrumbsComponent: AXMFolderPathBreadcrumbsComponent
+});
+
 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({ browseMode: 'file' });
+        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", inputs: ["browseMode", "viewMode", "selectionMode", "showContextMenu"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i2$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: i3$3.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({
@@ -3956,22 +4592,103 @@ const AXMDocumentAttachmentWidget = {
     },
 };
 
+class AXMCheckDocumentTypeWorkflowAction extends AXPWorkflowAction {
+    async execute(context) {
+        const documentType = context.getVariable('documentType');
+        if (documentType) {
+            context.setOutput('need-choose-document-type', false);
+        }
+        else {
+            context.setOutput('need-choose-document-type', true);
+        }
+    }
+}
+class AXMChooseDocumentTypeWorkflowAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.popupService = inject(AXPopupService);
+    }
+    async execute(context) {
+        const comp = (await Promise.resolve().then(function () { return index; })).AXMChooseDocumentTypeComponent;
+        const result = await this.popupService.open(comp);
+        if (result.data != null && result.data.documentTypeId != null) {
+            context.setVariable('documentTypeId', result.data.documentTypeId);
+            context.setOutput('isCanceled', false);
+        }
+        else {
+            context.setOutput('isCanceled', true);
+        }
+    }
+}
+class AXMChooseFileWorkflowAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.documentTypeService = inject(AXMDocumentTypeService);
+        this.uploadService = inject(AXUploaderService);
+    }
+    async execute(context) {
+        var doc = context.getVariable('documentType');
+        if (!doc) {
+            const docId = context.getVariable('documentTypeId');
+            doc = await this.documentTypeService.getOne(docId);
+        }
+        this.uploadService.browse({
+            //accept: doc.type,
+            multiple: doc.isMultiple,
+        });
+    }
+}
+const AXMUploadWorkflow = {
+    startStepId: 'check-document-type',
+    steps: {
+        'check-document-type': {
+            action: 'AXMCheckDocumentTypeWorkflowAction',
+            nextSteps: [
+                {
+                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("need-choose-document-type") == true' }],
+                    nextStepId: 'choose-document-type',
+                },
+            ],
+        },
+        'choose-document-type': {
+            action: 'AXMChooseDocumentTypeWorkflowAction',
+            nextSteps: [
+                {
+                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("isCanceled") == false' }],
+                    nextStepId: 'file-browser',
+                },
+            ],
+        },
+        'file-browser': {
+            action: 'AXMChooseFileWorkflowAction',
+            nextSteps: [
+                {
+                    conditions: [],
+                    nextStepId: 'dispatch-event',
+                },
+            ],
+        },
+    },
+};
+
 function routesFacory() {
     const config = inject(AXP_ENTITY_CONFIG_TOKEN);
     const routes = [
         {
             path: ':app/drive/:scope',
-            component: config.viewers.root(),
+            loadComponent: () => {
+                return config.viewers.root();
+            },
             canActivate: [AXPAuthGuard],
             data: { reuse: true },
             children: [
                 {
                     path: '',
-                    loadComponent: () => import('./acorex-modules-document-management-drive.component-Sz198sA6.mjs').then((c) => c.AXMDocumentDriveComponent),
+                    loadComponent: () => import('./acorex-modules-document-management-drive.component-CZR-optD.mjs').then((c) => c.AXMDocumentDriveComponent),
                 },
                 {
                     path: ':id',
-                    loadComponent: () => import('./acorex-modules-document-management-drive.component-Sz198sA6.mjs').then((c) => c.AXMDocumentDriveComponent),
+                    loadComponent: () => import('./acorex-modules-document-management-drive.component-CZR-optD.mjs').then((c) => c.AXMDocumentDriveComponent),
                 },
             ],
         },
@@ -3984,7 +4701,7 @@ class AXMDocumentManagementModule {
             AXMDocumentManagementDocumentTypeMetaValueEntityModule,
             AXMDocumentManagementDocumentTypeMetaDefinitionEntityModule,
             AXMDocumentManagementDocumentTypeEntityModule,
-            AXMDocumentManagementDocumentEntityModule, i6.AXPLayoutBuilderModule, AXMFileTypeModule] }); }
+            AXMDocumentManagementDocumentEntityModule, i6.AXPLayoutBuilderModule, AXMFileTypeModule, i3$2.AXMediaViewerModule, i3$4.AXPWorkflowModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentManagementModule, providers: [
             {
                 provide: AXMFolderService,
@@ -4028,7 +4745,18 @@ class AXMDocumentManagementModule {
             AXPLayoutBuilderModule.forChild({
                 widgets: [AXmFileTypeExtensionWidget, AXMDocumentAttachmentWidget],
             }),
-            AXMFileTypeModule] }); }
+            AXMFileTypeModule,
+            AXMediaViewerModule.forRoot(),
+            AXPWorkflowModule.forChild({
+                actions: {
+                    AXMCheckDocumentTypeWorkflowAction,
+                    AXMChooseDocumentTypeWorkflowAction,
+                    AXMChooseFileWorkflowAction,
+                },
+                workflows: {
+                    'upload-document': AXMUploadWorkflow,
+                },
+            })] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentManagementModule, decorators: [{
             type: NgModule,
@@ -4043,6 +4771,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             widgets: [AXmFileTypeExtensionWidget, AXMDocumentAttachmentWidget],
                         }),
                         AXMFileTypeModule,
+                        AXMediaViewerModule.forRoot(),
+                        AXPWorkflowModule.forChild({
+                            actions: {
+                                AXMCheckDocumentTypeWorkflowAction,
+                                AXMChooseDocumentTypeWorkflowAction,
+                                AXMChooseFileWorkflowAction,
+                            },
+                            workflows: {
+                                'upload-document': AXMUploadWorkflow,
+                            },
+                        }),
                     ],
                     exports: [],
                     providers: [
@@ -4088,5 +4827,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXMDocumentManagerService as A, AXMFolderServiceImpl as B, AXMEntityProvider as C, AXMMenuProvider as D, AXMSearchCommandProvider as E, AXMSettingProvider as F, RootConfig as R, AXPDocumentExplorerViewModel as a, AXMDocumentExplorerComponent as b, AXMDriveScope as c, AXMDocumentManagementModule as d, documentFactory as e, AXMDocumentManagementDocumentEntityModule as f, AXMDocumentService as g, AXMDocumentServiceImpl as h, documentTypeFactory as i, AXMDocumentManagementDocumentTypeEntityModule as j, AXMDocumentManagementDocumentTypeEntityService as k, AXMDocumentManagementDocumentTypeEntityServiceImpl as l, documentTypeMetaDefinitionfactory as m, AXMDocumentManagementDocumentTypeMetaDefinitionEntityModule as n, AXMDocumentManagementDocumentTypeMetaDefinitionEntityService as o, AXMDocumentManagementDocumentTypeMetaDefinitionEntityServiceImpl as p, documentTypeMetaValueFactory as q, AXMDocumentManagementDocumentTypeMetaValueEntityModule as r, AXMDocumentManagementDocumentTypeMetaValueEntityService as s, AXMDocumentManagementDocumentTypeMetaValueEntityServiceImpl as t, documentTypeStatusDefinitionFactory as u, AXMDocumentManagementDocumentTypeStatusDefinitionEntityModule as v, AXMDocumentManagementDocumentTypeStatusDefinitionEntityService as w, AXMDocumentManagementDocumentTypeStatusDefinitionEntityServiceImpl as x, folderFactory as y, AXMFolderService as z };
-//# sourceMappingURL=acorex-modules-document-management-acorex-modules-document-management-C9ZCejjs.mjs.map
+export { AXPDocumentExplorerViewModel as A, AXMFolderService as B, AXMFolderServiceImpl as C, AXMEntityProvider as D, AXMMenuProvider as E, AXMSearchCommandProvider as F, AXMSettingProvider as G, RootConfig as R, AXMDocumentManagerService as a, AXMDocumentExplorerComponent as b, AXMDriveScope as c, AXMFolderPathBreadcrumbsComponent as d, AXMDocumentManagementModule as e, documentFactory as f, AXMDocumentManagementDocumentEntityModule as g, AXMDocumentService as h, AXMDocumentServiceImpl as i, documentTypeFactory as j, AXMDocumentManagementDocumentTypeEntityModule as k, AXMDocumentTypeService as l, AXMDocumentManagementDocumentTypeEntityServiceImpl as m, documentTypeMetaDefinitionfactory as n, AXMDocumentManagementDocumentTypeMetaDefinitionEntityModule as o, AXMDocumentManagementDocumentTypeMetaDefinitionEntityService as p, AXMDocumentManagementDocumentTypeMetaDefinitionEntityServiceImpl as q, documentTypeMetaValueFactory as r, AXMDocumentManagementDocumentTypeMetaValueEntityModule as s, AXMDocumentManagementDocumentTypeMetaValueEntityService as t, AXMDocumentManagementDocumentTypeMetaValueEntityServiceImpl as u, documentTypeStatusDefinitionFactory as v, AXMDocumentManagementDocumentTypeStatusDefinitionEntityModule as w, AXMDocumentManagementDocumentTypeStatusDefinitionEntityService as x, AXMDocumentManagementDocumentTypeStatusDefinitionEntityServiceImpl as y, folderFactory as z };
+//# sourceMappingURL=acorex-modules-document-management-acorex-modules-document-management-CpoLrul7.mjs.map