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-BsfSETMk.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: "20.3.4", ngImport: i0, type: AXMDocumentExplorerLargeTilesViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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: "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: "20.3.4", 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-DUvlPflF.mjs.map
