@acorex/modules 21.0.0-next.42 → 21.0.0-next.44

package/fesm2022/acorex-modules-document-management-large-tiles-view.component-BZWN7WCX.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 { AXPDocumentExplorerViewModel } from './acorex-modules-document-management.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: "21.2.9", ngImport: i0, type: AXMDocumentExplorerLargeTilesViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMDocumentExplorerLargeTilesViewComponent, isStandalone: true, selector: "axm-document-explorer-large-tiles-view", ngImport: i0, template: "<!-- Folders Section -->\n@if (vm.filteredFolders().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.filteredFolders(); track folder.id) {\n    @let folderDisplay = vm.getNodeDisplayInfo(folder);\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\" [class.__shortcut]=\"folderDisplay.isShortcut\">\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        @if (folderDisplay.isShortcut) {\n        <i class=\"__shortcut-arrow fa-light fa-up-right-from-square\" aria-hidden=\"true\"></i>\n        }\n      </div>\n      <span class=\"__name\">{{ folder.name }}</span>\n      <div class=\"__info\">\n        <span>{{ folder.children?.length ?? 0 }} 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.filteredFiles().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.filteredFiles(); track file.id) { @let fileDisplay = vm.getNodeDisplayInfo(file);\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\" [class.__shortcut]=\"fileDisplay.isShortcut\">\n        <i class=\"fa-fw {{ fileDisplay.icon }} fa-solid\"></i>\n        @if (fileDisplay.isShortcut) {\n        <i class=\"__shortcut-arrow fa-light fa-up-right-from-square\" aria-hidden=\"true\"></i>\n        }\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{position:relative;margin-bottom:.5rem;display:inline-flex}:host .__section .__content .__explorer-item .__icon.__shortcut .__shortcut-arrow{position:absolute;bottom:0;right:0;font-size:.5em;opacity:.9}: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: "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: "ngmodule", type: AXDateTimeModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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.filteredFolders().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.filteredFolders(); track folder.id) {\n    @let folderDisplay = vm.getNodeDisplayInfo(folder);\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\" [class.__shortcut]=\"folderDisplay.isShortcut\">\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        @if (folderDisplay.isShortcut) {\n        <i class=\"__shortcut-arrow fa-light fa-up-right-from-square\" aria-hidden=\"true\"></i>\n        }\n      </div>\n      <span class=\"__name\">{{ folder.name }}</span>\n      <div class=\"__info\">\n        <span>{{ folder.children?.length ?? 0 }} 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.filteredFiles().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.filteredFiles(); track file.id) { @let fileDisplay = vm.getNodeDisplayInfo(file);\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\" [class.__shortcut]=\"fileDisplay.isShortcut\">\n        <i class=\"fa-fw {{ fileDisplay.icon }} fa-solid\"></i>\n        @if (fileDisplay.isShortcut) {\n        <i class=\"__shortcut-arrow fa-light fa-up-right-from-square\" aria-hidden=\"true\"></i>\n        }\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{position:relative;margin-bottom:.5rem;display:inline-flex}:host .__section .__content .__explorer-item .__icon.__shortcut .__shortcut-arrow{position:absolute;bottom:0;right:0;font-size:.5em;opacity:.9}: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-BZWN7WCX.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-modules-document-management-large-tiles-view.component-BZWN7WCX.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.filteredFolders().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.filteredFolders(); track folder.id) {\n    @let folderDisplay = vm.getNodeDisplayInfo(folder);\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\" [class.__shortcut]=\"folderDisplay.isShortcut\">\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        @if (folderDisplay.isShortcut) {\n        <i class=\"__shortcut-arrow fa-light fa-up-right-from-square\" aria-hidden=\"true\"></i>\n        }\n      </div>\n      <span class=\"__name\">{{ folder.name }}</span>\n      <div class=\"__info\">\n        <span>{{ folder.children?.length ?? 0 }} 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.filteredFiles().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.filteredFiles(); track file.id) { @let fileDisplay = vm.getNodeDisplayInfo(file);\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\" [class.__shortcut]=\"fileDisplay.isShortcut\">\n        <i class=\"fa-fw {{ fileDisplay.icon }} fa-solid\"></i>\n        @if (fileDisplay.isShortcut) {\n        <i class=\"__shortcut-arrow fa-light fa-up-right-from-square\" aria-hidden=\"true\"></i>\n        }\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,IAAA;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,u4EAoEA,EAAA,MAAA,EAAA,CAAA,8rDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDxDc,YAAY,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,UAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAE9F,0CAA0C,EAAA,UAAA,EAAA,CAAA;kBAPtD,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,wCAAwC,EAAA,UAAA,EAGtC,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,cAAc,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,u4EAAA,EAAA,MAAA,EAAA,CAAA,8rDAAA,CAAA,EAAA;;;;;"}

