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 } 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 AXMDocumentExplorerDetailsViewComponent {
    constructor() {
        this.vm = inject(AXPDocumentExplorerViewModel);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXMDocumentExplorerDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXMDocumentExplorerDetailsViewComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!-- Details View -->\n<div class=\"details-view\">\n  <table class=\"items-table\">\n    <thead>\n      <tr>\n        <th class=\"name-column\">Name</th>\n        <th class=\"type-column\">Type</th>\n        <th class=\"size-column\">Size</th>\n        <th class=\"date-column\">Last Modified</th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (folder of vm.folders(); track folder.id) {\n      <tr\n        class=\"folder-row\"\n        (dblclick)=\"vm.navigateToFolder(folder.id)\"\n        (click)=\"vm.toggleSelect(folder)\"\n        [class.--selected]=\"vm.isItemSelected(folder)\"\n      >\n        <td class=\"name-column axp-explorer-item\" [axp-data]=\"folder\">\n          <div class=\"item-name\">\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            <span>{{ folder.name }}</span>\n          </div>\n        </td>\n        <td class=\"type-column axp-explorer-item\" [axp-data]=\"folder\">Folder</td>\n        <td class=\"size-column axp-explorer-item\" [axp-data]=\"folder\">\n          {{ folder.size | format : 'filesize' | async }}\n        </td>\n        <td class=\"date-column axp-explorer-item\" [axp-data]=\"folder\">\n          {{ folder.modifiedAt | format : 'datetime' : { format: 'datetime' } | async }}\n        </td>\n      </tr>\n      } @for (file of vm.files(); track file.id) { @let fileInfo = vm.getFileInfo(file.name);\n      <tr\n        class=\"file-row\"\n        (dblclick)=\"vm.openFile(file)\"\n        (click)=\"vm.toggleSelect(file)\"\n        [class.--selected]=\"vm.isItemSelected(file)\"\n      >\n        <td class=\"name-column axp-explorer-item\" [axp-data]=\"file\">\n          <div class=\"item-name hover:ax-underline\">\n            <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n            <span>{{ file.name }}</span>\n          </div>\n        </td>\n        <td class=\"type-column axp-explorer-item\" [axp-data]=\"file\">{{ fileInfo.type }}</td>\n        <td class=\"size-column axp-explorer-item\" [axp-data]=\"file\">{{ file.size | format : 'filesize' | async }}</td>\n        <td class=\"date-column axp-explorer-item\" [axp-data]=\"file\">\n          {{ file.modifiedAt | format : 'datetime' : { format: 'datetime' } | async }}\n        </td>\n      </tr>\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [":host .details-view .items-table{width:100%;border-collapse:collapse}:host .details-view .items-table th{border-bottom-width:1px;padding:.75rem;text-align:start;font-weight:500;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host .details-view .items-table th.name-column{width:50%}:host .details-view .items-table th.type-column{width:20%}:host .details-view .items-table th.size-column{width:15%}:host .details-view .items-table th.date-column{width:15%}:host .details-view .items-table td{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1));padding:.75rem}:host .details-view .items-table td.name-column .item-name{display:flex;align-items:center;gap:.5rem}:host .details-view .items-table td.name-column .item-name i{font-size:1.25rem;line-height:1.75rem}:host .details-view .items-table tr{cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .details-view .items-table tr:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}:host .details-view .items-table tr.folder-row td .item-name i{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: AXPElementDataDirective, selector: "[axp-data]", inputs: ["axp-data", "axp-data-path"] }, { 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: AXMDocumentExplorerDetailsViewComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [CommonModule, AXPElementDataDirective, AXFormatModule, AXDateTimeModule], template: "<!-- Details View -->\n<div class=\"details-view\">\n  <table class=\"items-table\">\n    <thead>\n      <tr>\n        <th class=\"name-column\">Name</th>\n        <th class=\"type-column\">Type</th>\n        <th class=\"size-column\">Size</th>\n        <th class=\"date-column\">Last Modified</th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (folder of vm.folders(); track folder.id) {\n      <tr\n        class=\"folder-row\"\n        (dblclick)=\"vm.navigateToFolder(folder.id)\"\n        (click)=\"vm.toggleSelect(folder)\"\n        [class.--selected]=\"vm.isItemSelected(folder)\"\n      >\n        <td class=\"name-column axp-explorer-item\" [axp-data]=\"folder\">\n          <div class=\"item-name\">\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            <span>{{ folder.name }}</span>\n          </div>\n        </td>\n        <td class=\"type-column axp-explorer-item\" [axp-data]=\"folder\">Folder</td>\n        <td class=\"size-column axp-explorer-item\" [axp-data]=\"folder\">\n          {{ folder.size | format : 'filesize' | async }}\n        </td>\n        <td class=\"date-column axp-explorer-item\" [axp-data]=\"folder\">\n          {{ folder.modifiedAt | format : 'datetime' : { format: 'datetime' } | async }}\n        </td>\n      </tr>\n      } @for (file of vm.files(); track file.id) { @let fileInfo = vm.getFileInfo(file.name);\n      <tr\n        class=\"file-row\"\n        (dblclick)=\"vm.openFile(file)\"\n        (click)=\"vm.toggleSelect(file)\"\n        [class.--selected]=\"vm.isItemSelected(file)\"\n      >\n        <td class=\"name-column axp-explorer-item\" [axp-data]=\"file\">\n          <div class=\"item-name hover:ax-underline\">\n            <i class=\"fa-fw {{ fileInfo.icon }} fa-solid\"></i>\n            <span>{{ file.name }}</span>\n          </div>\n        </td>\n        <td class=\"type-column axp-explorer-item\" [axp-data]=\"file\">{{ fileInfo.type }}</td>\n        <td class=\"size-column axp-explorer-item\" [axp-data]=\"file\">{{ file.size | format : 'filesize' | async }}</td>\n        <td class=\"date-column axp-explorer-item\" [axp-data]=\"file\">\n          {{ file.modifiedAt | format : 'datetime' : { format: 'datetime' } | async }}\n        </td>\n      </tr>\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [":host .details-view .items-table{width:100%;border-collapse:collapse}:host .details-view .items-table th{border-bottom-width:1px;padding:.75rem;text-align:start;font-weight:500;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host .details-view .items-table th.name-column{width:50%}:host .details-view .items-table th.type-column{width:20%}:host .details-view .items-table th.size-column{width:15%}:host .details-view .items-table th.date-column{width:15%}:host .details-view .items-table td{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1));padding:.75rem}:host .details-view .items-table td.name-column .item-name{display:flex;align-items:center;gap:.5rem}:host .details-view .items-table td.name-column .item-name i{font-size:1.25rem;line-height:1.75rem}:host .details-view .items-table tr{cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .details-view .items-table tr:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}:host .details-view .items-table tr.folder-row td .item-name i{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}\n"] }]
        }] });

export { AXMDocumentExplorerDetailsViewComponent };
//# sourceMappingURL=acorex-modules-document-management-details-view.component-DeI-r7-g.mjs.map
