@acorex/modules 19.2.17 → 19.2.20

package/fesm2022/acorex-modules-document-management-drive.component-B3BCzdVv.mjs

@@ -0,0 +1,305 @@
+import * as i0 from '@angular/core';
+import { inject, ViewEncapsulation, Component, signal, computed, viewChild, effect, untracked, HostListener, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { AXBadgeModule } from '@acorex/components/badge';
+import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
+import * as i2$1 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXButtonGroupModule } from '@acorex/components/button-group';
+import * as i3 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i2$2 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import { AXLoadingModule } from '@acorex/components/loading';
+import { AXMenuModule } from '@acorex/components/menu';
+import * as i3$1 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+import { AXPBasePageComponent, AXPPageLayoutComponent, AXPBasePage } from '@acorex/platform/themes/default';
+import * as i5 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import { AXDateTimeModule } from '@acorex/core/date-time';
+import { AXFileModule } from '@acorex/core/file';
+import * as i2 from '@acorex/core/format';
+import { AXFormatModule } from '@acorex/core/format';
+import { AXPFileTypeProviderService } from '@acorex/platform/common';
+import { AXPThemeLayoutBlockComponent } from '@acorex/platform/themes/shared';
+import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import { A as AXPDocumentExplorerViewModel, R as RootConfig, a as AXMDocumentManagerService, b as AXMDocumentExplorerComponent, c as AXMDriveScope, d as AXMFolderPathBreadcrumbsComponent } from './acorex-modules-document-management-acorex-modules-document-management-_BOVaDOq.mjs';
+
+class AXMDocumentExplorerDetailPanelComponent {
+    constructor() {
+        this.vm = inject(AXPDocumentExplorerViewModel);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentExplorerDetailPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMDocumentExplorerDetailPanelComponent, isStandalone: true, selector: "axm-document-explorer-detail-panel", ngImport: i0, template: "<!--  Multiple Selected  -->\n@if(vm.hasMultipleSelectedItems()) {\n<div class=\"__header\" *translate=\"let t\">\n  <div class=\"__title\">\n    <i class=\"fa-fw fa-lg fa-solid\"></i>\n    <span> {{ vm.selectedCount() }} {{ t('itemsSelected', { scope: 'common' }) | async }}</span>\n  </div>\n  <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"vm.closeDetailPanel()\">\n    <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n  </ax-button>\n</div>\n<div class=\"__content\"></div>\n}\n<!-- Single Selected -->\n@else {\n<!-- Info -->\n@let nodeInfo = vm.getNodeInfo((vm.selectedNode() ?? vm.currentFolder())!);\n<div class=\"__header\">\n  <div class=\"__title\">\n    <i class=\"fa-fw fa-lg {{ nodeInfo.icon }} fa-solid\"></i>\n    <span>{{ nodeInfo.name }}</span>\n  </div>\n  <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"vm.closeDetailPanel()\">\n    <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n  </ax-button>\n</div>\n<div class=\"__content\">\n  @for(section of nodeInfo.sections; track section.title) {\n  <div class=\"__section\">\n    <div class=\"__title\">\n      <span>{{ section.title }}</span>\n    </div>\n    <div class=\"__content\">\n      @for(detail of section.details; track detail.title) {\n      <div class=\"__row\">\n        <div class=\"__title\">\n          <span>{{ detail.title }}</span>\n        </div>\n        <div class=\"__content\">\n          @if(detail.format) {\n          <span>{{ detail.content | format : detail.format | async }}</span>\n          } @else {\n          <span>{{ detail.content ?? '---' }}</span>\n          }\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n}\n", styles: ["axm-document-explorer-detail-panel{display:flex;flex-direction:column;border-radius:.5rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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))}@media (min-width: 1024px){axm-document-explorer-detail-panel{min-width:20rem}}axm-document-explorer-detail-panel>.__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem}axm-document-explorer-detail-panel>.__header>.__title{display:flex;width:90%;flex-direction:row;align-items:center;gap:.5rem}axm-document-explorer-detail-panel>.__header>.__title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-weight:600;line-height:1.625}axm-document-explorer-detail-panel>.__content{display:flex;flex-direction:column}axm-document-explorer-detail-panel>.__content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}axm-document-explorer-detail-panel>.__content>.__section{display:flex;flex-direction:column;padding:1rem}axm-document-explorer-detail-panel>.__content>.__section>.__title{margin-bottom:1rem;font-size:.875rem;line-height:1.25rem;font-weight:700}axm-document-explorer-detail-panel>.__content>.__section>.__content{display:flex;flex-direction:column;gap:1rem}axm-document-explorer-detail-panel>.__content>.__section>.__content>.__row{display:flex;flex-direction:column;gap:.25rem}axm-document-explorer-detail-panel>.__content>.__section>.__content>.__row>.__title{display:flex;font-size:.875rem;line-height:1.25rem;font-weight:600;opacity:.9}axm-document-explorer-detail-panel>.__content>.__section>.__content>.__row>.__content{display:flex;flex-direction:row;align-items:center;gap:.5rem}axm-document-explorer-detail-panel>.__content>.__section>.__content>.__row>.__content span{opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }, { 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: AXTranslationModule }, { kind: "directive", type: i3$1.AXTranslatorDirective, selector: "[translate]" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentExplorerDetailPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-document-explorer-detail-panel', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                        AXDecoratorModule,
+                        AXFormatModule,
+                        AXButtonModule,
+                        AXTranslationModule
+                    ], template: "<!--  Multiple Selected  -->\n@if(vm.hasMultipleSelectedItems()) {\n<div class=\"__header\" *translate=\"let t\">\n  <div class=\"__title\">\n    <i class=\"fa-fw fa-lg fa-solid\"></i>\n    <span> {{ vm.selectedCount() }} {{ t('itemsSelected', { scope: 'common' }) | async }}</span>\n  </div>\n  <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"vm.closeDetailPanel()\">\n    <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n  </ax-button>\n</div>\n<div class=\"__content\"></div>\n}\n<!-- Single Selected -->\n@else {\n<!-- Info -->\n@let nodeInfo = vm.getNodeInfo((vm.selectedNode() ?? vm.currentFolder())!);\n<div class=\"__header\">\n  <div class=\"__title\">\n    <i class=\"fa-fw fa-lg {{ nodeInfo.icon }} fa-solid\"></i>\n    <span>{{ nodeInfo.name }}</span>\n  </div>\n  <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"vm.closeDetailPanel()\">\n    <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n  </ax-button>\n</div>\n<div class=\"__content\">\n  @for(section of nodeInfo.sections; track section.title) {\n  <div class=\"__section\">\n    <div class=\"__title\">\n      <span>{{ section.title }}</span>\n    </div>\n    <div class=\"__content\">\n      @for(detail of section.details; track detail.title) {\n      <div class=\"__row\">\n        <div class=\"__title\">\n          <span>{{ detail.title }}</span>\n        </div>\n        <div class=\"__content\">\n          @if(detail.format) {\n          <span>{{ detail.content | format : detail.format | async }}</span>\n          } @else {\n          <span>{{ detail.content ?? '---' }}</span>\n          }\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n}\n", styles: ["axm-document-explorer-detail-panel{display:flex;flex-direction:column;border-radius:.5rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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))}@media (min-width: 1024px){axm-document-explorer-detail-panel{min-width:20rem}}axm-document-explorer-detail-panel>.__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem}axm-document-explorer-detail-panel>.__header>.__title{display:flex;width:90%;flex-direction:row;align-items:center;gap:.5rem}axm-document-explorer-detail-panel>.__header>.__title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-weight:600;line-height:1.625}axm-document-explorer-detail-panel>.__content{display:flex;flex-direction:column}axm-document-explorer-detail-panel>.__content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}axm-document-explorer-detail-panel>.__content>.__section{display:flex;flex-direction:column;padding:1rem}axm-document-explorer-detail-panel>.__content>.__section>.__title{margin-bottom:1rem;font-size:.875rem;line-height:1.25rem;font-weight:700}axm-document-explorer-detail-panel>.__content>.__section>.__content{display:flex;flex-direction:column;gap:1rem}axm-document-explorer-detail-panel>.__content>.__section>.__content>.__row{display:flex;flex-direction:column;gap:.25rem}axm-document-explorer-detail-panel>.__content>.__section>.__content>.__row>.__title{display:flex;font-size:.875rem;line-height:1.25rem;font-weight:600;opacity:.9}axm-document-explorer-detail-panel>.__content>.__section>.__content>.__row>.__content{display:flex;flex-direction:row;align-items:center;gap:.5rem}axm-document-explorer-detail-panel>.__content>.__section>.__content>.__row>.__content span{opacity:.7}\n"] }]
+        }] });
+
+class AXMDocumentDriveComponent extends AXPBasePageComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----------------   Services & Dependencies   ----------------
+        this.rootConfig = RootConfig;
+        this.fileTypeService = inject(AXPFileTypeProviderService);
+        this.driveService = inject(AXMDocumentManagerService);
+        this.vm = inject(AXPDocumentExplorerViewModel);
+        this.router = inject(Router);
+        this.activatedRoute = inject(ActivatedRoute);
+        //#endregion
+        //#region ----------------   View Properties   ----------------
+        this.filterItems = signal([]);
+        this.selectedFilter = signal('all');
+        this.sortItems = signal([
+            { key: 'name', textKey: 'actions.sort-by-name', icon: 'fa-light fa-font' },
+            { key: 'modified', textKey: 'actions.sort-by-date', icon: 'fa-light fa-calendar' },
+            { key: 'size', textKey: 'actions.sort-by-size', icon: 'fa-light fa-weight-hanging' },
+        ]);
+        this.viewsItems = signal([
+            { key: 'large-icons', icon: 'fa-light fa-grid' },
+            { key: 'small-icons', icon: 'fa-light fa-grid', break: true },
+            { key: 'large-tiles', icon: 'fa-grid-2' },
+            { key: 'small-tiles', icon: 'fa-grid-2', break: true },
+            { key: 'details', icon: 'fa-bars', break: true },
+            { key: 'list', icon: 'fa-list' },
+        ]);
+        this.selectedViewMode = computed(() => this.viewsItems().find((item) => item.key === this.vm.viewMode()) || this.viewsItems()[0]);
+        this.selectionMode = signal('single');
+        this.documentExplorer = viewChild(AXMDocumentExplorerComponent);
+        //#endregion
+        //#region ----------------   Computed Properties   ----------------
+        this.selectedSort = computed(() => {
+            const items = this.sortItems();
+            return items.find((item) => item.key === this.vm.sortField()) || items[0];
+        });
+        //#endregion
+        //#region ----------------   Effects   ----------------
+        this.#navigateEffect = effect(() => {
+            const navigatingFolderId = this.vm.navigatingFolderId();
+            if (navigatingFolderId) {
+                this.handleNavigateToFolder(navigatingFolderId);
+            }
+        });
+        this.#loadingEffect = effect(() => {
+            const isLoading = this.vm.isLoading();
+            untracked(() => {
+                this.layoutService.setNavigationLoading(isLoading);
+            });
+        });
+    }
+    //#endregion
+    //#region ----------------   Effects   ----------------
+    #navigateEffect;
+    #loadingEffect;
+    //#endregion
+    //#region ----------------   Lifecycle Hooks   ----------------
+    async ngOnInit() {
+        super.ngOnInit();
+        await this.loadFilterItems();
+        await this.vm.initialize({ browseMode: 'file' });
+        this.activatedRoute.paramMap.subscribe(async () => {
+            this.loadDrive();
+        });
+    }
+    //#endregion
+    //#region ----------------   Event Handlers   ----------------
+    async handleSearchChange(event) {
+        console.log(event);
+        const result = await this.driveService.searchNodes(event.value, AXMDriveScope.Platform);
+        console.log(result);
+    }
+    handleCtrlKey(e) {
+        this.selectionMode.set('multiple');
+    }
+    handleCtrlKeyUp(e) {
+        this.selectionMode.set('single');
+    }
+    handleNavigateToFolder(folderId) {
+        this.router.navigate([`${this.sessionService.application?.name}/drive/my/${folderId}`]);
+    }
+    //#endregion
+    //#region ----------------   Data Loading Methods   ----------------
+    async loadDrive() {
+        const folderId = this.activatedRoute.snapshot.paramMap.get('id');
+        if (folderId) {
+            await this.vm.loadFolderContents(folderId);
+        }
+        else {
+            const root = await this.driveService.getRoot(AXMDriveScope.Platform);
+            if (root.result) {
+                await this.router.navigate([`${this.sessionService.application?.name}/drive/my/${root.result.id}`], {
+                    replaceUrl: true,
+                });
+            }
+        }
+        //
+        this.recompute();
+    }
+    async loadFilterItems() {
+        const types = await this.fileTypeService.items();
+        const items = [
+            { key: 'all', textKey: 'file-types.all', icon: 'fa-light fa-folder-closed' },
+            ...types.map((type) => ({
+                key: type.name,
+                textKey: `file-types.${type.name}`,
+                icon: type.icon || 'fa-light fa-file',
+            })),
+        ];
+        this.filterItems.set(items);
+    }
+    //#endregion
+    //#region ----------------   Filter Methods   ----------------
+    setFilter(key) {
+        this.selectedFilter.set(key);
+    }
+    getFilterIcon() {
+        if (this.selectedFilter() === 'all') {
+            return 'fa-light fa-folder-closed';
+        }
+        const item = this.filterItems().find((item) => item.key === this.selectedFilter());
+        return item?.icon || 'fa-light fa-file';
+    }
+    getFilterText() {
+        if (this.selectedFilter() === 'all') {
+            return 'file-types.all';
+        }
+        const item = this.filterItems().find((item) => item.key === this.selectedFilter());
+        return item?.textKey || 'file-types.all';
+    }
+    //#endregion
+    //#region ----------------   Page Configuration Overrides   ----------------
+    async getPrimaryMenuItems() {
+        if (this.vm.hasMultipleSelectedItems()) {
+            return [
+                {
+                    name: 'deleteItems',
+                    title: 't("deleteItems")',
+                    icon: 'fa-light fa-trash-can',
+                    color: 'danger',
+                }
+            ];
+        }
+        return [
+            {
+                name: 'new-folder',
+                title: 't("add-item")',
+                icon: 'fa-light fa-plus',
+                items: await this.vm.getFolderAddMenuItems()
+            },
+        ];
+    }
+    async getSecondaryMenuItems() {
+        if (this.vm.hasMultipleSelectedItems()) {
+            return [
+                {
+                    name: 'delete',
+                    title: 't("delete")',
+                    icon: 'fa-light fa-trash-can',
+                    color: 'danger',
+                }
+            ];
+        }
+        return this.vm.getFolderActionMenuItems();
+    }
+    getPageTitle() {
+        if (this.vm.isRoot()) {
+            return 'Drive';
+        }
+        return this.vm.currentFolder()?.name || '';
+    }
+    async getPageDescription() {
+        const count = await this.vm.itemsCount();
+        const size = await this.vm.availableSpace();
+        const formattedSize = await this.formatService.format(size, 'filesize');
+        return this.translateService.translateAsync('my-drive.description', {
+            scope: this.rootConfig.config.i18n,
+            params: {
+                count,
+                size: formattedSize
+            }
+        });
+    }
+    getPageBreadcrumbs() {
+        return [
+            {
+                title: this.translateService.translateSync('entity.home'),
+                icon: 'fa-solid fa-home ax-text-xs ax-me-2',
+            },
+            {
+                title: 'My Drive',
+            },
+            {
+                title: this.vm.currentFolder()?.name || '',
+            }
+        ];
+    }
+    execute(command) {
+        switch (command.name) {
+            case 'new-folder':
+                const folderId = command.options?.['folderId'];
+                if (folderId) {
+                    this.driveService.showCreateFolderDialog(folderId);
+                }
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentDriveComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMDocumentDriveComponent, isStandalone: true, selector: "axp-document-drive", host: { listeners: { "document:keydown.control": "handleCtrlKey($event)", "document:keyup.control": "handleCtrlKeyUp($event)" } }, providers: [
+            AXPDocumentExplorerViewModel,
+            {
+                provide: AXPBasePage,
+                useExisting: AXMDocumentDriveComponent
+            }
+        ], viewQueries: [{ propertyName: "documentExplorer", first: true, predicate: AXMDocumentExplorerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Main Layout -->\n<axp-page-layout *translate=\"let t\">\n  <axp-page-toolbar>\n    <!-- Left Side Toolbar -->\n    <axp-layout-prefix>\n      @if(vm.hasMultipleSelectedItems() ) {\n      <div class=\"ax-flex ax-gap-3 ax-items-center ax-h-10\">\n        <span class=\"ax-text-xl ax-font-bold\">\n          {{ vm.selectedCount() }} {{ t('itemsSelected', { scope: 'common' }) | async }}\n        </span>\n        <span (click)=\"vm.deselectAll()\" class=\"ax-text-sm ax-text-primary-500 ax-underline ax-cursor-pointer\">{{\n          t('unselect', { scope: 'common' }) | async\n          }}</span>\n      </div>\n      }\n      <!---------->\n      @else {\n      <!-- Filter Dropdown -->\n      <ax-button [text]=\"t(getFilterText(), { scope: rootConfig.config.i18n }) | async\">\n        <ax-prefix>\n          <ax-icon [icon]=\"getFilterIcon()\"></ax-icon>\n        </ax-prefix>\n\n        <ax-dropdown-panel>\n          <ax-button-item-list class=\"ax-p-2\">\n            @for(item of filterItems(); track item.key) {\n            <ax-button-item (onClick)=\"setFilter(item.key)\"\n              [text]=\"(t(item.textKey, { scope: rootConfig.config.i18n }) | async)!\">\n              <ax-prefix>\n                <ax-icon [icon]=\"item.icon\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n      </ax-button>\n      <!-- Search Box -->\n      <ax-search-box (onValueChanged)=\"handleSearchChange($event)\" class=\"ax-w-72 ax-hidden md:ax-flex\"\n        [placeholder]=\"t('actions.search', { scope: rootConfig.config.i18n }) | async\"><ax-clear-button></ax-clear-button></ax-search-box>\n      }\n    </axp-layout-prefix>\n\n    <!-- Right Side Toolbar -->\n    <axp-layout-suffix>\n      <!-- Sort Dropdown -->\n      <ax-button>\n        <ax-icon\n          [icon]=\"'fa-light fa-arrow-' + (vm.sortDirection() === 'asc' ? 'up' : 'down') + '-wide-short'\"></ax-icon>\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            <!-- Sort By Options -->\n            @for(item of sortItems(); track item.key) {\n            <ax-button-item [text]=\"(t(item.textKey, { scope: rootConfig.config.i18n }) | async)!\"\n              (onClick)=\"vm.setSortField(item.key)\" [selected]=\"vm.sortField() === item.key\">\n              <ax-prefix>\n                <ax-icon [icon]=\"item.icon\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            }\n            <ax-divider></ax-divider>\n            <!-- Sort Direction Options -->\n            <ax-button-item [text]=\"(t('actions.sort-ascending', { scope: rootConfig.config.i18n }) | async)!\"\n              [selected]=\"vm.sortDirection() === 'asc'\" (onClick)=\"vm.setSortDirection('asc')\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-up-wide-short\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item [text]=\"(t('actions.sort-descending', { scope: rootConfig.config.i18n }) | async)!\"\n              [selected]=\"vm.sortDirection() === 'desc'\" (onClick)=\"vm.setSortDirection('desc')\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-down-wide-short\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n      </ax-button>\n\n      <!-- View Mode Toggle -->\n      <ax-button>\n        <ax-icon icon=\"fa-light {{ selectedViewMode().icon }}\"></ax-icon>\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            @for(item of viewsItems(); track item.key) {\n            <!-- view mode items -->\n            <ax-button-item [text]=\"(t('view-modes.' + item.key, { scope: rootConfig.config.i18n }) | async)!\"\n              [selected]=\"vm.isViewMode(item.key)\" (onClick)=\"vm.setViewMode(item.key)\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            @if(item.break) {\n            <ax-divider></ax-divider>\n            }\n            <!-- end of view mode items -->\n            }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n      </ax-button>\n\n      @if(layoutService.isLarge()) {\n      <!-- Detail Panel Toggle -->\n      <ax-button (onClick)=\"vm.toggleDetailPanel()\">\n        <ax-icon icon=\"{{ vm.isDetailPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info' }}\"></ax-icon>\n      </ax-button>\n      }\n    </axp-layout-suffix>\n  </axp-page-toolbar>\n\n  <!-- Content Section -->\n  <axp-page-content class=\"ax-overflow-auto ax-flex ax-flex-row ax-gap-4\">\n    <axm-document-explorer [selectionMode]=\"selectionMode()\"></axm-document-explorer>\n    @if (vm.isDetailPanelOpen() && layoutService.isLarge()) {\n    <axm-document-explorer-detail-panel class=\"ax-sticky ax-top-0 ax-z-50\"></axm-document-explorer-detail-panel>\n    }\n  </axp-page-content>\n\n  <!-- Footer Section -->\n  @if(!layoutService.isSmall()) {\n  <axp-page-footer>\n    <axp-layout-prefix>\n      <axm-folder-path-breadcrumbs></axm-folder-path-breadcrumbs>\n    </axp-layout-prefix>\n  </axp-page-footer>\n  }\n</axp-page-layout>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i2$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: AXLoadingModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXFileModule }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer,    axp-page-header,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title,     axp-layout-nav-button,     axp-layout-description,     axp-layout-title-bar,    axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "component", type: AXMDocumentExplorerComponent, selector: "axm-document-explorer", inputs: ["browseMode", "viewMode", "selectionMode", "showContextMenu"] }, { kind: "component", type: AXMFolderPathBreadcrumbsComponent, selector: "axm-folder-path-breadcrumbs" }, { kind: "component", type: AXMDocumentExplorerDetailPanelComponent, selector: "axm-document-explorer-detail-panel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentDriveComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-document-drive', standalone: true, imports: [
+                        CommonModule,
+                        RouterModule,
+                        AXMenuModule,
+                        AXButtonModule,
+                        AXButtonGroupModule,
+                        AXDropdownButtonModule,
+                        AXDropdownModule,
+                        AXTranslationModule,
+                        AXDecoratorModule,
+                        AXLoadingModule,
+                        AXBreadcrumbsModule,
+                        AXBadgeModule,
+                        AXSearchBoxModule,
+                        AXFormatModule,
+                        AXFileModule,
+                        AXPPageLayoutComponent,
+                        AXPThemeLayoutBlockComponent,
+                        AXDateTimeModule,
+                        AXMDocumentExplorerComponent,
+                        AXMFolderPathBreadcrumbsComponent,
+                        AXMDocumentExplorerDetailPanelComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        AXPDocumentExplorerViewModel,
+                        {
+                            provide: AXPBasePage,
+                            useExisting: AXMDocumentDriveComponent
+                        }
+                    ], template: "<!-- Main Layout -->\n<axp-page-layout *translate=\"let t\">\n  <axp-page-toolbar>\n    <!-- Left Side Toolbar -->\n    <axp-layout-prefix>\n      @if(vm.hasMultipleSelectedItems() ) {\n      <div class=\"ax-flex ax-gap-3 ax-items-center ax-h-10\">\n        <span class=\"ax-text-xl ax-font-bold\">\n          {{ vm.selectedCount() }} {{ t('itemsSelected', { scope: 'common' }) | async }}\n        </span>\n        <span (click)=\"vm.deselectAll()\" class=\"ax-text-sm ax-text-primary-500 ax-underline ax-cursor-pointer\">{{\n          t('unselect', { scope: 'common' }) | async\n          }}</span>\n      </div>\n      }\n      <!---------->\n      @else {\n      <!-- Filter Dropdown -->\n      <ax-button [text]=\"t(getFilterText(), { scope: rootConfig.config.i18n }) | async\">\n        <ax-prefix>\n          <ax-icon [icon]=\"getFilterIcon()\"></ax-icon>\n        </ax-prefix>\n\n        <ax-dropdown-panel>\n          <ax-button-item-list class=\"ax-p-2\">\n            @for(item of filterItems(); track item.key) {\n            <ax-button-item (onClick)=\"setFilter(item.key)\"\n              [text]=\"(t(item.textKey, { scope: rootConfig.config.i18n }) | async)!\">\n              <ax-prefix>\n                <ax-icon [icon]=\"item.icon\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n      </ax-button>\n      <!-- Search Box -->\n      <ax-search-box (onValueChanged)=\"handleSearchChange($event)\" class=\"ax-w-72 ax-hidden md:ax-flex\"\n        [placeholder]=\"t('actions.search', { scope: rootConfig.config.i18n }) | async\"><ax-clear-button></ax-clear-button></ax-search-box>\n      }\n    </axp-layout-prefix>\n\n    <!-- Right Side Toolbar -->\n    <axp-layout-suffix>\n      <!-- Sort Dropdown -->\n      <ax-button>\n        <ax-icon\n          [icon]=\"'fa-light fa-arrow-' + (vm.sortDirection() === 'asc' ? 'up' : 'down') + '-wide-short'\"></ax-icon>\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            <!-- Sort By Options -->\n            @for(item of sortItems(); track item.key) {\n            <ax-button-item [text]=\"(t(item.textKey, { scope: rootConfig.config.i18n }) | async)!\"\n              (onClick)=\"vm.setSortField(item.key)\" [selected]=\"vm.sortField() === item.key\">\n              <ax-prefix>\n                <ax-icon [icon]=\"item.icon\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            }\n            <ax-divider></ax-divider>\n            <!-- Sort Direction Options -->\n            <ax-button-item [text]=\"(t('actions.sort-ascending', { scope: rootConfig.config.i18n }) | async)!\"\n              [selected]=\"vm.sortDirection() === 'asc'\" (onClick)=\"vm.setSortDirection('asc')\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-up-wide-short\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item [text]=\"(t('actions.sort-descending', { scope: rootConfig.config.i18n }) | async)!\"\n              [selected]=\"vm.sortDirection() === 'desc'\" (onClick)=\"vm.setSortDirection('desc')\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-down-wide-short\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n      </ax-button>\n\n      <!-- View Mode Toggle -->\n      <ax-button>\n        <ax-icon icon=\"fa-light {{ selectedViewMode().icon }}\"></ax-icon>\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            @for(item of viewsItems(); track item.key) {\n            <!-- view mode items -->\n            <ax-button-item [text]=\"(t('view-modes.' + item.key, { scope: rootConfig.config.i18n }) | async)!\"\n              [selected]=\"vm.isViewMode(item.key)\" (onClick)=\"vm.setViewMode(item.key)\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            @if(item.break) {\n            <ax-divider></ax-divider>\n            }\n            <!-- end of view mode items -->\n            }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n      </ax-button>\n\n      @if(layoutService.isLarge()) {\n      <!-- Detail Panel Toggle -->\n      <ax-button (onClick)=\"vm.toggleDetailPanel()\">\n        <ax-icon icon=\"{{ vm.isDetailPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info' }}\"></ax-icon>\n      </ax-button>\n      }\n    </axp-layout-suffix>\n  </axp-page-toolbar>\n\n  <!-- Content Section -->\n  <axp-page-content class=\"ax-overflow-auto ax-flex ax-flex-row ax-gap-4\">\n    <axm-document-explorer [selectionMode]=\"selectionMode()\"></axm-document-explorer>\n    @if (vm.isDetailPanelOpen() && layoutService.isLarge()) {\n    <axm-document-explorer-detail-panel class=\"ax-sticky ax-top-0 ax-z-50\"></axm-document-explorer-detail-panel>\n    }\n  </axp-page-content>\n\n  <!-- Footer Section -->\n  @if(!layoutService.isSmall()) {\n  <axp-page-footer>\n    <axp-layout-prefix>\n      <axm-folder-path-breadcrumbs></axm-folder-path-breadcrumbs>\n    </axp-layout-prefix>\n  </axp-page-footer>\n  }\n</axp-page-layout>" }]
+        }], propDecorators: { handleCtrlKey: [{
+                type: HostListener,
+                args: ['document:keydown.control', ['$event']]
+            }], handleCtrlKeyUp: [{
+                type: HostListener,
+                args: ['document:keyup.control', ['$event']]
+            }] } });
+
+export { AXMDocumentDriveComponent };
+//# sourceMappingURL=acorex-modules-document-management-drive.component-B3BCzdVv.mjs.map