package/fesm2022/acorex-modules-document-management-small-tiles-view.component-DI6QQ2St.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 { AXPDocumentExplorerViewModel } from './acorex-modules-document-management.mjs';
+import * as i2 from '@acorex/core/format';
+import { AXFormatModule } from '@acorex/core/format';
+import { AXDateTimeModule } from '@acorex/core/date-time';
+
+class AXMDocumentExplorerSmallTilesViewComponent {
+    constructor() {
+        this.vm = inject(AXPDocumentExplorerViewModel);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMDocumentExplorerSmallTilesViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMDocumentExplorerSmallTilesViewComponent, isStandalone: true, selector: "axm-document-explorer-small-tiles-view", ngImport: i0, template: "<!-- Folders Section -->\n@if (vm.filteredFolders().length > 0) {\n<div class=\"__section\">\n  <div class=\"__header\">\n    <h3 class=\"__title\">Folders</h3>\n  </div>\n  <div class=\"__content\">\n    @for (folder of vm.filteredFolders(); track folder.id) {\n    @let folderDisplay = vm.getNodeDisplayInfo(folder);\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 fa-2x\" [class.__shortcut]=\"folderDisplay.isShortcut\">\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        @if (folderDisplay.isShortcut) {\n        <i class=\"__shortcut-arrow fa-light fa-up-right-from-square\" aria-hidden=\"true\"></i>\n        }\n      </div>\n      <div class=\"__details\">\n        <div class=\"__name\">{{ folder.name }}</div>\n        <div class=\"__info\">\n          <span>{{ folder.children?.length ?? 0 }} items</span>\n          <span>{{ folder.modifiedAt | format : 'datetime' : { format: 'datetime' } | async }}</span>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n</div>\n}\n\n<!-- Files Section -->\n@if (vm.filteredFiles().length > 0) {\n<div class=\"__section\">\n  <div class=\"__header\">\n    <h3 class=\"__title\">Files</h3>\n  </div>\n  <div class=\"__content\">\n    @for (file of vm.filteredFiles(); track file.id) { @let fileDisplay = vm.getNodeDisplayInfo(file);\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 fa-2x\" [class.__shortcut]=\"fileDisplay.isShortcut\">\n        <i class=\"fa-fw {{ fileDisplay.icon }} fa-solid\"></i>\n        @if (fileDisplay.isShortcut) {\n        <i class=\"__shortcut-arrow fa-light fa-up-right-from-square\" aria-hidden=\"true\"></i>\n        }\n      </div>\n      <div class=\"__details\">\n        <div class=\"__name\">{{ file.name }}</div>\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    </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(250px,1fr));gap:.5rem}:host .__section .__content .__explorer-item{display:flex;cursor:pointer;align-items:center;gap:.75rem;border-radius:.5rem;border-width:1px;padding:.5rem;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{position:relative;display:inline-flex;flex-shrink:0}:host .__section .__content .__explorer-item .__icon.__shortcut .__shortcut-arrow{position:absolute;bottom:0;right:0;font-size:.5em;opacity:.9}:host .__section .__content .__explorer-item .__details{min-width:0px;flex:1 1 0%}:host .__section .__content .__explorer-item .__details .__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 .__details .__info{display:flex;width:100%;justify-content:space-between;font-weight:600;opacity:.65}:host .__section .__content .__explorer-item .__details .__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: "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: "ngmodule", type: AXDateTimeModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMDocumentExplorerSmallTilesViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-document-explorer-small-tiles-view', standalone: true, imports: [CommonModule, AXPElementDataDirective, AXPDblClickDirective, AXFormatModule, AXDateTimeModule], template: "<!-- Folders Section -->\n@if (vm.filteredFolders().length > 0) {\n<div class=\"__section\">\n  <div class=\"__header\">\n    <h3 class=\"__title\">Folders</h3>\n  </div>\n  <div class=\"__content\">\n    @for (folder of vm.filteredFolders(); track folder.id) {\n    @let folderDisplay = vm.getNodeDisplayInfo(folder);\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 fa-2x\" [class.__shortcut]=\"folderDisplay.isShortcut\">\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        @if (folderDisplay.isShortcut) {\n        <i class=\"__shortcut-arrow fa-light fa-up-right-from-square\" aria-hidden=\"true\"></i>\n        }\n      </div>\n      <div class=\"__details\">\n        <div class=\"__name\">{{ folder.name }}</div>\n        <div class=\"__info\">\n          <span>{{ folder.children?.length ?? 0 }} items</span>\n          <span>{{ folder.modifiedAt | format : 'datetime' : { format: 'datetime' } | async }}</span>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n</div>\n}\n\n<!-- Files Section -->\n@if (vm.filteredFiles().length > 0) {\n<div class=\"__section\">\n  <div class=\"__header\">\n    <h3 class=\"__title\">Files</h3>\n  </div>\n  <div class=\"__content\">\n    @for (file of vm.filteredFiles(); track file.id) { @let fileDisplay = vm.getNodeDisplayInfo(file);\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 fa-2x\" [class.__shortcut]=\"fileDisplay.isShortcut\">\n        <i class=\"fa-fw {{ fileDisplay.icon }} fa-solid\"></i>\n        @if (fileDisplay.isShortcut) {\n        <i class=\"__shortcut-arrow fa-light fa-up-right-from-square\" aria-hidden=\"true\"></i>\n        }\n      </div>\n      <div class=\"__details\">\n        <div class=\"__name\">{{ file.name }}</div>\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    </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(250px,1fr));gap:.5rem}:host .__section .__content .__explorer-item{display:flex;cursor:pointer;align-items:center;gap:.75rem;border-radius:.5rem;border-width:1px;padding:.5rem;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{position:relative;display:inline-flex;flex-shrink:0}:host .__section .__content .__explorer-item .__icon.__shortcut .__shortcut-arrow{position:absolute;bottom:0;right:0;font-size:.5em;opacity:.9}:host .__section .__content .__explorer-item .__details{min-width:0px;flex:1 1 0%}:host .__section .__content .__explorer-item .__details .__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 .__details .__info{display:flex;width:100%;justify-content:space-between;font-weight:600;opacity:.65}:host .__section .__content .__explorer-item .__details .__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 { AXMDocumentExplorerSmallTilesViewComponent };
+//# sourceMappingURL=acorex-modules-document-management-small-tiles-view.component-DI6QQ2St.mjs.map

package/fesm2022/acorex-modules-document-management-small-tiles-view.component-DI6QQ2St.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-modules-document-management-small-tiles-view.component-DI6QQ2St.mjs","sources":["../../../../libs/modules/document-management/src/lib/features/document-explorer/views/small-tiles/small-tiles-view.component.ts","../../../../libs/modules/document-management/src/lib/features/document-explorer/views/small-tiles/small-tiles-view.component.html"],"sourcesContent":["import { Component, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXPElementDataDirective, AXPDblClickDirective } 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-small-tiles-view',\n    templateUrl: './small-tiles-view.component.html',\n    styleUrls: ['./small-tiles-view.component.scss'],\n    standalone: true,\n    imports: [CommonModule, AXPElementDataDirective, AXPDblClickDirective, AXFormatModule, AXDateTimeModule],\n})\nexport class AXMDocumentExplorerSmallTilesViewComponent {\n    protected vm = inject(AXPDocumentExplorerViewModel);\n} ","<!-- Folders Section -->\n@if (vm.filteredFolders().length > 0) {\n<div class=\"__section\">\n  <div class=\"__header\">\n    <h3 class=\"__title\">Folders</h3>\n  </div>\n  <div class=\"__content\">\n    @for (folder of vm.filteredFolders(); track folder.id) {\n    @let folderDisplay = vm.getNodeDisplayInfo(folder);\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 fa-2x\" [class.__shortcut]=\"folderDisplay.isShortcut\">\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        @if (folderDisplay.isShortcut) {\n        <i class=\"__shortcut-arrow fa-light fa-up-right-from-square\" aria-hidden=\"true\"></i>\n        }\n      </div>\n      <div class=\"__details\">\n        <div class=\"__name\">{{ folder.name }}</div>\n        <div class=\"__info\">\n          <span>{{ folder.children?.length ?? 0 }} items</span>\n          <span>{{ folder.modifiedAt | format : 'datetime' : { format: 'datetime' } | async }}</span>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n</div>\n}\n\n<!-- Files Section -->\n@if (vm.filteredFiles().length > 0) {\n<div class=\"__section\">\n  <div class=\"__header\">\n    <h3 class=\"__title\">Files</h3>\n  </div>\n  <div class=\"__content\">\n    @for (file of vm.filteredFiles(); track file.id) { @let fileDisplay = vm.getNodeDisplayInfo(file);\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 fa-2x\" [class.__shortcut]=\"fileDisplay.isShortcut\">\n        <i class=\"fa-fw {{ fileDisplay.icon }} fa-solid\"></i>\n        @if (fileDisplay.isShortcut) {\n        <i class=\"__shortcut-arrow fa-light fa-up-right-from-square\" aria-hidden=\"true\"></i>\n        }\n      </div>\n      <div class=\"__details\">\n        <div class=\"__name\">{{ file.name }}</div>\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    </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,IAAA;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,u/EAwEA,EAAA,MAAA,EAAA,CAAA,0yDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED5Dc,YAAY,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,UAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAE9F,0CAA0C,EAAA,UAAA,EAAA,CAAA;kBAPtD,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,wCAAwC,EAAA,UAAA,EAGtC,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,cAAc,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,u/EAAA,EAAA,MAAA,EAAA,CAAA,0yDAAA,CAAA,EAAA;;;;;"}