import * as i0 from '@angular/core';
import { inject, Component } from '@angular/core';
import { AXPElementDataDirective, AXPDblClickDirective } from '@acorex/platform/core';
import { A as AXPDocumentExplorerViewModel } from './acorex-modules-document-management-acorex-modules-document-management-BsfSETMk.mjs';

class AXMDocumentExplorerSmallIconsViewComponent {
    constructor() {
        this.vm = inject(AXPDocumentExplorerViewModel);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXMDocumentExplorerSmallIconsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXMDocumentExplorerSmallIconsViewComponent, isStandalone: true, selector: "axm-document-explorer-small-icons-view", ngImport: i0, template: "<!-- Small Icons View -->\n<div class=\"__content fa-2x\">\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(80px,1fr));gap:.5rem}:host .__content .__explorer-item{display:flex;cursor:pointer;flex-direction:column;align-items:center;gap:.25rem;border-radius:.375rem;padding:.5rem;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:.75rem;line-height:1rem;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: "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: "20.3.4", ngImport: i0, type: AXMDocumentExplorerSmallIconsViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'axm-document-explorer-small-icons-view', standalone: true, imports: [AXPElementDataDirective, AXPDblClickDirective], template: "<!-- Small Icons View -->\n<div class=\"__content fa-2x\">\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(80px,1fr));gap:.5rem}:host .__content .__explorer-item{display:flex;cursor:pointer;flex-direction:column;align-items:center;gap:.25rem;border-radius:.375rem;padding:.5rem;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:.75rem;line-height:1rem;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 { AXMDocumentExplorerSmallIconsViewComponent };
//# sourceMappingURL=acorex-modules-document-management-small-icons-view.component-DJI_f_9F.mjs.map