package/fesm2022/acorex-modules-document-management-drive.component-B3BCzdVv.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-modules-document-management-drive.component-B3BCzdVv.mjs","sources":["../../../../libs/modules/document-management/src/lib/features/document-explorer/views/detail-panel/detail-panel.component.ts","../../../../libs/modules/document-management/src/lib/features/document-explorer/views/detail-panel/detail-panel.component.html","../../../../libs/modules/document-management/src/lib/features/drive/drive.component.ts","../../../../libs/modules/document-management/src/lib/features/drive/drive.component.html"],"sourcesContent":["import { Component, inject, ViewEncapsulation } from \"@angular/core\";\nimport { AXPDocumentExplorerViewModel } from \"../../document-explorer.viewmodel\";\nimport { AXDecoratorModule } from \"@acorex/components/decorators\";\nimport { AXFormatModule } from \"@acorex/core/format\";\nimport { CommonModule } from \"@angular/common\";\nimport { AXButtonModule } from \"@acorex/components/button\";\nimport { AXTranslationModule } from \"@acorex/core/translation\";\n\n@Component({\n    selector: 'axm-document-explorer-detail-panel',\n    templateUrl: './detail-panel.component.html',\n    styleUrls: ['./detail-panel.component.scss'],\n    standalone: true,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        CommonModule,\n        AXDecoratorModule,\n        AXFormatModule,\n        AXButtonModule,\n        AXTranslationModule\n    ]\n})\nexport class AXMDocumentExplorerDetailPanelComponent {\n    protected vm = inject(AXPDocumentExplorerViewModel);\n}\n","<!--  Multiple Selected  -->\n@if(vm.hasMultipleSelectedItems()) {\n<div class=\"__header\" *translate=\"let t\">\n  <div class=\"__title\">\n    <i class=\"fa-fw fa-lg fa-solid\"></i>\n    <span> {{ vm.selectedCount() }} {{ t('itemsSelected', { scope: 'common' }) | async }}</span>\n  </div>\n  <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"vm.closeDetailPanel()\">\n    <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n  </ax-button>\n</div>\n<div class=\"__content\"></div>\n}\n<!-- Single Selected -->\n@else {\n<!-- Info -->\n@let nodeInfo = vm.getNodeInfo((vm.selectedNode() ?? vm.currentFolder())!);\n<div class=\"__header\">\n  <div class=\"__title\">\n    <i class=\"fa-fw fa-lg {{ nodeInfo.icon }} fa-solid\"></i>\n    <span>{{ nodeInfo.name }}</span>\n  </div>\n  <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"vm.closeDetailPanel()\">\n    <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n  </ax-button>\n</div>\n<div class=\"__content\">\n  @for(section of nodeInfo.sections; track section.title) {\n  <div class=\"__section\">\n    <div class=\"__title\">\n      <span>{{ section.title }}</span>\n    </div>\n    <div class=\"__content\">\n      @for(detail of section.details; track detail.title) {\n      <div class=\"__row\">\n        <div class=\"__title\">\n          <span>{{ detail.title }}</span>\n        </div>\n        <div class=\"__content\">\n          @if(detail.format) {\n          <span>{{ detail.content | format : detail.format | async }}</span>\n          } @else {\n          <span>{{ detail.content ?? '---' }}</span>\n          }\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  HostListener,\n  inject,\n  OnInit,\n  signal,\n  untracked,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { AXBadgeModule } from '@acorex/components/badge';\nimport { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXButtonGroupModule } from '@acorex/components/button-group';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXDropdownModule } from '@acorex/components/dropdown';\nimport { AXDropdownButtonModule } from '@acorex/components/dropdown-button';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXMenuModule } from '@acorex/components/menu';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AXPBasePage, AXPBasePageComponent, AXPPageLayoutComponent } from '@acorex/platform/themes/default';\nimport { AXSearchBoxModule } from '@acorex/components/search-box';\nimport { AXDateTimeModule } from '@acorex/core/date-time';\nimport { AXFileModule } from '@acorex/core/file';\nimport { AXFormatModule } from '@acorex/core/format';\nimport { AXPFileTypeProviderService } from '@acorex/platform/common';\nimport {\n  AXPThemeLayoutBlockComponent,\n} from '@acorex/platform/themes/shared';\n\n\n\nimport { ActivatedRoute, Router, RouterModule } from '@angular/router';\nimport { RootConfig } from '../../const';\nimport { AXMDocumentExplorerComponent, AXPDocumentExplorerViewModel } from '../document-explorer';\nimport { AXMDocumentExplorerDetailPanelComponent } from '../document-explorer/views/detail-panel/detail-panel.component';\nimport { AXMDocumentManagerService, AXMFolderPathBreadcrumbsComponent } from '../shared';\nimport { AXMDriveScope, AXMDocumentSelectionMode } from '../shared/document-manager.types';\nimport { AXPActionMenuItem, AXPBreadcrumbItem, AXPExecuteCommand } from '@acorex/platform/core';\n\n@Component({\n  selector: 'axp-document-drive',\n  templateUrl: './drive.component.html',\n  styleUrls: ['./drive.component.scss'],\n  standalone: true,\n  imports: [\n    CommonModule,\n    RouterModule,\n    AXMenuModule,\n    AXButtonModule,\n    AXButtonGroupModule,\n    AXDropdownButtonModule,\n    AXDropdownModule,\n    AXTranslationModule,\n    AXDecoratorModule,\n    AXLoadingModule,\n    AXBreadcrumbsModule,\n    AXBadgeModule,\n    AXSearchBoxModule,\n    AXFormatModule,\n    AXFileModule,\n    AXPPageLayoutComponent,\n    AXPThemeLayoutBlockComponent,\n    AXDateTimeModule,\n    AXMDocumentExplorerComponent,\n    AXMFolderPathBreadcrumbsComponent,\n    AXMDocumentExplorerDetailPanelComponent,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    AXPDocumentExplorerViewModel,\n    {\n      provide: AXPBasePage,\n      useExisting: AXMDocumentDriveComponent\n    }\n  ],\n})\nexport class AXMDocumentDriveComponent extends AXPBasePageComponent implements OnInit {\n\n  //#region ----------------   Services & Dependencies   ----------------\n\n  protected readonly rootConfig = RootConfig;\n  private readonly fileTypeService = inject(AXPFileTypeProviderService);\n  private readonly driveService = inject(AXMDocumentManagerService);\n  protected readonly vm = inject(AXPDocumentExplorerViewModel);\n  protected readonly router = inject(Router);\n  protected readonly activatedRoute = inject(ActivatedRoute);\n\n  //#endregion\n\n\n  //#region ----------------   View Properties   ----------------\n\n  protected readonly filterItems = signal<Array<{ key: string; textKey: string; icon: string }>>([]);\n  public selectedFilter = signal<string>('all');\n\n  protected readonly sortItems = signal([\n    { key: 'name', textKey: 'actions.sort-by-name', icon: 'fa-light fa-font' },\n    { key: 'modified', textKey: 'actions.sort-by-date', icon: 'fa-light fa-calendar' },\n    { key: 'size', textKey: 'actions.sort-by-size', icon: 'fa-light fa-weight-hanging' },\n  ]);\n\n  protected readonly viewsItems = signal([\n    { key: 'large-icons', icon: 'fa-light fa-grid' },\n    { key: 'small-icons', icon: 'fa-light fa-grid', break: true },\n    { key: 'large-tiles', icon: 'fa-grid-2' },\n    { key: 'small-tiles', icon: 'fa-grid-2', break: true },\n    { key: 'details', icon: 'fa-bars', break: true },\n    { key: 'list', icon: 'fa-list' },\n  ]);\n\n  protected readonly selectedViewMode = computed(() => this.viewsItems().find((item) => item.key === this.vm.viewMode()) || this.viewsItems()[0]);\n  protected readonly selectionMode = signal<AXMDocumentSelectionMode>('single');\n  protected documentExplorer = viewChild(AXMDocumentExplorerComponent);\n\n  //#endregion\n\n\n  //#region ----------------   Computed Properties   ----------------\n\n  protected readonly selectedSort = computed(() => {\n    const items = this.sortItems();\n    return items.find((item) => item.key === this.vm.sortField()) || items[0];\n  });\n\n  //#endregion\n\n\n  //#region ----------------   Effects   ----------------\n\n  #navigateEffect = effect(() => {\n    const navigatingFolderId = this.vm.navigatingFolderId();\n    if (navigatingFolderId) {\n      this.handleNavigateToFolder(navigatingFolderId);\n    }\n  });\n\n  #loadingEffect = effect(() => {\n    const isLoading = this.vm.isLoading();\n    untracked(() => {\n      this.layoutService.setNavigationLoading(isLoading);\n    });\n  });\n\n  //#endregion\n\n\n  //#region ----------------   Lifecycle Hooks   ----------------\n\n  override async ngOnInit() {\n    super.ngOnInit();\n    await this.loadFilterItems();\n    await this.vm.initialize({ browseMode: 'file' });\n    this.activatedRoute.paramMap.subscribe(async () => {\n      this.loadDrive();\n    });\n  }\n\n  //#endregion\n\n\n  //#region ----------------   Event Handlers   ----------------\n\n  async handleSearchChange(event: any) {\n    console.log(event);\n    const result = await this.driveService.searchNodes(event.value, AXMDriveScope.Platform);\n    console.log(result);\n  }\n\n  @HostListener('document:keydown.control', ['$event'])\n  handleCtrlKey(e: KeyboardEvent) {\n    this.selectionMode.set('multiple');\n  }\n\n  @HostListener('document:keyup.control', ['$event'])\n  handleCtrlKeyUp(e: KeyboardEvent) {\n    this.selectionMode.set('single');\n  }\n\n  protected handleNavigateToFolder(folderId: string) {\n    this.router.navigate([`${this.sessionService.application?.name}/drive/my/${folderId}`]);\n  }\n\n  //#endregion\n\n\n  //#region ----------------   Data Loading Methods   ----------------\n\n  private async loadDrive() {\n    const folderId = this.activatedRoute.snapshot.paramMap.get('id');\n    if (folderId) {\n      await this.vm.loadFolderContents(folderId);\n    } else {\n      const root = await this.driveService.getRoot(AXMDriveScope.Platform);\n      if (root.result) {\n        await this.router.navigate([`${this.sessionService.application?.name}/drive/my/${root.result.id}`], {\n          replaceUrl: true,\n        });\n      }\n    }\n    //\n    this.recompute();\n  }\n\n  async loadFilterItems() {\n    const types = await this.fileTypeService.items();\n    const items = [\n      { key: 'all', textKey: 'file-types.all', icon: 'fa-light fa-folder-closed' },\n      ...types.map((type) => ({\n        key: type.name,\n        textKey: `file-types.${type.name}`,\n        icon: type.icon || 'fa-light fa-file',\n      })),\n    ];\n    this.filterItems.set(items);\n  }\n\n  //#endregion\n\n\n  //#region ----------------   Filter Methods   ----------------\n\n  protected setFilter(key: string): void {\n    this.selectedFilter.set(key);\n  }\n\n  protected getFilterIcon(): string {\n    if (this.selectedFilter() === 'all') {\n      return 'fa-light fa-folder-closed';\n    }\n    const item = this.filterItems().find((item) => item.key === this.selectedFilter());\n    return item?.icon || 'fa-light fa-file';\n  }\n\n  protected getFilterText(): string {\n    if (this.selectedFilter() === 'all') {\n      return 'file-types.all';\n    }\n    const item = this.filterItems().find((item) => item.key === this.selectedFilter());\n    return item?.textKey || 'file-types.all';\n  }\n\n  //#endregion\n\n\n  //#region ----------------   Page Configuration Overrides   ----------------\n\n  override async getPrimaryMenuItems(): Promise<AXPActionMenuItem[]> {\n    if (this.vm.hasMultipleSelectedItems()) {\n      return [\n        {\n          name: 'deleteItems',\n          title: 't(\"deleteItems\")',\n          icon: 'fa-light fa-trash-can',\n          color: 'danger',\n        }\n      ];\n    }\n    return [\n      {\n        name: 'new-folder',\n        title: 't(\"add-item\")',\n        icon: 'fa-light fa-plus',\n        items: await this.vm.getFolderAddMenuItems()\n      },\n    ]\n  }\n\n  override async getSecondaryMenuItems(): Promise<AXPActionMenuItem[]> {\n    if (this.vm.hasMultipleSelectedItems()) {\n      return [\n        {\n          name: 'delete',\n          title: 't(\"delete\")',\n          icon: 'fa-light fa-trash-can',\n          color: 'danger',\n        }\n      ];\n    }\n    return this.vm.getFolderActionMenuItems();\n  }\n\n  override getPageTitle(): string {\n    if (this.vm.isRoot()) {\n      return 'Drive';\n    }\n    return this.vm.currentFolder()?.name || '';\n  }\n\n  override async getPageDescription(): Promise<string> {\n    const count = await this.vm.itemsCount();\n    const size = await this.vm.availableSpace();\n    const formattedSize = await this.formatService.format(size, 'filesize');\n    return this.translateService.translateAsync('my-drive.description', {\n      scope: this.rootConfig.config.i18n,\n      params: {\n        count,\n        size: formattedSize\n      }\n    });\n  }\n\n  override getPageBreadcrumbs(): AXPBreadcrumbItem[] | Promise<AXPBreadcrumbItem[]> {\n    return [\n      {\n        title: this.translateService.translateSync('entity.home'),\n        icon: 'fa-solid fa-home ax-text-xs ax-me-2',\n      },\n      {\n        title: 'My Drive',\n      },\n      {\n        title: this.vm.currentFolder()?.name || '',\n      }\n    ];\n  }\n\n  override execute(command: AXPExecuteCommand): void | Promise<void> {\n    switch (command.name) {\n      case 'new-folder':\n        const folderId = command.options?.['folderId'] as string;\n        if (folderId) {\n          this.driveService.showCreateFolderDialog(folderId);\n        }\n        break;\n    }\n  }\n\n  //#endregion\n\n}\n","<!-- Main Layout -->\n<axp-page-layout *translate=\"let t\">\n  <axp-page-toolbar>\n    <!-- Left Side Toolbar -->\n    <axp-layout-prefix>\n      @if(vm.hasMultipleSelectedItems() ) {\n      <div class=\"ax-flex ax-gap-3 ax-items-center ax-h-10\">\n        <span class=\"ax-text-xl ax-font-bold\">\n          {{ vm.selectedCount() }} {{ t('itemsSelected', { scope: 'common' }) | async }}\n        </span>\n        <span (click)=\"vm.deselectAll()\" class=\"ax-text-sm ax-text-primary-500 ax-underline ax-cursor-pointer\">{{\n          t('unselect', { scope: 'common' }) | async\n          }}</span>\n      </div>\n      }\n      <!---------->\n      @else {\n      <!-- Filter Dropdown -->\n      <ax-button [text]=\"t(getFilterText(), { scope: rootConfig.config.i18n }) | async\">\n        <ax-prefix>\n          <ax-icon [icon]=\"getFilterIcon()\"></ax-icon>\n        </ax-prefix>\n\n        <ax-dropdown-panel>\n          <ax-button-item-list class=\"ax-p-2\">\n            @for(item of filterItems(); track item.key) {\n            <ax-button-item (onClick)=\"setFilter(item.key)\"\n              [text]=\"(t(item.textKey, { scope: rootConfig.config.i18n }) | async)!\">\n              <ax-prefix>\n                <ax-icon [icon]=\"item.icon\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n      </ax-button>\n      <!-- Search Box -->\n      <ax-search-box (onValueChanged)=\"handleSearchChange($event)\" class=\"ax-w-72 ax-hidden md:ax-flex\"\n        [placeholder]=\"t('actions.search', { scope: rootConfig.config.i18n }) | async\"><ax-clear-button></ax-clear-button></ax-search-box>\n      }\n    </axp-layout-prefix>\n\n    <!-- Right Side Toolbar -->\n    <axp-layout-suffix>\n      <!-- Sort Dropdown -->\n      <ax-button>\n        <ax-icon\n          [icon]=\"'fa-light fa-arrow-' + (vm.sortDirection() === 'asc' ? 'up' : 'down') + '-wide-short'\"></ax-icon>\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            <!-- Sort By Options -->\n            @for(item of sortItems(); track item.key) {\n            <ax-button-item [text]=\"(t(item.textKey, { scope: rootConfig.config.i18n }) | async)!\"\n              (onClick)=\"vm.setSortField(item.key)\" [selected]=\"vm.sortField() === item.key\">\n              <ax-prefix>\n                <ax-icon [icon]=\"item.icon\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            }\n            <ax-divider></ax-divider>\n            <!-- Sort Direction Options -->\n            <ax-button-item [text]=\"(t('actions.sort-ascending', { scope: rootConfig.config.i18n }) | async)!\"\n              [selected]=\"vm.sortDirection() === 'asc'\" (onClick)=\"vm.setSortDirection('asc')\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-up-wide-short\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item [text]=\"(t('actions.sort-descending', { scope: rootConfig.config.i18n }) | async)!\"\n              [selected]=\"vm.sortDirection() === 'desc'\" (onClick)=\"vm.setSortDirection('desc')\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-down-wide-short\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n      </ax-button>\n\n      <!-- View Mode Toggle -->\n      <ax-button>\n        <ax-icon icon=\"fa-light {{ selectedViewMode().icon }}\"></ax-icon>\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            @for(item of viewsItems(); track item.key) {\n            <!-- view mode items -->\n            <ax-button-item [text]=\"(t('view-modes.' + item.key, { scope: rootConfig.config.i18n }) | async)!\"\n              [selected]=\"vm.isViewMode(item.key)\" (onClick)=\"vm.setViewMode(item.key)\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            @if(item.break) {\n            <ax-divider></ax-divider>\n            }\n            <!-- end of view mode items -->\n            }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n      </ax-button>\n\n      @if(layoutService.isLarge()) {\n      <!-- Detail Panel Toggle -->\n      <ax-button (onClick)=\"vm.toggleDetailPanel()\">\n        <ax-icon icon=\"{{ vm.isDetailPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info' }}\"></ax-icon>\n      </ax-button>\n      }\n    </axp-layout-suffix>\n  </axp-page-toolbar>\n\n  <!-- Content Section -->\n  <axp-page-content class=\"ax-overflow-auto ax-flex ax-flex-row ax-gap-4\">\n    <axm-document-explorer [selectionMode]=\"selectionMode()\"></axm-document-explorer>\n    @if (vm.isDetailPanelOpen() && layoutService.isLarge()) {\n    <axm-document-explorer-detail-panel class=\"ax-sticky ax-top-0 ax-z-50\"></axm-document-explorer-detail-panel>\n    }\n  </axp-page-content>\n\n  <!-- Footer Section -->\n  @if(!layoutService.isSmall()) {\n  <axp-page-footer>\n    <axp-layout-prefix>\n      <axm-folder-path-breadcrumbs></axm-folder-path-breadcrumbs>\n    </axp-layout-prefix>\n  </axp-page-footer>\n  }\n</axp-page-layout>"],"names":["i2","i3","i4","i5","i6"],"mappings":"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"}

package/fesm2022/acorex-modules-document-management-large-icons-view.component-DvriE0YR.mjs

@@ -0,0 +1,20 @@
+import * as i0 from '@angular/core';
+import { inject, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXPElementDataDirective, AXPDblClickDirective } from '@acorex/platform/core';
+import { A as AXPDocumentExplorerViewModel } from './acorex-modules-document-management-acorex-modules-document-management-_BOVaDOq.mjs';
+
+class AXMDocumentExplorerLargeIconsViewComponent {
+    constructor() {
+        this.vm = inject(AXPDocumentExplorerViewModel);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentExplorerLargeIconsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMDocumentExplorerLargeIconsViewComponent, isStandalone: true, selector: "axm-document-explorer-large-icons-view", ngImport: i0, template: "<!-- Large Icons View -->\n<div class=\"__content fa-4x\">\n  @for (folder of vm.folders(); track folder.id) {\n  <div\n    class=\"__explorer-item\"\n    [class.--selected]=\"vm.isItemSelected(folder)\"\n    [axp-data]=\"folder\"\n    (click)=\"vm.toggleSelect(folder)\"\n    (onDblClick)=\"vm.navigateToFolder(folder.id)\"\n  >\n    <div class=\"__icon ax-text-yellow-400\">\n      @if (vm.isLoadingFolder(folder.id)) {\n      <i class=\"fa-light fa-spinner fa-spin-pulse\"></i>\n      } @else {\n      <i class=\"fas fa-folder-closed\"></i>\n      }\n    </div>\n    <div class=\"__name\">{{ folder.name }}</div>\n  </div>\n  } @for (file of vm.files(); track file.id) { @let fileInfo = vm.getFileInfo(file.name);\n  <div\n    class=\"__explorer-item\"\n    [class.--selected]=\"vm.isItemSelected(file)\"\n    [axp-data]=\"file\"\n    (click)=\"vm.toggleSelect(file)\"\n    (onDblClick)=\"vm.openFile(file)\"\n  >\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n    </div>\n    <div class=\"__name\">{{ file.name }}</div>\n  </div>\n  }\n</div>\n", styles: [":host{width:100%}:host .__content{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem}:host .__content .__explorer-item{display:flex;cursor:pointer;flex-direction:column;align-items:center;gap:.5rem;border-radius:.375rem;padding:1rem;text-align:center}:host .__content .__explorer-item:hover{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host .__content .__explorer-item .__icon{flex-shrink:0}:host .__content .__explorer-item .__name{width:100%;font-size:.875rem;line-height:1.25rem;font-weight:500;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.6em}:host .__content .__explorer-item.--selected{background-color:rgb(var(--ax-sys-color-darker-surface));color:rgb(var(--ax-sys-color-on-darker-surface));border-color:rgb(var(--ax-sys-color-border-darker-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: AXPElementDataDirective, selector: "[axp-data]", inputs: ["axp-data", "axp-data-path"] }, { kind: "directive", type: AXPDblClickDirective, selector: "[onDblClick]", outputs: ["onDblClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentExplorerLargeIconsViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-document-explorer-large-icons-view', standalone: true, imports: [CommonModule, AXPElementDataDirective, AXPDblClickDirective], template: "<!-- Large Icons View -->\n<div class=\"__content fa-4x\">\n  @for (folder of vm.folders(); track folder.id) {\n  <div\n    class=\"__explorer-item\"\n    [class.--selected]=\"vm.isItemSelected(folder)\"\n    [axp-data]=\"folder\"\n    (click)=\"vm.toggleSelect(folder)\"\n    (onDblClick)=\"vm.navigateToFolder(folder.id)\"\n  >\n    <div class=\"__icon ax-text-yellow-400\">\n      @if (vm.isLoadingFolder(folder.id)) {\n      <i class=\"fa-light fa-spinner fa-spin-pulse\"></i>\n      } @else {\n      <i class=\"fas fa-folder-closed\"></i>\n      }\n    </div>\n    <div class=\"__name\">{{ folder.name }}</div>\n  </div>\n  } @for (file of vm.files(); track file.id) { @let fileInfo = vm.getFileInfo(file.name);\n  <div\n    class=\"__explorer-item\"\n    [class.--selected]=\"vm.isItemSelected(file)\"\n    [axp-data]=\"file\"\n    (click)=\"vm.toggleSelect(file)\"\n    (onDblClick)=\"vm.openFile(file)\"\n  >\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n    </div>\n    <div class=\"__name\">{{ file.name }}</div>\n  </div>\n  }\n</div>\n", styles: [":host{width:100%}:host .__content{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem}:host .__content .__explorer-item{display:flex;cursor:pointer;flex-direction:column;align-items:center;gap:.5rem;border-radius:.375rem;padding:1rem;text-align:center}:host .__content .__explorer-item:hover{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host .__content .__explorer-item .__icon{flex-shrink:0}:host .__content .__explorer-item .__name{width:100%;font-size:.875rem;line-height:1.25rem;font-weight:500;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.6em}:host .__content .__explorer-item.--selected{background-color:rgb(var(--ax-sys-color-darker-surface));color:rgb(var(--ax-sys-color-on-darker-surface));border-color:rgb(var(--ax-sys-color-border-darker-surface))}\n"] }]
+        }] });
+
+export { AXMDocumentExplorerLargeIconsViewComponent };
+//# sourceMappingURL=acorex-modules-document-management-large-icons-view.component-DvriE0YR.mjs.map

package/fesm2022/acorex-modules-document-management-large-icons-view.component-DvriE0YR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-modules-document-management-large-icons-view.component-DvriE0YR.mjs","sources":["../../../../libs/modules/document-management/src/lib/features/document-explorer/views/large-icons/large-icons-view.component.ts","../../../../libs/modules/document-management/src/lib/features/document-explorer/views/large-icons/large-icons-view.component.html"],"sourcesContent":["import { Component, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXPDblClickDirective, AXPElementDataDirective } from '@acorex/platform/core';\nimport { AXPDocumentExplorerViewModel } from '../../document-explorer.viewmodel';\n\n@Component({\n    selector: 'axm-document-explorer-large-icons-view',\n    templateUrl: './large-icons-view.component.html',\n    styleUrls: ['./large-icons-view.component.scss'],\n    standalone: true,\n    imports: [CommonModule, AXPElementDataDirective, AXPDblClickDirective],\n})\nexport class AXMDocumentExplorerLargeIconsViewComponent {\n    protected vm = inject(AXPDocumentExplorerViewModel);\n} ","<!-- Large Icons View -->\n<div class=\"__content fa-4x\">\n  @for (folder of vm.folders(); track folder.id) {\n  <div\n    class=\"__explorer-item\"\n    [class.--selected]=\"vm.isItemSelected(folder)\"\n    [axp-data]=\"folder\"\n    (click)=\"vm.toggleSelect(folder)\"\n    (onDblClick)=\"vm.navigateToFolder(folder.id)\"\n  >\n    <div class=\"__icon ax-text-yellow-400\">\n      @if (vm.isLoadingFolder(folder.id)) {\n      <i class=\"fa-light fa-spinner fa-spin-pulse\"></i>\n      } @else {\n      <i class=\"fas fa-folder-closed\"></i>\n      }\n    </div>\n    <div class=\"__name\">{{ folder.name }}</div>\n  </div>\n  } @for (file of vm.files(); track file.id) { @let fileInfo = vm.getFileInfo(file.name);\n  <div\n    class=\"__explorer-item\"\n    [class.--selected]=\"vm.isItemSelected(file)\"\n    [axp-data]=\"file\"\n    (click)=\"vm.toggleSelect(file)\"\n    (onDblClick)=\"vm.openFile(file)\"\n  >\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n    </div>\n    <div class=\"__name\">{{ file.name }}</div>\n  </div>\n  }\n</div>\n"],"names":[],"mappings":";;;;;;MAYa,0CAA0C,CAAA;AAPvD,IAAA,WAAA,GAAA;AAQc,QAAA,IAAA,CAAA,EAAE,GAAG,MAAM,CAAC,4BAA4B,CAAC;AACtD;8GAFY,0CAA0C,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1C,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0CAA0C,kGCZvD,okCAkCA,EAAA,MAAA,EAAA,CAAA,m8BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDxBc,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,uBAAuB,8FAAE,oBAAoB,EAAA,QAAA,EAAA,cAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAE5D,0CAA0C,EAAA,UAAA,EAAA,CAAA;kBAPtD,SAAS;+BACI,wCAAwC,EAAA,UAAA,EAGtC,IAAI,EACP,OAAA,EAAA,CAAC,YAAY,EAAE,uBAAuB,EAAE,oBAAoB,CAAC,EAAA,QAAA,EAAA,okCAAA,EAAA,MAAA,EAAA,CAAA,m8BAAA,CAAA,EAAA;;;;;"}

package/fesm2022/acorex-modules-document-management-large-tiles-view.component-ByWrKvZe.mjs

@@ -0,0 +1,24 @@
+import * as i0 from '@angular/core';
+import { inject, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { AXPElementDataDirective, AXPDblClickDirective } from '@acorex/platform/core';
+import { A as AXPDocumentExplorerViewModel } from './acorex-modules-document-management-acorex-modules-document-management-_BOVaDOq.mjs';
+import * as i2 from '@acorex/core/format';
+import { AXFormatModule } from '@acorex/core/format';
+import { AXDateTimeModule } from '@acorex/core/date-time';
+
+class AXMDocumentExplorerLargeTilesViewComponent {
+    constructor() {
+        this.vm = inject(AXPDocumentExplorerViewModel);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentExplorerLargeTilesViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMDocumentExplorerLargeTilesViewComponent, isStandalone: true, selector: "axm-document-explorer-large-tiles-view", ngImport: i0, template: "<!-- Folders Section -->\n@if (vm.folders().length > 0) {\n<div class=\"__section fa-3x\">\n  <div class=\"__header\">\n    <h3 class=\"__title\">Folders</h3>\n  </div>\n  <div class=\"__content\">\n    @for (folder of vm.folders(); track folder.id) {\n    <div\n      class=\"__explorer-item\"\n      [class.--selected]=\"vm.isItemSelected(folder)\"\n      [axp-data]=\"folder\"\n      (click)=\"vm.toggleSelect(folder)\"\n      (onDblClick)=\"vm.navigateToFolder(folder.id)\"\n    >\n      <div class=\"__icon ax-text-yellow-400\">\n        @if (vm.isLoadingFolder(folder.id)) {\n        <i class=\"fa-light fa-spinner fa-spin-pulse\"></i>\n        } @else {\n        <i class=\"fas fa-folder-closed\"></i>\n        }\n      </div>\n      <span class=\"__name\">{{ folder.name }}</span>\n      <div class=\"__info\">\n        <span>{{ folder.childrenCount }} items</span>\n        <span>{{ folder.modifiedAt | format : 'datetime' : { format: 'datetime' } | async }}</span>\n      </div>\n    </div>\n    }\n  </div>\n</div>\n}\n\n<!-- Files Section -->\n@if (vm.files().length > 0) {\n<div class=\"__section fa-3x\">\n  <div class=\"__header\">\n    <h3 class=\"__title\">Files</h3>\n  </div>\n  <div class=\"__content\">\n    @for (file of vm.files(); track file.id) { @let fileInfo = vm.getFileInfo(file.name);\n    <div\n      class=\"__explorer-item\"\n      [class.--selected]=\"vm.isItemSelected(file)\"\n      [axp-data]=\"file\"\n      (click)=\"vm.toggleSelect(file)\"\n      (dblclick)=\"vm.openFile(file)\"\n    >\n      <div class=\"__icon\">\n        <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n      </div>\n      <span class=\"__name\">{{ file.name }}</span>\n      <div class=\"__info\">\n        <span>{{ file.size | format : 'filesize' | async }}</span>\n        <span>{{ file.modifiedAt | format : 'datetime' : { format: 'datetime' } | async }}</span>\n      </div>\n    </div>\n    }\n  </div>\n</div>\n}\n", styles: [":host .__section{margin-bottom:2rem}:host .__section:last-child{margin-bottom:0}:host .__section .__header .__title{margin-bottom:1rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}:host .__section .__content{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}:host .__section .__content .__explorer-item{display:flex;cursor:pointer;flex-direction:column;gap:.25rem;border-radius:.5rem;border-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host .__section .__content .__explorer-item:hover{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host .__section .__content .__explorer-item .__icon{margin-bottom:.5rem}:host .__section .__content .__explorer-item .__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:600}:host .__section .__content .__explorer-item .__info{display:flex;width:100%;justify-content:space-between;font-weight:600;opacity:.65}:host .__section .__content .__explorer-item .__info span{font-size:.75rem;line-height:1rem}:host .__section .__content .__explorer-item.--selected{background-color:rgb(var(--ax-sys-color-darker-surface));color:rgb(var(--ax-sys-color-on-darker-surface));border-color:rgb(var(--ax-sys-color-border-darker-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: AXPElementDataDirective, selector: "[axp-data]", inputs: ["axp-data", "axp-data-path"] }, { kind: "directive", type: AXPDblClickDirective, selector: "[onDblClick]", outputs: ["onDblClick"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXDateTimeModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentExplorerLargeTilesViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-document-explorer-large-tiles-view', standalone: true, imports: [CommonModule, AXPElementDataDirective, AXPDblClickDirective, AXFormatModule, AXDateTimeModule], template: "<!-- Folders Section -->\n@if (vm.folders().length > 0) {\n<div class=\"__section fa-3x\">\n  <div class=\"__header\">\n    <h3 class=\"__title\">Folders</h3>\n  </div>\n  <div class=\"__content\">\n    @for (folder of vm.folders(); track folder.id) {\n    <div\n      class=\"__explorer-item\"\n      [class.--selected]=\"vm.isItemSelected(folder)\"\n      [axp-data]=\"folder\"\n      (click)=\"vm.toggleSelect(folder)\"\n      (onDblClick)=\"vm.navigateToFolder(folder.id)\"\n    >\n      <div class=\"__icon ax-text-yellow-400\">\n        @if (vm.isLoadingFolder(folder.id)) {\n        <i class=\"fa-light fa-spinner fa-spin-pulse\"></i>\n        } @else {\n        <i class=\"fas fa-folder-closed\"></i>\n        }\n      </div>\n      <span class=\"__name\">{{ folder.name }}</span>\n      <div class=\"__info\">\n        <span>{{ folder.childrenCount }} items</span>\n        <span>{{ folder.modifiedAt | format : 'datetime' : { format: 'datetime' } | async }}</span>\n      </div>\n    </div>\n    }\n  </div>\n</div>\n}\n\n<!-- Files Section -->\n@if (vm.files().length > 0) {\n<div class=\"__section fa-3x\">\n  <div class=\"__header\">\n    <h3 class=\"__title\">Files</h3>\n  </div>\n  <div class=\"__content\">\n    @for (file of vm.files(); track file.id) { @let fileInfo = vm.getFileInfo(file.name);\n    <div\n      class=\"__explorer-item\"\n      [class.--selected]=\"vm.isItemSelected(file)\"\n      [axp-data]=\"file\"\n      (click)=\"vm.toggleSelect(file)\"\n      (dblclick)=\"vm.openFile(file)\"\n    >\n      <div class=\"__icon\">\n        <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n      </div>\n      <span class=\"__name\">{{ file.name }}</span>\n      <div class=\"__info\">\n        <span>{{ file.size | format : 'filesize' | async }}</span>\n        <span>{{ file.modifiedAt | format : 'datetime' : { format: 'datetime' } | async }}</span>\n      </div>\n    </div>\n    }\n  </div>\n</div>\n}\n", styles: [":host .__section{margin-bottom:2rem}:host .__section:last-child{margin-bottom:0}:host .__section .__header .__title{margin-bottom:1rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}:host .__section .__content{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}:host .__section .__content .__explorer-item{display:flex;cursor:pointer;flex-direction:column;gap:.25rem;border-radius:.5rem;border-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host .__section .__content .__explorer-item:hover{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host .__section .__content .__explorer-item .__icon{margin-bottom:.5rem}:host .__section .__content .__explorer-item .__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:600}:host .__section .__content .__explorer-item .__info{display:flex;width:100%;justify-content:space-between;font-weight:600;opacity:.65}:host .__section .__content .__explorer-item .__info span{font-size:.75rem;line-height:1rem}:host .__section .__content .__explorer-item.--selected{background-color:rgb(var(--ax-sys-color-darker-surface));color:rgb(var(--ax-sys-color-on-darker-surface));border-color:rgb(var(--ax-sys-color-border-darker-surface))}\n"] }]
+        }] });
+
+export { AXMDocumentExplorerLargeTilesViewComponent };
+//# sourceMappingURL=acorex-modules-document-management-large-tiles-view.component-ByWrKvZe.mjs.map

package/fesm2022/acorex-modules-document-management-large-tiles-view.component-ByWrKvZe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-modules-document-management-large-tiles-view.component-ByWrKvZe.mjs","sources":["../../../../libs/modules/document-management/src/lib/features/document-explorer/views/large-tiles/large-tiles-view.component.ts","../../../../libs/modules/document-management/src/lib/features/document-explorer/views/large-tiles/large-tiles-view.component.html"],"sourcesContent":["import { Component, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXPDblClickDirective, AXPElementDataDirective } from '@acorex/platform/core';\nimport { AXPDocumentExplorerViewModel } from '../../document-explorer.viewmodel';\nimport { AXFormatModule } from '@acorex/core/format';\nimport { AXDateTimeModule } from '@acorex/core/date-time';\n\n@Component({\n    selector: 'axm-document-explorer-large-tiles-view',\n    templateUrl: './large-tiles-view.component.html',\n    styleUrls: ['./large-tiles-view.component.scss'],\n    standalone: true,\n    imports: [CommonModule, AXPElementDataDirective, AXPDblClickDirective, AXFormatModule, AXDateTimeModule],\n})\nexport class AXMDocumentExplorerLargeTilesViewComponent {\n    protected vm = inject(AXPDocumentExplorerViewModel);\n} ","<!-- Folders Section -->\n@if (vm.folders().length > 0) {\n<div class=\"__section fa-3x\">\n  <div class=\"__header\">\n    <h3 class=\"__title\">Folders</h3>\n  </div>\n  <div class=\"__content\">\n    @for (folder of vm.folders(); track folder.id) {\n    <div\n      class=\"__explorer-item\"\n      [class.--selected]=\"vm.isItemSelected(folder)\"\n      [axp-data]=\"folder\"\n      (click)=\"vm.toggleSelect(folder)\"\n      (onDblClick)=\"vm.navigateToFolder(folder.id)\"\n    >\n      <div class=\"__icon ax-text-yellow-400\">\n        @if (vm.isLoadingFolder(folder.id)) {\n        <i class=\"fa-light fa-spinner fa-spin-pulse\"></i>\n        } @else {\n        <i class=\"fas fa-folder-closed\"></i>\n        }\n      </div>\n      <span class=\"__name\">{{ folder.name }}</span>\n      <div class=\"__info\">\n        <span>{{ folder.childrenCount }} items</span>\n        <span>{{ folder.modifiedAt | format : 'datetime' : { format: 'datetime' } | async }}</span>\n      </div>\n    </div>\n    }\n  </div>\n</div>\n}\n\n<!-- Files Section -->\n@if (vm.files().length > 0) {\n<div class=\"__section fa-3x\">\n  <div class=\"__header\">\n    <h3 class=\"__title\">Files</h3>\n  </div>\n  <div class=\"__content\">\n    @for (file of vm.files(); track file.id) { @let fileInfo = vm.getFileInfo(file.name);\n    <div\n      class=\"__explorer-item\"\n      [class.--selected]=\"vm.isItemSelected(file)\"\n      [axp-data]=\"file\"\n      (click)=\"vm.toggleSelect(file)\"\n      (dblclick)=\"vm.openFile(file)\"\n    >\n      <div class=\"__icon\">\n        <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n      </div>\n      <span class=\"__name\">{{ file.name }}</span>\n      <div class=\"__info\">\n        <span>{{ file.size | format : 'filesize' | async }}</span>\n        <span>{{ file.modifiedAt | format : 'datetime' : { format: 'datetime' } | async }}</span>\n      </div>\n    </div>\n    }\n  </div>\n</div>\n}\n"],"names":[],"mappings":";;;;;;;;;;MAca,0CAA0C,CAAA;AAPvD,IAAA,WAAA,GAAA;AAQc,QAAA,IAAA,CAAA,EAAE,GAAG,MAAM,CAAC,4BAA4B,CAAC;AACtD;8GAFY,0CAA0C,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA1C,0CAA0C,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wCAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdvD,o5DA6DA,EAAA,MAAA,EAAA,CAAA,ygDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDjDc,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,uBAAuB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,oBAAoB,EAAA,QAAA,EAAA,cAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,cAAc,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAE9F,0CAA0C,EAAA,UAAA,EAAA,CAAA;kBAPtD,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,wCAAwC,EAGtC,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,YAAY,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,cAAc,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,o5DAAA,EAAA,MAAA,EAAA,CAAA,ygDAAA,CAAA,EAAA;;;;;"}

package/fesm2022/acorex-modules-document-management-list-view.component-B6J6Tokv.mjs

@@ -0,0 +1,20 @@
+import * as i0 from '@angular/core';
+import { inject, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXPElementDataDirective, AXPDblClickDirective } from '@acorex/platform/core';
+import { A as AXPDocumentExplorerViewModel } from './acorex-modules-document-management-acorex-modules-document-management-_BOVaDOq.mjs';
+
+class AXMDocumentExplorerListViewComponent {
+    constructor() {
+        this.vm = inject(AXPDocumentExplorerViewModel);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentExplorerListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMDocumentExplorerListViewComponent, isStandalone: true, selector: "axm-document-explorer-list-view", ngImport: i0, template: "<!-- List View -->\n<div class=\"__content fa-xl\">\n  @for (folder of vm.folders(); track folder.id) {\n  <div\n    class=\"__explorer-item\"\n    [class.--selected]=\"vm.isItemSelected(folder)\"\n    [axp-data]=\"folder\"\n    (click)=\"vm.toggleSelect(folder)\"\n    (onDblClick)=\"vm.navigateToFolder(folder.id)\"\n  >\n    <div class=\"__icon ax-text-yellow-400\">\n      @if (vm.isLoadingFolder(folder.id)) {\n      <i class=\"fa-light fa-spinner fa-spin-pulse\"></i>\n      } @else {\n      <i class=\"fas fa-folder-closed\"></i>\n      }\n    </div>\n    <div class=\"__name\">{{ folder.name }}</div>\n  </div>\n  } @for (file of vm.files(); track file.id) { @let fileInfo = vm.getFileInfo(file.name);\n  <div\n    class=\"__explorer-item\"\n    [class.--selected]=\"vm.isItemSelected(file)\"\n    [axp-data]=\"file\"\n    (click)=\"vm.toggleSelect(file)\"\n    (onDblClick)=\"vm.openFile(file)\"\n  >\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n    </div>\n    <div class=\"__name\">{{ file.name }}</div>\n  </div>\n  }\n</div>\n", styles: [":host{width:100%}:host .__content{display:flex;flex-direction:column;gap:.125rem}:host .__content .__explorer-item{display:flex;cursor:pointer;align-items:center;gap:.75rem;border-radius:.375rem;padding:.5rem}:host .__content .__explorer-item:hover{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host .__content .__explorer-item .__icon{width:1.5rem;flex-shrink:0}:host .__content .__explorer-item .__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:500}:host .__content .__explorer-item.--selected{background-color:rgb(var(--ax-sys-color-darker-surface));color:rgb(var(--ax-sys-color-on-darker-surface));border-color:rgb(var(--ax-sys-color-border-darker-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: AXPElementDataDirective, selector: "[axp-data]", inputs: ["axp-data", "axp-data-path"] }, { kind: "directive", type: AXPDblClickDirective, selector: "[onDblClick]", outputs: ["onDblClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDocumentExplorerListViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-document-explorer-list-view', standalone: true, imports: [CommonModule, AXPElementDataDirective, AXPDblClickDirective], template: "<!-- List View -->\n<div class=\"__content fa-xl\">\n  @for (folder of vm.folders(); track folder.id) {\n  <div\n    class=\"__explorer-item\"\n    [class.--selected]=\"vm.isItemSelected(folder)\"\n    [axp-data]=\"folder\"\n    (click)=\"vm.toggleSelect(folder)\"\n    (onDblClick)=\"vm.navigateToFolder(folder.id)\"\n  >\n    <div class=\"__icon ax-text-yellow-400\">\n      @if (vm.isLoadingFolder(folder.id)) {\n      <i class=\"fa-light fa-spinner fa-spin-pulse\"></i>\n      } @else {\n      <i class=\"fas fa-folder-closed\"></i>\n      }\n    </div>\n    <div class=\"__name\">{{ folder.name }}</div>\n  </div>\n  } @for (file of vm.files(); track file.id) { @let fileInfo = vm.getFileInfo(file.name);\n  <div\n    class=\"__explorer-item\"\n    [class.--selected]=\"vm.isItemSelected(file)\"\n    [axp-data]=\"file\"\n    (click)=\"vm.toggleSelect(file)\"\n    (onDblClick)=\"vm.openFile(file)\"\n  >\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n    </div>\n    <div class=\"__name\">{{ file.name }}</div>\n  </div>\n  }\n</div>\n", styles: [":host{width:100%}:host .__content{display:flex;flex-direction:column;gap:.125rem}:host .__content .__explorer-item{display:flex;cursor:pointer;align-items:center;gap:.75rem;border-radius:.375rem;padding:.5rem}:host .__content .__explorer-item:hover{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host .__content .__explorer-item .__icon{width:1.5rem;flex-shrink:0}:host .__content .__explorer-item .__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:500}:host .__content .__explorer-item.--selected{background-color:rgb(var(--ax-sys-color-darker-surface));color:rgb(var(--ax-sys-color-on-darker-surface));border-color:rgb(var(--ax-sys-color-border-darker-surface))}\n"] }]
+        }] });
+
+export { AXMDocumentExplorerListViewComponent };
+//# sourceMappingURL=acorex-modules-document-management-list-view.component-B6J6Tokv.mjs.map

package/fesm2022/acorex-modules-document-management-list-view.component-B6J6Tokv.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-modules-document-management-list-view.component-B6J6Tokv.mjs","sources":["../../../../libs/modules/document-management/src/lib/features/document-explorer/views/list/list-view.component.ts","../../../../libs/modules/document-management/src/lib/features/document-explorer/views/list/list-view.component.html"],"sourcesContent":["import { Component, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXPDblClickDirective, AXPElementDataDirective } from '@acorex/platform/core';\nimport { AXPDocumentExplorerViewModel } from '../../document-explorer.viewmodel';\n\n@Component({\n    selector: 'axm-document-explorer-list-view',\n    templateUrl: './list-view.component.html',\n    styleUrls: ['./list-view.component.scss'],\n    standalone: true,\n    imports: [CommonModule, AXPElementDataDirective, AXPDblClickDirective],\n})\nexport class AXMDocumentExplorerListViewComponent {\n    protected vm = inject(AXPDocumentExplorerViewModel);\n} ","<!-- List View -->\n<div class=\"__content fa-xl\">\n  @for (folder of vm.folders(); track folder.id) {\n  <div\n    class=\"__explorer-item\"\n    [class.--selected]=\"vm.isItemSelected(folder)\"\n    [axp-data]=\"folder\"\n    (click)=\"vm.toggleSelect(folder)\"\n    (onDblClick)=\"vm.navigateToFolder(folder.id)\"\n  >\n    <div class=\"__icon ax-text-yellow-400\">\n      @if (vm.isLoadingFolder(folder.id)) {\n      <i class=\"fa-light fa-spinner fa-spin-pulse\"></i>\n      } @else {\n      <i class=\"fas fa-folder-closed\"></i>\n      }\n    </div>\n    <div class=\"__name\">{{ folder.name }}</div>\n  </div>\n  } @for (file of vm.files(); track file.id) { @let fileInfo = vm.getFileInfo(file.name);\n  <div\n    class=\"__explorer-item\"\n    [class.--selected]=\"vm.isItemSelected(file)\"\n    [axp-data]=\"file\"\n    (click)=\"vm.toggleSelect(file)\"\n    (onDblClick)=\"vm.openFile(file)\"\n  >\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n    </div>\n    <div class=\"__name\">{{ file.name }}</div>\n  </div>\n  }\n</div>\n"],"names":[],"mappings":";;;;;;MAYa,oCAAoC,CAAA;AAPjD,IAAA,WAAA,GAAA;AAQc,QAAA,IAAA,CAAA,EAAE,GAAG,MAAM,CAAC,4BAA4B,CAAC;AACtD;8GAFY,oCAAoC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oCAAoC,2FCZjD,6jCAkCA,EAAA,MAAA,EAAA,CAAA,m2BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDxBc,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,uBAAuB,8FAAE,oBAAoB,EAAA,QAAA,EAAA,cAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAE5D,oCAAoC,EAAA,UAAA,EAAA,CAAA;kBAPhD,SAAS;+BACI,iCAAiC,EAAA,UAAA,EAG/B,IAAI,EACP,OAAA,EAAA,CAAC,YAAY,EAAE,uBAAuB,EAAE,oBAAoB,CAAC,EAAA,QAAA,EAAA,6jCAAA,EAAA,MAAA,EAAA,CAAA,m2BAAA,CAAA,EAAA;;;;;"}