@masterteam/document-library 0.0.1

package/fesm2022/masterteam-document-library.mjs

@@ -0,0 +1,1865 @@
+import * as i1$1 from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i0 from '@angular/core';
+import { inject, Injectable, input, signal, effect, Component, computed, output, viewChild, untracked } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { map, filter, isObservable, firstValueFrom } from 'rxjs';
+import { Breadcrumb } from '@masterteam/components/breadcrumb';
+import { Avatar } from '@masterteam/components/avatar';
+import { Button } from '@masterteam/components/button';
+import { Card } from '@masterteam/components/card';
+import { ConfirmationService } from '@masterteam/components/confirmation';
+import { ModalService } from '@masterteam/components/modal';
+import { Table } from '@masterteam/components/table';
+import { TextField } from '@masterteam/components/text-field';
+import { ToastService } from '@masterteam/components/toast';
+import { Icon } from '@masterteam/icons';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import { Popover } from 'primeng/popover';
+import { HttpClient, HttpContext, HttpEventType, HttpHeaders } from '@angular/common/http';
+import { REQUEST_CONTEXT } from '@masterteam/components';
+import { ModalRef } from '@masterteam/components/dialog';
+import { ToggleField } from '@masterteam/components/toggle-field';
+import { UploadField } from '@masterteam/components/upload-field';
+
+function normalizeDocumentLibraryLabel(label) {
+    if (!label) {
+        return { display: '' };
+    }
+    return {
+        display: label.display ?? label.en ?? label.ar ?? '',
+        en: label.en ?? label.display ?? label.ar ?? '',
+        ar: label.ar ?? label.display ?? label.en ?? '',
+    };
+}
+function getDocumentLibraryFolderLabel(folder, lang = 'en') {
+    const label = folder.label ?? {};
+    return label[lang] ?? label.display ?? label.en ?? label.ar ?? '';
+}
+function toDocumentLibraryFolderEntry(folder) {
+    return {
+        ...folder,
+        isFolder: true,
+    };
+}
+function normalizeDocumentLibraryFolder(folder) {
+    return {
+        ...folder,
+        label: normalizeDocumentLibraryLabel(folder.label),
+        isEditableFolder: folder.isEditableFolder ?? false,
+        isNameEditable: folder.isNameEditable ?? false,
+        isPrimaryFolder: folder.isPrimaryFolder ?? false,
+    };
+}
+function normalizeDocumentLibraryFile(file) {
+    return {
+        ...file,
+        created: file.created || new Date().toISOString(),
+        isFolder: false,
+    };
+}
+function normalizeDocumentLibraryEntry(entry) {
+    if (entry.isFolder) {
+        return toDocumentLibraryFolderEntry(normalizeDocumentLibraryFolder(entry));
+    }
+    return normalizeDocumentLibraryFile(entry);
+}
+function getDocumentLibraryEntryTitle(entry, lang = 'en') {
+    if (entry.isFolder) {
+        return getDocumentLibraryFolderLabel(entry, lang);
+    }
+    return entry.fileName;
+}
+function getDocumentLibraryFileExtension(fileName) {
+    const extension = fileName.split('.').pop();
+    return (extension ?? 'file').toLowerCase();
+}
+function formatDocumentLibraryFileSize(size) {
+    if (!size) {
+        return '0 B';
+    }
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let value = size;
+    let unitIndex = 0;
+    while (value >= 1024 && unitIndex < units.length - 1) {
+        value /= 1024;
+        unitIndex += 1;
+    }
+    return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[unitIndex]}`;
+}
+
+class DocumentLibraryApiService {
+    http = inject(HttpClient);
+    defaultContext = new HttpContext().set(REQUEST_CONTEXT, {
+        useBaseUrl: false,
+    });
+    loadRoots(levelId, levelDataId, context) {
+        const endpoint = levelDataId == null
+            ? `levels/${levelId}/document-library/default`
+            : `levels/${levelId}/${levelDataId}/document-library`;
+        return this.http
+            .get(endpoint, {
+            context: this.resolveContext(context),
+        })
+            .pipe(map((response) => this.unwrap(response) ?? []));
+    }
+    loadFolderEntries(levelId, folderId, context) {
+        return this.http
+            .get(`levels/${levelId}/document-library/folders/${folderId}/documents`, {
+            context: this.resolveContext(context),
+        })
+            .pipe(map((response) => this.unwrap(response) ?? []), map((entries) => entries.map((entry) => this.mapEntry(entry))));
+    }
+    createFolder(levelId, levelDataId, request, context) {
+        const endpoint = levelDataId == null
+            ? `levels/${levelId}/document-library/folders`
+            : `levels/${levelId}/${levelDataId}/document-library/folders`;
+        return this.http
+            .post(endpoint, request, {
+            context: this.resolveContext(context),
+            headers: this.mutationHeaders('document-library-create-folder'),
+        })
+            .pipe(map((response) => this.unwrap(response)));
+    }
+    addDocument(levelId, levelDataId, request, context) {
+        return this.http
+            .post(`levels/${levelId}/${levelDataId}/document-library/folders/${request.folderId}/documents`, {
+            documentGuid: request.documentGuid,
+        }, {
+            context: this.resolveContext(context),
+            headers: this.mutationHeaders('document-library-add-document'),
+        })
+            .pipe(map((response) => this.mapFile(this.unwrap(response))));
+    }
+    uploadAsset(file, endPoint, context) {
+        const formData = new FormData();
+        formData.append('file', file);
+        return this.http
+            .post(endPoint, formData, {
+            reportProgress: true,
+            observe: 'events',
+            context: this.resolveContext(context),
+        })
+            .pipe(map((event) => {
+            if (event.type === HttpEventType.UploadProgress) {
+                return {
+                    progress: event.total
+                        ? Math.round((100 * event.loaded) / event.total)
+                        : 0,
+                    completed: false,
+                };
+            }
+            if (event.type === HttpEventType.Response && event.body) {
+                const asset = this.mapUploadedAsset(this.unwrap(event.body), file);
+                return {
+                    progress: 100,
+                    completed: true,
+                    asset,
+                };
+            }
+            return null;
+        }), filter((event) => event !== null));
+    }
+    renameFolder(levelId, levelDataId, request, context) {
+        return this.http
+            .put(`levels/${levelId}/${levelDataId}/document-library/folders/${request.folderId}`, {
+            folderName: request.folderName,
+        }, {
+            context: this.resolveContext(context),
+            headers: this.mutationHeaders('document-library-rename-folder'),
+        })
+            .pipe(map((response) => this.unwrap(response)));
+    }
+    deleteFolder(levelId, levelDataId, request, context) {
+        return this.http
+            .delete(`levels/${levelId}/${levelDataId}/document-library/folders/${request.folderId}`, {
+            context: this.resolveContext(context),
+            headers: this.mutationHeaders('document-library-delete-folder'),
+        })
+            .pipe(map((response) => this.unwrap(response)));
+    }
+    deleteDocument(levelId, levelDataId, request, context) {
+        return this.http
+            .delete(`levels/${levelId}/${levelDataId}/document-library/documents/${request.fileId}`, {
+            context: this.resolveContext(context),
+            headers: this.mutationHeaders('document-library-delete-file'),
+        })
+            .pipe(map((response) => this.unwrap(response)));
+    }
+    downloadFile(request, context) {
+        const endpoint = this.resolveDownloadEndpoint(request.file.path, request.file.id);
+        return this.http
+            .get(endpoint, {
+            responseType: 'blob',
+            context: this.resolveContext(context),
+        })
+            .pipe(map((blob) => {
+            const objectUrl = window.URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = objectUrl;
+            link.download = request.file.fileName;
+            link.click();
+            window.URL.revokeObjectURL(objectUrl);
+        }));
+    }
+    unwrap(response) {
+        if (response.code === 2) {
+            throw new Error(response.errors?.message ||
+                response.message ||
+                'Document library request failed.');
+        }
+        return response.data;
+    }
+    resolveContext(context) {
+        return context ?? this.defaultContext;
+    }
+    mutationHeaders(seed) {
+        return new HttpHeaders({
+            'X-Idempotency-Key': this.idempotencyKey(seed),
+        });
+    }
+    idempotencyKey(seed) {
+        if (typeof crypto !== 'undefined' &&
+            typeof crypto.randomUUID === 'function') {
+            return `${seed}-${crypto.randomUUID()}`;
+        }
+        return `${seed}-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+    }
+    mapEntry(entry) {
+        return entry.isFolder
+            ? entry
+            : {
+                ...this.mapFile(entry),
+                isFolder: false,
+            };
+    }
+    mapFile(file) {
+        return {
+            id: file.name ?? file.id ?? '',
+            name: file.name ?? file.id ?? null,
+            fileName: file.fileName,
+            contentType: file.contentType,
+            size: file.size,
+            createdBy: file.createdBy ?? null,
+            created: file.created,
+            path: this.normalizeDownloadPath(file.path),
+        };
+    }
+    mapUploadedAsset(asset, file) {
+        return {
+            id: asset.id ?? asset.name ?? file.name,
+            name: asset.name ?? asset.id ?? file.name,
+            fileName: asset.fileName ?? file.name,
+            contentType: asset.contentType ?? file.type,
+            size: asset.size ?? file.size,
+        };
+    }
+    resolveDownloadEndpoint(path, fileId) {
+        return this.normalizeDownloadPath(path) ?? `uploader/${fileId}`;
+    }
+    normalizeDownloadPath(path) {
+        if (!path) {
+            return null;
+        }
+        const trimmed = path.trim();
+        if (!trimmed) {
+            return null;
+        }
+        if (/^https?:\/\//i.test(trimmed)) {
+            return trimmed;
+        }
+        if (/^\/?api\/uploader\//i.test(trimmed)) {
+            return trimmed.replace(/^\/?api\//i, '');
+        }
+        return trimmed.replace(/^\//, '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DocumentLibraryApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DocumentLibraryApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DocumentLibraryApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class DocumentLibraryFolderDialog {
+    mode = input('create', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    contextLabel = input('', ...(ngDevMode ? [{ debugName: "contextLabel" }] : []));
+    initialName = input('', ...(ngDevMode ? [{ debugName: "initialName" }] : []));
+    modal = inject(ModalService);
+    ref = inject(ModalRef);
+    folderName = signal('', ...(ngDevMode ? [{ debugName: "folderName" }] : []));
+    constructor() {
+        effect(() => {
+            this.folderName.set(this.initialName());
+        });
+    }
+    submit() {
+        const folderName = this.folderName().trim();
+        if (!folderName) {
+            return;
+        }
+        this.ref.close({
+            folderName,
+        });
+    }
+    cancel() {
+        this.ref.close(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DocumentLibraryFolderDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DocumentLibraryFolderDialog, isStandalone: true, selector: "mt-document-library-folder-dialog", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, contextLabel: { classPropertyName: "contextLabel", publicName: "contextLabel", isSignal: true, isRequired: false, transformFunction: null }, initialName: { classPropertyName: "initialName", publicName: "initialName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'document-library.modals.folder'\">\r\n  <div [class]=\"[modal.contentClass, 'flex', 'flex-col', 'gap-4', 'p-4']\">\r\n    @if (mode() === \"create\") {\r\n      <div class=\"text-sm text-muted-color\">\r\n        {{ t(\"parent\") }}:\r\n        <span class=\"font-medium text-color\">{{ contextLabel() }}</span>\r\n      </div>\r\n    } @else {\r\n      <div class=\"text-sm text-muted-color\">\r\n        {{ t(\"renameDescription\") }}\r\n      </div>\r\n    }\r\n\r\n    <mt-text-field\r\n      [ngModel]=\"folderName()\"\r\n      (ngModelChange)=\"folderName.set($event)\"\r\n      [label]=\"t('folderName')\"\r\n      [placeholder]=\"\r\n        mode() === 'create'\r\n          ? t('placeholders.create')\r\n          : t('placeholders.rename')\r\n      \"\r\n    />\r\n  </div>\r\n\r\n  <div\r\n    [class]=\"[\r\n      modal.footerClass,\r\n      'flex',\r\n      'items-center',\r\n      'justify-end',\r\n      'gap-2',\r\n    ]\"\r\n  >\r\n    <mt-button [label]=\"t('cancel')\" variant=\"outlined\" (onClick)=\"cancel()\" />\r\n\r\n    <mt-button\r\n      [label]=\"mode() === 'create' ? t('create') : t('save')\"\r\n      [icon]=\"mode() === 'create' ? 'file.folder-plus' : 'general.edit-02'\"\r\n      [disabled]=\"!folderName().trim()\"\r\n      (onClick)=\"submit()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DocumentLibraryFolderDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-document-library-folder-dialog', standalone: true, imports: [CommonModule, FormsModule, Button, TextField, TranslocoDirective], template: "<ng-container *transloco=\"let t; prefix: 'document-library.modals.folder'\">\r\n  <div [class]=\"[modal.contentClass, 'flex', 'flex-col', 'gap-4', 'p-4']\">\r\n    @if (mode() === \"create\") {\r\n      <div class=\"text-sm text-muted-color\">\r\n        {{ t(\"parent\") }}:\r\n        <span class=\"font-medium text-color\">{{ contextLabel() }}</span>\r\n      </div>\r\n    } @else {\r\n      <div class=\"text-sm text-muted-color\">\r\n        {{ t(\"renameDescription\") }}\r\n      </div>\r\n    }\r\n\r\n    <mt-text-field\r\n      [ngModel]=\"folderName()\"\r\n      (ngModelChange)=\"folderName.set($event)\"\r\n      [label]=\"t('folderName')\"\r\n      [placeholder]=\"\r\n        mode() === 'create'\r\n          ? t('placeholders.create')\r\n          : t('placeholders.rename')\r\n      \"\r\n    />\r\n  </div>\r\n\r\n  <div\r\n    [class]=\"[\r\n      modal.footerClass,\r\n      'flex',\r\n      'items-center',\r\n      'justify-end',\r\n      'gap-2',\r\n    ]\"\r\n  >\r\n    <mt-button [label]=\"t('cancel')\" variant=\"outlined\" (onClick)=\"cancel()\" />\r\n\r\n    <mt-button\r\n      [label]=\"mode() === 'create' ? t('create') : t('save')\"\r\n      [icon]=\"mode() === 'create' ? 'file.folder-plus' : 'general.edit-02'\"\r\n      [disabled]=\"!folderName().trim()\"\r\n      (onClick)=\"submit()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], contextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextLabel", required: false }] }], initialName: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialName", required: false }] }] } });
+
+class DocumentLibraryUploadDialog {
+    mode = input('file', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    folderLabel = input('', ...(ngDevMode ? [{ debugName: "folderLabel" }] : []));
+    uploadEndPoint = input('uploader', ...(ngDevMode ? [{ debugName: "uploadEndPoint" }] : []));
+    requestContext = input(undefined, ...(ngDevMode ? [{ debugName: "requestContext" }] : []));
+    modal = inject(ModalService);
+    api = inject(DocumentLibraryApiService);
+    ref = inject(ModalRef);
+    transloco = inject(TranslocoService);
+    uploadedFile = signal(null, ...(ngDevMode ? [{ debugName: "uploadedFile" }] : []));
+    folderItems = signal([], ...(ngDevMode ? [{ debugName: "folderItems" }] : []));
+    targetRootFolderName = signal('', ...(ngDevMode ? [{ debugName: "targetRootFolderName" }] : []));
+    submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
+    activeLanguage = toSignal(this.transloco.langChanges$, {
+        initialValue: this.transloco.getActiveLang() || 'en',
+    });
+    selectedFolderName = computed(() => {
+        const firstItem = this.folderItems()[0];
+        return firstItem ? this.getRelativePathSegments(firstItem.relativePath)[0] ?? '' : '';
+    }, ...(ngDevMode ? [{ debugName: "selectedFolderName" }] : []));
+    hasTargetRootFolderName = computed(() => !!this.targetRootFolderName().trim(), ...(ngDevMode ? [{ debugName: "hasTargetRootFolderName" }] : []));
+    selectedCount = computed(() => this.folderItems().filter((item) => item.enabled).length, ...(ngDevMode ? [{ debugName: "selectedCount" }] : []));
+    uploadedCount = computed(() => this.folderItems().filter((item) => item.enabled && item.uploadedAsset)
+        .length, ...(ngDevMode ? [{ debugName: "uploadedCount" }] : []));
+    pendingCount = computed(() => this.folderItems().filter((item) => item.enabled && !item.uploadedAsset && !item.uploading).length, ...(ngDevMode ? [{ debugName: "pendingCount" }] : []));
+    failedCount = computed(() => this.folderItems().filter((item) => item.enabled && !item.uploadedAsset && !!item.error).length, ...(ngDevMode ? [{ debugName: "failedCount" }] : []));
+    canCloseWithUploads = computed(() => this.uploadedCount() > 0 && this.pendingCount() === 0, ...(ngDevMode ? [{ debugName: "canCloseWithUploads" }] : []));
+    primaryActionLabel = computed(() => {
+        if (this.mode() === 'file') {
+            return this.translate('primary.attachFile');
+        }
+        return this.canCloseWithUploads()
+            ? this.translate('primary.attachUploadedFiles')
+            : this.translate('primary.uploadSelectedFiles');
+    }, ...(ngDevMode ? [{ debugName: "primaryActionLabel" }] : []));
+    submit() {
+        if (this.mode() === 'file') {
+            const documentGuid = this.uploadedFile()?.id?.trim() || this.uploadedFile()?.name?.trim();
+            if (!documentGuid) {
+                return;
+            }
+            this.ref.close({
+                uploads: [
+                    {
+                        documentGuid,
+                        fileName: this.uploadedFile()?.fileName?.trim() ||
+                            this.uploadedFile()?.name?.trim() ||
+                            documentGuid,
+                        relativePath: this.uploadedFile()?.fileName?.trim() ||
+                            this.uploadedFile()?.name?.trim() ||
+                            documentGuid,
+                    },
+                ],
+            });
+            return;
+        }
+        if (this.canCloseWithUploads()) {
+            this.closeWithFolderUploads();
+            return;
+        }
+        void this.uploadSelectedFolderItems();
+    }
+    cancel() {
+        if (this.submitting()) {
+            return;
+        }
+        this.ref.close(null);
+    }
+    openFolderPicker(folderInput) {
+        if (this.submitting()) {
+            return;
+        }
+        folderInput.value = '';
+        folderInput.click();
+    }
+    onFolderSelect(event) {
+        const input = event.target;
+        const files = Array.from(input?.files ?? []);
+        const nextItems = files
+            .map((file, index) => this.createFolderUploadItem(file, index))
+            .sort((left, right) => left.relativePath.localeCompare(right.relativePath));
+        this.folderItems.set(nextItems);
+        this.targetRootFolderName.set(nextItems[0]
+            ? this.getRelativePathSegments(nextItems[0].relativePath)[0] ?? ''
+            : '');
+    }
+    toggleFolderItem(itemId, enabled) {
+        this.folderItems.update((items) => items.map((item) => item.id === itemId
+            ? {
+                ...item,
+                enabled: enabled !== false,
+            }
+            : item));
+    }
+    setAllFolderItems(enabled) {
+        this.folderItems.update((items) => items.map((item) => ({
+            ...item,
+            enabled,
+        })));
+    }
+    getFolderItemIcon(item) {
+        const extension = getDocumentLibraryFileExtension(item.file.name);
+        if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].includes(extension)) {
+            return 'image.image-03';
+        }
+        if (['ts', 'js', 'json', 'html', 'css', 'scss'].includes(extension)) {
+            return 'dev.file-code-02';
+        }
+        if (item.file.type.toLowerCase().includes('pdf')) {
+            return 'file.file-06';
+        }
+        return 'file.file-01';
+    }
+    getFolderItemStatus(item) {
+        if (item.uploading) {
+            return this.translate('status.uploading', {
+                progress: item.progress,
+            });
+        }
+        if (item.uploadedAsset) {
+            return this.translate('status.uploaded');
+        }
+        if (item.error) {
+            return item.error;
+        }
+        if (!item.enabled) {
+            return this.translate('status.excluded');
+        }
+        return this.translate('status.waiting');
+    }
+    getFolderItemStatusClass(item) {
+        if (item.uploadedAsset) {
+            return 'text-emerald-600';
+        }
+        if (item.error) {
+            return 'text-red-600';
+        }
+        if (!item.enabled) {
+            return 'text-slate-400';
+        }
+        return 'text-muted-color';
+    }
+    formatFileSize(size) {
+        return formatDocumentLibraryFileSize(size);
+    }
+    createFolderUploadItem(file, index) {
+        const relativePath = file.webkitRelativePath || file.name;
+        const pathSegments = relativePath.split('/');
+        const pathLabel = pathSegments.slice(1).join('/') || file.name;
+        return {
+            id: typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+                ? crypto.randomUUID()
+                : `${index}-${relativePath}`,
+            file,
+            relativePath,
+            pathLabel,
+            enabled: true,
+            progress: 0,
+            uploading: false,
+            uploadedAsset: null,
+            error: null,
+        };
+    }
+    async uploadSelectedFolderItems() {
+        const queuedItems = this.folderItems().filter((item) => item.enabled && !item.uploadedAsset);
+        if (!queuedItems.length) {
+            return;
+        }
+        this.submitting.set(true);
+        try {
+            for (const item of queuedItems) {
+                await this.uploadFolderItem(item.id);
+            }
+            if (this.failedCount() === 0 && this.canCloseWithUploads()) {
+                this.closeWithFolderUploads();
+            }
+        }
+        finally {
+            this.submitting.set(false);
+        }
+    }
+    uploadFolderItem(itemId) {
+        const item = this.folderItems().find((candidate) => candidate.id === itemId);
+        if (!item) {
+            return Promise.resolve();
+        }
+        this.patchFolderItem(itemId, {
+            uploading: true,
+            progress: 10,
+            error: null,
+        });
+        return new Promise((resolve) => {
+            this.api
+                .uploadAsset(item.file, this.uploadEndPoint(), this.requestContext())
+                .subscribe({
+                next: (event) => {
+                    if (event.completed && event.asset) {
+                        this.patchFolderItem(itemId, {
+                            uploading: false,
+                            progress: 100,
+                            uploadedAsset: event.asset,
+                            error: null,
+                        });
+                        return;
+                    }
+                    this.patchFolderItem(itemId, {
+                        progress: Math.max(event.progress, 10),
+                    });
+                },
+                error: (error) => {
+                    this.patchFolderItem(itemId, {
+                        uploading: false,
+                        progress: 0,
+                        error: this.getErrorMessage(error),
+                    });
+                    resolve();
+                },
+                complete: () => {
+                    this.patchFolderItem(itemId, {
+                        uploading: false,
+                    });
+                    resolve();
+                },
+            });
+        });
+    }
+    patchFolderItem(itemId, patch) {
+        this.folderItems.update((items) => items.map((item) => item.id === itemId
+            ? {
+                ...item,
+                ...patch,
+            }
+            : item));
+    }
+    closeWithFolderUploads() {
+        const uploads = this.folderItems()
+            .filter((item) => item.enabled && item.uploadedAsset)
+            .map((item) => ({
+            documentGuid: item.uploadedAsset?.id?.trim() ||
+                item.uploadedAsset?.name?.trim() ||
+                '',
+            fileName: item.uploadedAsset?.fileName?.trim() || item.file.name,
+            relativePath: this.applyTargetRootFolderName(item.relativePath),
+        }))
+            .filter((item) => !!item.documentGuid);
+        if (!uploads.length) {
+            return;
+        }
+        this.ref.close({
+            uploads,
+        });
+    }
+    getErrorMessage(error) {
+        if (error instanceof Error && error.message) {
+            return error.message;
+        }
+        return this.translate('status.uploadFailed');
+    }
+    applyTargetRootFolderName(relativePath) {
+        const targetRootFolderName = this.targetRootFolderName().trim();
+        if (!targetRootFolderName) {
+            return relativePath;
+        }
+        const segments = this.getRelativePathSegments(relativePath);
+        if (!segments.length) {
+            return relativePath;
+        }
+        if (segments.length === 1) {
+            return [targetRootFolderName, segments[0]].join('/');
+        }
+        segments[0] = targetRootFolderName;
+        return segments.join('/');
+    }
+    getRelativePathSegments(relativePath) {
+        return relativePath
+            .split(/[\\/]/)
+            .map((segment) => segment.trim())
+            .filter(Boolean);
+    }
+    translate(key, params) {
+        this.activeLanguage();
+        return this.transloco.translate(`document-library.modals.upload.${key}`, params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DocumentLibraryUploadDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DocumentLibraryUploadDialog, isStandalone: true, selector: "mt-document-library-upload-dialog", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, folderLabel: { classPropertyName: "folderLabel", publicName: "folderLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadEndPoint: { classPropertyName: "uploadEndPoint", publicName: "uploadEndPoint", isSignal: true, isRequired: false, transformFunction: null }, requestContext: { classPropertyName: "requestContext", publicName: "requestContext", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'document-library.modals.upload'\">\r\n  <div [class]=\"[modal.contentClass, 'flex', 'flex-col', 'gap-4', 'p-4']\">\r\n    @if (mode() === \"file\") {\r\n      <div class=\"text-sm text-muted-color\">\r\n        {{ t(\"fileIntro\") }}\r\n        <span class=\"font-medium text-color\">{{ folderLabel() }}</span\r\n        >.\r\n      </div>\r\n\r\n      <mt-upload-field\r\n        [ngModel]=\"uploadedFile()\"\r\n        (ngModelChange)=\"uploadedFile.set($event)\"\r\n        [ngModelOptions]=\"{ standalone: true }\"\r\n        [shape]=\"'card'\"\r\n        [title]=\"t('uploadFileTitle')\"\r\n        [description]=\"t('uploadFileDescription')\"\r\n        [endPoint]=\"uploadEndPoint()\"\r\n        [context]=\"requestContext()\"\r\n      />\r\n    } @else {\r\n      <input\r\n        #folderInput\r\n        type=\"file\"\r\n        directory\r\n        webkitdirectory\r\n        multiple\r\n        class=\"hidden\"\r\n        (change)=\"onFolderSelect($event)\"\r\n      />\r\n\r\n      <div class=\"rounded-2xl border border-surface bg-surface/30 p-4\">\r\n        <div class=\"flex flex-wrap items-start justify-between gap-3\">\r\n          <div class=\"space-y-1\">\r\n            <div class=\"text-sm font-semibold\">{{ t(\"folderTitle\") }}</div>\r\n            <div class=\"text-sm text-muted-color\">\r\n              {{ t(\"folderDescription\") }}\r\n              <span class=\"font-medium text-color\">{{ folderLabel() }}</span\r\n              >.\r\n            </div>\r\n            @if (selectedFolderName()) {\r\n              <div class=\"text-sm text-color\">\r\n                {{ t(\"selectedFolder\") }}:\r\n                <span class=\"font-medium\">{{ selectedFolderName() }}</span>\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"flex flex-wrap items-center gap-2\">\r\n            <mt-button\r\n              [label]=\"t('selectFolder')\"\r\n              icon=\"file.folder-plus\"\r\n              [disabled]=\"submitting()\"\r\n              (onClick)=\"openFolderPicker(folderInput)\"\r\n            />\r\n\r\n            @if (folderItems().length > 0) {\r\n              <mt-button\r\n                [label]=\"t('selectAll')\"\r\n                variant=\"outlined\"\r\n                [disabled]=\"submitting()\"\r\n                (onClick)=\"setAllFolderItems(true)\"\r\n              />\r\n              <mt-button\r\n                [label]=\"t('clearAll')\"\r\n                variant=\"outlined\"\r\n                [disabled]=\"submitting()\"\r\n                (onClick)=\"setAllFolderItems(false)\"\r\n              />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      @if (folderItems().length > 0) {\r\n        <div\r\n          class=\"grid max-h-[28rem] content-start grid-cols-1 gap-3 overflow-y-auto rounded-2xl border border-surface bg-content p-3 md:grid-cols-2 xl:grid-cols-4\"\r\n        >\r\n          <div\r\n            class=\"col-span-full flex flex-wrap items-center justify-between gap-2 px-1\"\r\n          >\r\n            <div class=\"text-sm text-muted-color\">\r\n              {{\r\n                t(\"selectionSummary\", {\r\n                  selected: selectedCount(),\r\n                  total: folderItems().length,\r\n                })\r\n              }}\r\n            </div>\r\n            <div\r\n              class=\"flex flex-wrap items-center gap-3 text-xs text-muted-color\"\r\n            >\r\n              <span>{{ t(\"uploadedCount\", { count: uploadedCount() }) }}</span>\r\n              <span>{{ t(\"failedCount\", { count: failedCount() }) }}</span>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-span-full px-1\">\r\n            <mt-text-field\r\n              [ngModel]=\"targetRootFolderName()\"\r\n              (ngModelChange)=\"targetRootFolderName.set($event)\"\r\n              [ngModelOptions]=\"{ standalone: true }\"\r\n              [label]=\"t('targetFolderName')\"\r\n              [placeholder]=\"t('targetFolderPlaceholder')\"\r\n              [disabled]=\"submitting()\"\r\n            />\r\n          </div>\r\n\r\n          @for (item of folderItems(); track item.id) {\r\n            <mt-toggle-field\r\n              toggleShape=\"card\"\r\n              size=\"small\"\r\n              [icon]=\"getFolderItemIcon(item)\"\r\n              [label]=\"item.file.name\"\r\n              [descriptionCard]=\"item.pathLabel\"\r\n              [readonly]=\"item.uploading\"\r\n              [ngModel]=\"item.enabled\"\r\n              (ngModelChange)=\"toggleFolderItem(item.id, $event)\"\r\n              [ngModelOptions]=\"{ standalone: true }\"\r\n            >\r\n              <ng-template #toggleCardBottom>\r\n                <div\r\n                  class=\"mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-surface pt-3 text-xs\"\r\n                >\r\n                  <div class=\"text-muted-color\">\r\n                    {{ formatFileSize(item.file.size) }}\r\n                  </div>\r\n                  <div [class]=\"getFolderItemStatusClass(item)\">\r\n                    {{ getFolderItemStatus(item) }}\r\n                  </div>\r\n                </div>\r\n\r\n                @if (item.uploading) {\r\n                  <div class=\"mt-2 h-2 overflow-hidden rounded-full bg-surface\">\r\n                    <div\r\n                      class=\"h-full rounded-full bg-primary transition-all duration-200\"\r\n                      [style.width.%]=\"item.progress\"\r\n                    ></div>\r\n                  </div>\r\n                }\r\n              </ng-template>\r\n            </mt-toggle-field>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <div\r\n          class=\"flex min-h-[16rem] items-center justify-center rounded-2xl border border-dashed border-surface bg-surface/20 p-6 text-center text-sm text-muted-color\"\r\n        >\r\n          {{ t(\"emptyFolderSelection\") }}\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div\r\n    [class]=\"[\r\n      modal.footerClass,\r\n      'flex',\r\n      'items-center',\r\n      'justify-end',\r\n      'gap-2',\r\n    ]\"\r\n  >\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"submitting()\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n\r\n    <mt-button\r\n      [label]=\"primaryActionLabel()\"\r\n      icon=\"general.upload-01\"\r\n      [loading]=\"submitting()\"\r\n      [disabled]=\"\r\n        mode() === 'file'\r\n          ? !uploadedFile()?.id && !uploadedFile()?.name\r\n          : !selectedCount() ||\r\n            !hasTargetRootFolderName() ||\r\n            (pendingCount() === 0 && !canCloseWithUploads())\r\n      \"\r\n      (onClick)=\"submit()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: UploadField, selector: "mt-upload-field", inputs: ["label", "title", "description", "endPoint", "size", "userImgClass", "shape", "accept", "isDragging", "fileSizeLimit", "readonly", "context"], outputs: ["isDraggingChange", "onChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DocumentLibraryUploadDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-document-library-upload-dialog', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        Button,
+                        TextField,
+                        ToggleField,
+                        UploadField,
+                        TranslocoDirective,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'document-library.modals.upload'\">\r\n  <div [class]=\"[modal.contentClass, 'flex', 'flex-col', 'gap-4', 'p-4']\">\r\n    @if (mode() === \"file\") {\r\n      <div class=\"text-sm text-muted-color\">\r\n        {{ t(\"fileIntro\") }}\r\n        <span class=\"font-medium text-color\">{{ folderLabel() }}</span\r\n        >.\r\n      </div>\r\n\r\n      <mt-upload-field\r\n        [ngModel]=\"uploadedFile()\"\r\n        (ngModelChange)=\"uploadedFile.set($event)\"\r\n        [ngModelOptions]=\"{ standalone: true }\"\r\n        [shape]=\"'card'\"\r\n        [title]=\"t('uploadFileTitle')\"\r\n        [description]=\"t('uploadFileDescription')\"\r\n        [endPoint]=\"uploadEndPoint()\"\r\n        [context]=\"requestContext()\"\r\n      />\r\n    } @else {\r\n      <input\r\n        #folderInput\r\n        type=\"file\"\r\n        directory\r\n        webkitdirectory\r\n        multiple\r\n        class=\"hidden\"\r\n        (change)=\"onFolderSelect($event)\"\r\n      />\r\n\r\n      <div class=\"rounded-2xl border border-surface bg-surface/30 p-4\">\r\n        <div class=\"flex flex-wrap items-start justify-between gap-3\">\r\n          <div class=\"space-y-1\">\r\n            <div class=\"text-sm font-semibold\">{{ t(\"folderTitle\") }}</div>\r\n            <div class=\"text-sm text-muted-color\">\r\n              {{ t(\"folderDescription\") }}\r\n              <span class=\"font-medium text-color\">{{ folderLabel() }}</span\r\n              >.\r\n            </div>\r\n            @if (selectedFolderName()) {\r\n              <div class=\"text-sm text-color\">\r\n                {{ t(\"selectedFolder\") }}:\r\n                <span class=\"font-medium\">{{ selectedFolderName() }}</span>\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"flex flex-wrap items-center gap-2\">\r\n            <mt-button\r\n              [label]=\"t('selectFolder')\"\r\n              icon=\"file.folder-plus\"\r\n              [disabled]=\"submitting()\"\r\n              (onClick)=\"openFolderPicker(folderInput)\"\r\n            />\r\n\r\n            @if (folderItems().length > 0) {\r\n              <mt-button\r\n                [label]=\"t('selectAll')\"\r\n                variant=\"outlined\"\r\n                [disabled]=\"submitting()\"\r\n                (onClick)=\"setAllFolderItems(true)\"\r\n              />\r\n              <mt-button\r\n                [label]=\"t('clearAll')\"\r\n                variant=\"outlined\"\r\n                [disabled]=\"submitting()\"\r\n                (onClick)=\"setAllFolderItems(false)\"\r\n              />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      @if (folderItems().length > 0) {\r\n        <div\r\n          class=\"grid max-h-[28rem] content-start grid-cols-1 gap-3 overflow-y-auto rounded-2xl border border-surface bg-content p-3 md:grid-cols-2 xl:grid-cols-4\"\r\n        >\r\n          <div\r\n            class=\"col-span-full flex flex-wrap items-center justify-between gap-2 px-1\"\r\n          >\r\n            <div class=\"text-sm text-muted-color\">\r\n              {{\r\n                t(\"selectionSummary\", {\r\n                  selected: selectedCount(),\r\n                  total: folderItems().length,\r\n                })\r\n              }}\r\n            </div>\r\n            <div\r\n              class=\"flex flex-wrap items-center gap-3 text-xs text-muted-color\"\r\n            >\r\n              <span>{{ t(\"uploadedCount\", { count: uploadedCount() }) }}</span>\r\n              <span>{{ t(\"failedCount\", { count: failedCount() }) }}</span>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-span-full px-1\">\r\n            <mt-text-field\r\n              [ngModel]=\"targetRootFolderName()\"\r\n              (ngModelChange)=\"targetRootFolderName.set($event)\"\r\n              [ngModelOptions]=\"{ standalone: true }\"\r\n              [label]=\"t('targetFolderName')\"\r\n              [placeholder]=\"t('targetFolderPlaceholder')\"\r\n              [disabled]=\"submitting()\"\r\n            />\r\n          </div>\r\n\r\n          @for (item of folderItems(); track item.id) {\r\n            <mt-toggle-field\r\n              toggleShape=\"card\"\r\n              size=\"small\"\r\n              [icon]=\"getFolderItemIcon(item)\"\r\n              [label]=\"item.file.name\"\r\n              [descriptionCard]=\"item.pathLabel\"\r\n              [readonly]=\"item.uploading\"\r\n              [ngModel]=\"item.enabled\"\r\n              (ngModelChange)=\"toggleFolderItem(item.id, $event)\"\r\n              [ngModelOptions]=\"{ standalone: true }\"\r\n            >\r\n              <ng-template #toggleCardBottom>\r\n                <div\r\n                  class=\"mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-surface pt-3 text-xs\"\r\n                >\r\n                  <div class=\"text-muted-color\">\r\n                    {{ formatFileSize(item.file.size) }}\r\n                  </div>\r\n                  <div [class]=\"getFolderItemStatusClass(item)\">\r\n                    {{ getFolderItemStatus(item) }}\r\n                  </div>\r\n                </div>\r\n\r\n                @if (item.uploading) {\r\n                  <div class=\"mt-2 h-2 overflow-hidden rounded-full bg-surface\">\r\n                    <div\r\n                      class=\"h-full rounded-full bg-primary transition-all duration-200\"\r\n                      [style.width.%]=\"item.progress\"\r\n                    ></div>\r\n                  </div>\r\n                }\r\n              </ng-template>\r\n            </mt-toggle-field>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <div\r\n          class=\"flex min-h-[16rem] items-center justify-center rounded-2xl border border-dashed border-surface bg-surface/20 p-6 text-center text-sm text-muted-color\"\r\n        >\r\n          {{ t(\"emptyFolderSelection\") }}\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div\r\n    [class]=\"[\r\n      modal.footerClass,\r\n      'flex',\r\n      'items-center',\r\n      'justify-end',\r\n      'gap-2',\r\n    ]\"\r\n  >\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"submitting()\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n\r\n    <mt-button\r\n      [label]=\"primaryActionLabel()\"\r\n      icon=\"general.upload-01\"\r\n      [loading]=\"submitting()\"\r\n      [disabled]=\"\r\n        mode() === 'file'\r\n          ? !uploadedFile()?.id && !uploadedFile()?.name\r\n          : !selectedCount() ||\r\n            !hasTargetRootFolderName() ||\r\n            (pendingCount() === 0 && !canCloseWithUploads())\r\n      \"\r\n      (onClick)=\"submit()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], folderLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "folderLabel", required: false }] }], uploadEndPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadEndPoint", required: false }] }], requestContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestContext", required: false }] }] } });
+
+class DocumentLibrary {
+    api = inject(DocumentLibraryApiService);
+    confirmationService = inject(ConfirmationService);
+    modalService = inject(ModalService);
+    toast = inject(ToastService);
+    transloco = inject(TranslocoService);
+    levelId = input.required(...(ngDevMode ? [{ debugName: "levelId" }] : []));
+    levelDataId = input(null, ...(ngDevMode ? [{ debugName: "levelDataId" }] : []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    lang = input('en', ...(ngDevMode ? [{ debugName: "lang" }] : []));
+    requestContext = input(undefined, ...(ngDevMode ? [{ debugName: "requestContext" }] : []));
+    uploadEndPoint = input('uploader', ...(ngDevMode ? [{ debugName: "uploadEndPoint" }] : []));
+    emptyTitle = input('', ...(ngDevMode ? [{ debugName: "emptyTitle" }] : []));
+    emptyDescription = input('', ...(ngDevMode ? [{ debugName: "emptyDescription" }] : []));
+    loaded = output();
+    errored = output();
+    selectionChanged = output();
+    actionExecuted = output();
+    nameCellTpl = viewChild('nameCellTpl', ...(ngDevMode ? [{ debugName: "nameCellTpl" }] : []));
+    updatedCellTpl = viewChild('updatedCellTpl', ...(ngDevMode ? [{ debugName: "updatedCellTpl" }] : []));
+    actionsCellTpl = viewChild('actionsCellTpl', ...(ngDevMode ? [{ debugName: "actionsCellTpl" }] : []));
+    addPopover = viewChild('addPopover', ...(ngDevMode ? [{ debugName: "addPopover" }] : []));
+    folderPopover = viewChild('folderPopover', ...(ngDevMode ? [{ debugName: "folderPopover" }] : []));
+    contextPopover = viewChild('contextPopover', ...(ngDevMode ? [{ debugName: "contextPopover" }] : []));
+    roots = signal([], ...(ngDevMode ? [{ debugName: "roots" }] : []));
+    folderRegistry = signal(new Map(), ...(ngDevMode ? [{ debugName: "folderRegistry" }] : []));
+    folderEntriesCache = signal(new Map(), ...(ngDevMode ? [{ debugName: "folderEntriesCache" }] : []));
+    expandedFolderKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedFolderKeys" }] : []));
+    busyKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "busyKeys" }] : []));
+    selectedFolderId = signal(null, ...(ngDevMode ? [{ debugName: "selectedFolderId" }] : []));
+    selectedEntry = signal(null, ...(ngDevMode ? [{ debugName: "selectedEntry" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    contextMenuItems = signal([], ...(ngDevMode ? [{ debugName: "contextMenuItems" }] : []));
+    railSearch = signal('', ...(ngDevMode ? [{ debugName: "railSearch" }] : []));
+    activeLanguage = toSignal(this.transloco.langChanges$, {
+        initialValue: this.transloco.getActiveLang() || 'en',
+    });
+    canMutateLevelData = computed(() => this.levelDataId() != null, ...(ngDevMode ? [{ debugName: "canMutateLevelData" }] : []));
+    uiLang = computed(() => {
+        const activeLang = this.activeLanguage();
+        return activeLang === 'ar'
+            ? 'ar'
+            : activeLang === 'en'
+                ? 'en'
+                : this.lang();
+    }, ...(ngDevMode ? [{ debugName: "uiLang" }] : []));
+    resolvedTitle = computed(() => this.title().trim() || this.translate('title'), ...(ngDevMode ? [{ debugName: "resolvedTitle" }] : []));
+    resolvedEmptyTitle = computed(() => this.emptyTitle().trim() || this.translate('empty.title'), ...(ngDevMode ? [{ debugName: "resolvedEmptyTitle" }] : []));
+    resolvedEmptyDescription = computed(() => this.emptyDescription().trim() || this.translate('empty.description'), ...(ngDevMode ? [{ debugName: "resolvedEmptyDescription" }] : []));
+    capabilities = computed(() => ({
+        canCreateRootFolders: true,
+        canUploadFiles: this.canMutateLevelData(),
+        canDownloadFiles: true,
+        canDeleteFiles: this.canMutateLevelData(),
+    }), ...(ngDevMode ? [{ debugName: "capabilities" }] : []));
+    columns = computed(() => {
+        const nameCellTpl = this.nameCellTpl();
+        const updatedCellTpl = this.updatedCellTpl();
+        const actionsCellTpl = this.actionsCellTpl();
+        if (!nameCellTpl || !updatedCellTpl || !actionsCellTpl) {
+            return [];
+        }
+        return [
+            {
+                key: 'name',
+                label: this.translate('columns.name'),
+                type: 'custom',
+                customCellTpl: nameCellTpl,
+            },
+            {
+                key: 'owner',
+                label: this.translate('columns.owner'),
+            },
+            {
+                key: 'size',
+                label: this.translate('columns.size'),
+            },
+            {
+                key: 'updatedAt',
+                label: this.translate('columns.lastUpdated'),
+                type: 'custom',
+                customCellTpl: updatedCellTpl,
+            },
+            {
+                key: 'actions',
+                label: this.translate('columns.actions'),
+                type: 'custom',
+                customCellTpl: actionsCellTpl,
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    selectedFolder = computed(() => {
+        const folderId = this.selectedFolderId();
+        if (folderId == null) {
+            return null;
+        }
+        return this.folderRegistry().get(this.toFolderKey(folderId)) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "selectedFolder" }] : []));
+    currentEntries = computed(() => {
+        const folderId = this.selectedFolderId();
+        if (folderId == null) {
+            return this.roots().map((folder) => toDocumentLibraryFolderEntry(folder));
+        }
+        return this.folderEntriesCache().get(this.toFolderKey(folderId)) ?? [];
+    }, ...(ngDevMode ? [{ debugName: "currentEntries" }] : []));
+    tableRows = computed(() => this.currentEntries().map((entry) => ({
+        id: this.getEntryKey(entry),
+        entry,
+        name: this.getEntryTitle(entry),
+        owner: this.getEntryOwner(entry),
+        size: entry.isFolder ? '-' : this.formatFileSize(entry.size),
+        updatedAt: this.getEntryUpdatedAt(entry),
+    })), ...(ngDevMode ? [{ debugName: "tableRows" }] : []));
+    breadcrumbs = computed(() => {
+        const items = [
+            {
+                icon: 'general.home-05',
+                label: this.resolvedTitle(),
+                folderId: null,
+            },
+        ];
+        this.getFolderTrail(this.selectedFolderId()).forEach((folder) => {
+            items.push({
+                label: this.getFolderLabel(folder),
+                folderId: folder.id,
+            });
+        });
+        return items;
+    }, ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
+    currentFolderTitle = computed(() => {
+        const selectedFolder = this.selectedFolder();
+        return selectedFolder
+            ? this.getFolderLabel(selectedFolder)
+            : this.resolvedTitle();
+    }, ...(ngDevMode ? [{ debugName: "currentFolderTitle" }] : []));
+    currentFolderSubtitle = computed(() => {
+        const selectedFolder = this.selectedFolder();
+        if (!selectedFolder) {
+            return this.translate('summary.rootFolders', {
+                count: this.roots().length,
+            });
+        }
+        const entries = this.currentEntries();
+        const folderCount = entries.filter((entry) => entry.isFolder).length;
+        const fileCount = entries.length - folderCount;
+        return this.translate('summary.folderContents', {
+            folderCount,
+            fileCount,
+        });
+    }, ...(ngDevMode ? [{ debugName: "currentFolderSubtitle" }] : []));
+    rootSummary = computed(() => {
+        return this.translate('summary.rootFolders', {
+            count: this.roots().length,
+        });
+    }, ...(ngDevMode ? [{ debugName: "rootSummary" }] : []));
+    visibleRoots = computed(() => {
+        const query = this.railSearch().trim().toLowerCase();
+        if (!query) {
+            return this.roots();
+        }
+        return this.roots().filter((folder) => this.getFolderLabel(folder).toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "visibleRoots" }] : []));
+    addMenuItems = computed(() => [
+        {
+            label: this.translate('actions.newFolder'),
+            icon: 'file.folder-plus',
+            command: () => this.openCreateFolderDialog(this.selectedFolder()),
+            visible: this.canCreateFolderInSelection(),
+        },
+        {
+            label: this.translate('actions.fileUpload'),
+            icon: 'general.upload-01',
+            command: () => this.openUploadDialog('file'),
+            visible: this.canUploadIntoCurrentFolder(),
+        },
+        {
+            label: this.translate('actions.folderUpload'),
+            icon: 'file.folder',
+            command: () => this.openUploadDialog('folder'),
+            visible: this.canUploadIntoCurrentFolder(),
+        },
+    ], ...(ngDevMode ? [{ debugName: "addMenuItems" }] : []));
+    currentFolderMenuItems = computed(() => {
+        const folder = this.selectedFolder();
+        return folder ? this.getFolderMenuItems(folder) : [];
+    }, ...(ngDevMode ? [{ debugName: "currentFolderMenuItems" }] : []));
+    constructor() {
+        effect(() => {
+            this.levelId();
+            this.levelDataId();
+            this.requestContext();
+            untracked(() => {
+                void this.reload();
+            });
+        });
+    }
+    async reload() {
+        try {
+            await this.withBusy('roots', async () => {
+                this.error.set(null);
+                this.roots.set([]);
+                this.folderRegistry.set(new Map());
+                this.folderEntriesCache.set(new Map());
+                this.expandedFolderKeys.set(new Set());
+                this.selectedFolderId.set(null);
+                this.selectedEntry.set(null);
+                const folders = (await this.resolveAsync(this.api.loadRoots(this.levelId(), this.levelDataId(), this.requestContext()))).map((folder) => normalizeDocumentLibraryFolder(folder));
+                this.roots.set(folders);
+                this.upsertFolders(folders);
+            });
+            this.loaded.emit();
+            this.actionExecuted.emit({ action: 'reload', target: null });
+        }
+        catch (error) {
+            this.handleError(error, this.translate('errors.loadLibrary'));
+        }
+    }
+    async goToRoot() {
+        this.selectedFolderId.set(null);
+        this.selectedEntry.set(null);
+        this.selectionChanged.emit({
+            folder: null,
+            entry: null,
+        });
+    }
+    async openFolder(folder) {
+        this.selectedFolderId.set(folder.id);
+        this.selectedEntry.set(toDocumentLibraryFolderEntry(folder));
+        this.expandFolderPath(folder);
+        if (!this.folderEntriesCache().has(this.toFolderKey(folder.id))) {
+            await this.loadFolderEntries(folder.id);
+        }
+        this.selectionChanged.emit({
+            folder,
+            entry: toDocumentLibraryFolderEntry(folder),
+        });
+        this.actionExecuted.emit({
+            action: 'open-folder',
+            target: folder,
+        });
+    }
+    async toggleExpanded(folder) {
+        const folderKey = this.toFolderKey(folder.id);
+        if (!this.expandedFolderKeys().has(folderKey)) {
+            if (!this.folderEntriesCache().has(folderKey)) {
+                await this.loadFolderEntries(folder.id);
+            }
+            this.expandedFolderKeys.update((state) => {
+                const next = new Set(state);
+                next.add(folderKey);
+                return next;
+            });
+            return;
+        }
+        this.expandedFolderKeys.update((state) => {
+            const next = new Set(state);
+            next.delete(folderKey);
+            return next;
+        });
+    }
+    async onRailFolderClick(folder) {
+        await this.openFolder(folder);
+    }
+    async onRowClick(row) {
+        this.selectedEntry.set(row.entry);
+        if (row.entry.isFolder) {
+            await this.openFolder(row.entry);
+            return;
+        }
+        this.selectionChanged.emit({
+            folder: this.selectedFolder(),
+            entry: row.entry,
+        });
+    }
+    openAddPopover(event) {
+        if (!this.hasVisibleActionItems(this.addMenuItems())) {
+            return;
+        }
+        this.addPopover()?.toggle(event);
+    }
+    openFolderPopover(event) {
+        if (!this.hasVisibleActionItems(this.currentFolderMenuItems())) {
+            return;
+        }
+        this.folderPopover()?.toggle(event);
+    }
+    openContextMenu(event, target) {
+        event.preventDefault();
+        event.stopPropagation();
+        const items = this.getTargetMenuItems(target);
+        if (!this.hasVisibleActionItems(items)) {
+            return;
+        }
+        this.contextMenuItems.set(items);
+        this.showPopover(this.contextPopover(), event);
+    }
+    executePopoverItem(item, popover) {
+        if (item.disabled) {
+            return;
+        }
+        popover?.hide();
+        item.command?.();
+    }
+    openCreateFolderDialog(parent) {
+        if (!this.canCreateFolderInSelection(parent)) {
+            return;
+        }
+        this.openFolderDialog('create', {
+            contextLabel: parent ? this.getFolderLabel(parent) : this.resolvedTitle(),
+            initialName: '',
+            onSubmit: (folderName) => this.createFolder(parent, folderName),
+        });
+    }
+    openRenameFolderDialog(folder) {
+        if (!this.canRenameFolder(folder)) {
+            return;
+        }
+        this.openFolderDialog('rename', {
+            contextLabel: this.getFolderLabel(folder),
+            initialName: this.getFolderLabel(folder),
+            onSubmit: (folderName) => this.renameFolder(folder, folderName),
+        });
+    }
+    async createFolder(parent, folderName) {
+        try {
+            const created = await this.createFolderInBackend(parent, folderName);
+            this.toast.success(this.translate('messages.folderCreated', {
+                name: this.getFolderLabel(created),
+            }));
+            this.actionExecuted.emit({
+                action: 'create-folder',
+                target: created,
+            });
+        }
+        catch (error) {
+            this.handleError(error, this.translate('errors.createFolder'));
+        }
+    }
+    async renameFolder(target, folderName) {
+        const levelDataId = this.levelDataId();
+        if (!folderName || levelDataId == null) {
+            return;
+        }
+        try {
+            const response = await this.withBusy(this.renameFolderBusyKey(target.id), async () => this.resolveAsync(this.api.renameFolder(this.levelId(), levelDataId, {
+                folderId: target.id,
+                folderName,
+            }, this.requestContext())));
+            const updated = normalizeDocumentLibraryFolder(response && typeof response === 'object' && 'id' in response
+                ? response
+                : {
+                    ...target,
+                    label: normalizeDocumentLibraryLabel({
+                        ...target.label,
+                        display: folderName,
+                        en: target.label.en ?? folderName,
+                        ar: target.label.ar ?? folderName,
+                    }),
+                });
+            this.replaceFolder(updated);
+            this.syncSelectedFolderEntry(updated);
+            this.toast.success(this.translate('messages.folderRenamed', {
+                name: this.getFolderLabel(updated),
+            }));
+            this.actionExecuted.emit({
+                action: 'rename-folder',
+                target: updated,
+            });
+        }
+        catch (error) {
+            this.handleError(error, this.translate('errors.renameFolder'));
+        }
+    }
+    confirmDeleteFolder(folder) {
+        this.confirmationService.confirmDelete({
+            type: 'dialog',
+            accept: () => {
+                void this.deleteFolder(folder);
+            },
+        });
+    }
+    async deleteFolder(folder) {
+        const levelDataId = this.levelDataId();
+        if (levelDataId == null) {
+            return;
+        }
+        try {
+            await this.withBusy(this.deleteFolderBusyKey(folder.id), async () => {
+                await this.resolveAsync(this.api.deleteFolder(this.levelId(), levelDataId, {
+                    folderId: folder.id,
+                }, this.requestContext()));
+            });
+            const removedFolderKeys = this.removeFolderTree(folder.id);
+            if (this.isSelectedFolderInTree(removedFolderKeys)) {
+                await this.goToRoot();
+            }
+            else {
+                this.clearSelectionForRemovedFolders(removedFolderKeys);
+            }
+            this.toast.success(this.translate('messages.folderDeleted', {
+                name: this.getFolderLabel(folder),
+            }));
+            this.actionExecuted.emit({
+                action: 'delete-folder',
+                target: folder,
+            });
+        }
+        catch (error) {
+            this.handleError(error, this.translate('errors.deleteFolder'));
+        }
+    }
+    confirmDeleteFile(file) {
+        this.confirmationService.confirmDelete({
+            type: 'dialog',
+            accept: () => {
+                void this.deleteFile(file);
+            },
+        });
+    }
+    async deleteFile(file) {
+        const levelDataId = this.levelDataId();
+        if (levelDataId == null) {
+            return;
+        }
+        try {
+            await this.withBusy(this.deleteFileBusyKey(file.id), async () => {
+                await this.resolveAsync(this.api.deleteDocument(this.levelId(), levelDataId, {
+                    fileId: file.id,
+                }, this.requestContext()));
+            });
+            const folderId = this.selectedFolderId();
+            if (folderId != null) {
+                this.patchFolderEntries(folderId, (entries) => entries.filter((entry) => !(entry.isFolder === false && entry.id === file.id)));
+            }
+            const selectedEntry = this.selectedEntry();
+            if (selectedEntry &&
+                !selectedEntry.isFolder &&
+                selectedEntry.id === file.id) {
+                this.selectedEntry.set(null);
+            }
+            this.toast.success(this.translate('messages.fileDeleted', {
+                name: file.fileName,
+            }));
+            this.actionExecuted.emit({
+                action: 'delete-file',
+                target: file,
+            });
+        }
+        catch (error) {
+            this.handleError(error, this.translate('errors.deleteFile'));
+        }
+    }
+    async downloadFile(file) {
+        try {
+            await this.resolveAsync(this.api.downloadFile({
+                file,
+            }, this.requestContext()));
+            this.actionExecuted.emit({
+                action: 'download-file',
+                target: file,
+            });
+        }
+        catch (error) {
+            this.handleError(error, this.translate('errors.downloadFile', { name: file.fileName }));
+        }
+    }
+    openUploadDialog(mode = 'file') {
+        const selectedFolder = this.selectedFolder();
+        if (!selectedFolder || !this.canUploadIntoFolder(selectedFolder)) {
+            return;
+        }
+        const ref = this.modalService.openModal(DocumentLibraryUploadDialog, 'dialog', {
+            header: mode === 'folder'
+                ? this.translate('modals.upload.headerFolder')
+                : this.translate('modals.upload.headerFile'),
+            styleClass: mode === 'folder' ? '!w-[60rem]' : '!w-[34rem]',
+            inputValues: {
+                mode,
+                folderLabel: this.getFolderLabel(selectedFolder),
+                uploadEndPoint: this.uploadEndPoint(),
+                requestContext: this.requestContext(),
+            },
+        });
+        if (!ref) {
+            return;
+        }
+        ref.onClose.subscribe((result) => {
+            if (result?.uploads?.length) {
+                void this.attachUploadedDocuments(selectedFolder, result.uploads);
+            }
+        });
+    }
+    foldersForRail(parentId) {
+        const query = this.railSearch().trim().toLowerCase();
+        const folders = parentId == null
+            ? this.visibleRoots()
+            : (this.folderEntriesCache().get(this.toFolderKey(parentId)) ?? [])
+                .filter((entry) => entry.isFolder)
+                .map((entry) => normalizeDocumentLibraryFolder(entry));
+        if (!query || parentId == null) {
+            return folders;
+        }
+        return folders.filter((folder) => this.getFolderLabel(folder).toLowerCase().includes(query));
+    }
+    isExpanded(folderId) {
+        return this.expandedFolderKeys().has(this.toFolderKey(folderId));
+    }
+    isSelectedFolder(folderId) {
+        const selectedFolderId = this.selectedFolderId();
+        if (selectedFolderId == null) {
+            return false;
+        }
+        return this.toFolderKey(selectedFolderId) === this.toFolderKey(folderId);
+    }
+    hasLoadedChildren(folderId) {
+        return this.folderEntriesCache().has(this.toFolderKey(folderId));
+    }
+    folderHasChildFolders(folderId) {
+        const entries = this.folderEntriesCache().get(this.toFolderKey(folderId));
+        if (!entries) {
+            return true;
+        }
+        return entries.some((entry) => entry.isFolder);
+    }
+    canCreateFolderInSelection(folder = this.selectedFolder()) {
+        if (folder == null) {
+            return !!this.capabilities().canCreateRootFolders;
+        }
+        return !!folder.isEditableFolder;
+    }
+    canUploadIntoCurrentFolder() {
+        return this.canUploadIntoFolder(this.selectedFolder());
+    }
+    canUploadIntoFolder(folder) {
+        if (!folder) {
+            return false;
+        }
+        return (!!this.capabilities().canUploadFiles &&
+            !!folder.isEditableFolder &&
+            !folder.isPrimaryFolder);
+    }
+    canDeleteFolder(folder) {
+        return (this.levelDataId() != null &&
+            !!folder.isEditableFolder &&
+            !folder.isPrimaryFolder);
+    }
+    canDeleteFile(_file) {
+        return !!this.capabilities().canDeleteFiles;
+    }
+    canDownloadFile(_file) {
+        return !!this.capabilities().canDownloadFiles;
+    }
+    getFolderLabel(folder) {
+        return (getDocumentLibraryFolderLabel(folder, this.uiLang()).trim() ||
+            this.translate('fallback.folder', { id: folder.id }));
+    }
+    getEntryTitle(entry) {
+        return entry.isFolder
+            ? this.getFolderLabel(entry)
+            : getDocumentLibraryEntryTitle(entry, this.uiLang());
+    }
+    getEntryOwner(entry) {
+        if (entry.isFolder) {
+            return entry.isEditableFolder
+                ? this.translate('owner.workspace')
+                : this.translate('owner.system');
+        }
+        return entry.createdBy ?? this.translate('owner.unknown');
+    }
+    getEntryUpdatedAt(entry) {
+        return entry.isFolder ? '' : entry.created;
+    }
+    getEntryKey(entry) {
+        return entry.isFolder
+            ? `folder:${this.toFolderKey(entry.id)}`
+            : `file:${entry.id}`;
+    }
+    getFolderMenuItems(folder) {
+        return [
+            {
+                label: this.translate('actions.open'),
+                icon: 'file.folder',
+                command: () => void this.openFolder(folder),
+            },
+            {
+                label: this.translate('actions.newSubfolder'),
+                icon: 'file.folder-plus',
+                command: () => this.openCreateFolderDialog(folder),
+                visible: this.canCreateFolderInSelection(folder),
+            },
+            {
+                label: this.translate('actions.uploadFile'),
+                icon: 'general.upload-01',
+                command: () => {
+                    void this.openFolder(folder).then(() => this.openUploadDialog('file'));
+                },
+                visible: this.canUploadIntoFolder(folder),
+            },
+            {
+                label: this.translate('actions.uploadFolder'),
+                icon: 'file.folder',
+                command: () => {
+                    void this.openFolder(folder).then(() => this.openUploadDialog('folder'));
+                },
+                visible: this.canUploadIntoFolder(folder),
+            },
+            {
+                label: this.translate('actions.rename'),
+                icon: 'general.edit-02',
+                command: () => this.openRenameFolderDialog(folder),
+                visible: this.canRenameFolder(folder),
+            },
+            {
+                label: this.translate('actions.delete'),
+                icon: 'general.trash-01',
+                severity: 'danger',
+                command: () => this.confirmDeleteFolder(folder),
+                visible: this.canDeleteFolder(folder),
+            },
+        ];
+    }
+    getEntryMenuItems(entry) {
+        if (entry.isFolder) {
+            return this.getFolderMenuItems(entry);
+        }
+        return [
+            {
+                label: this.translate('actions.download'),
+                icon: 'general.download-01',
+                command: () => void this.downloadFile(entry),
+                visible: this.canDownloadFile(entry),
+            },
+            {
+                label: this.translate('actions.delete'),
+                icon: 'general.trash-01',
+                severity: 'danger',
+                command: () => this.confirmDeleteFile(entry),
+                visible: this.canDeleteFile(entry),
+            },
+        ];
+    }
+    getFolderIcon(folder) {
+        if (!folder.isEditableFolder && folder.isPrimaryFolder) {
+            return 'file.folder-lock';
+        }
+        if (!folder.isEditableFolder) {
+            return 'security.folder-shield';
+        }
+        return this.isSelectedFolder(folder.id)
+            ? 'file.folder'
+            : 'file.folder-closed';
+    }
+    getFileIcon(entry) {
+        const extension = this.getFileExtension(entry);
+        if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].includes(extension)) {
+            return 'image.image-03';
+        }
+        if (['ts', 'js', 'json', 'html', 'css', 'scss'].includes(extension)) {
+            return 'dev.file-code-02';
+        }
+        if (entry.contentType.toLowerCase().includes('pdf')) {
+            return 'file.file-06';
+        }
+        return 'file.file-01';
+    }
+    getFileAvatarPalette(entry) {
+        const extension = this.getFileExtension(entry);
+        if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].includes(extension)) {
+            return {
+                background: '#d1fae5',
+                color: '#047857',
+            };
+        }
+        if (entry.contentType.toLowerCase().includes('pdf')) {
+            return {
+                background: '#ffe4e6',
+                color: '#be123c',
+            };
+        }
+        if (['xls', 'xlsx', 'csv'].includes(extension)) {
+            return {
+                background: '#dcfce7',
+                color: '#15803d',
+            };
+        }
+        if (['doc', 'docx'].includes(extension)) {
+            return {
+                background: '#dbeafe',
+                color: '#1d4ed8',
+            };
+        }
+        return {
+            background: '#f1f5f9',
+            color: '#334155',
+        };
+    }
+    getHomeAvatarStyle() {
+        return `
+      --p-avatar-background: var(--p-primary-50);
+      --p-avatar-color: var(--p-primary-700);
+    `;
+    }
+    getFolderAvatarStyle(folder) {
+        if (!folder.isEditableFolder && folder.isPrimaryFolder) {
+            return `
+        --p-avatar-background: color-mix(in srgb, var(--p-primary-color) 12%, white);
+        --p-avatar-color: color-mix(in srgb, var(--p-primary-color) 78%, black);
+      `;
+        }
+        if (!folder.isEditableFolder) {
+            return `
+        --p-avatar-background: color-mix(in srgb, var(--p-surface-500) 14%, white);
+        --p-avatar-color: color-mix(in srgb, var(--p-surface-900) 72%, black);
+      `;
+        }
+        return `
+      --p-avatar-background: #fef3c7;
+      --p-avatar-color: #d97706;
+    `;
+    }
+    getFileAvatarStyle(entry) {
+        const palette = this.getFileAvatarPalette(entry);
+        return `
+      --p-avatar-background: ${palette.background};
+      --p-avatar-color: ${palette.color};
+    `;
+    }
+    getActionAvatarStyle() {
+        return `
+      --p-avatar-background: color-mix(in srgb, var(--p-surface-100) 88%, white);
+      --p-avatar-color: var(--p-surface-500);
+    `;
+    }
+    getActionPopoverStyle() {
+        return {
+            width: '15rem',
+        };
+    }
+    getActionItemButtonClass(item) {
+        const baseClass = 'flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-sm text-left transition-colors';
+        if (item.disabled) {
+            return `${baseClass} cursor-not-allowed opacity-45`;
+        }
+        if (item.severity === 'danger') {
+            return `${baseClass} text-red-600 hover:bg-red-50`;
+        }
+        return `${baseClass} text-color hover:bg-surface`;
+    }
+    getActionItemAvatarStyle(item) {
+        if (item.disabled) {
+            return `
+        --p-avatar-background: color-mix(in srgb, var(--p-surface-200) 76%, white);
+        --p-avatar-color: var(--p-surface-400);
+      `;
+        }
+        if (item.severity === 'danger') {
+            return `
+        --p-avatar-background: color-mix(in srgb, #ef4444 12%, white);
+        --p-avatar-color: #dc2626;
+      `;
+        }
+        return `
+      --p-avatar-background: color-mix(in srgb, var(--p-primary-color) 10%, white);
+      --p-avatar-color: color-mix(in srgb, var(--p-primary-color) 82%, black);
+    `;
+    }
+    getVisibleActionItems(items) {
+        return items.filter((item) => item.visible !== false && !item.separator);
+    }
+    hasVisibleActionItems(items) {
+        return this.getVisibleActionItems(items).length > 0;
+    }
+    trackActionItem(item, index) {
+        return item.id ?? item.label ?? index;
+    }
+    getIconButtonClass() {
+        return 'inline-flex items-center justify-center border-0 bg-transparent p-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-55';
+    }
+    getRailItemClass(active) {
+        const baseClass = 'w-full rounded-xl text-left text-sm font-medium text-color transition-[background-color,color,box-shadow] duration-150 hover:bg-[color-mix(in_srgb,var(--p-primary-color)_8%,transparent)]';
+        if (!active) {
+            return baseClass;
+        }
+        return `${baseClass} bg-[color-mix(in_srgb,var(--p-primary-color)_14%,white)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--p-primary-color)_20%,transparent)] text-[color-mix(in_srgb,var(--p-primary-color)_82%,black)]`;
+    }
+    getFileExtension(entry) {
+        return getDocumentLibraryFileExtension(entry.fileName);
+    }
+    formatFileSize(size) {
+        return formatDocumentLibraryFileSize(size);
+    }
+    onBreadcrumbClick(item) {
+        const targetItem = item;
+        if (targetItem.folderId == null) {
+            void this.goToRoot();
+            return;
+        }
+        const targetFolder = this.folderRegistry().get(this.toFolderKey(targetItem.folderId)) ?? null;
+        if (!targetFolder) {
+            void this.goToRoot();
+            return;
+        }
+        void this.openFolder(targetFolder);
+    }
+    isBusy(key) {
+        return this.busyKeys().has(key);
+    }
+    createFolderBusyKey(folderId) {
+        return `create-folder:${this.toFolderKey(folderId)}`;
+    }
+    renameFolderBusyKey(folderId) {
+        return `rename-folder:${this.toFolderKey(folderId)}`;
+    }
+    loadFolderBusyKey(folderId) {
+        return `load-folder:${this.toFolderKey(folderId)}`;
+    }
+    openFolderDialog(mode, options) {
+        const ref = this.modalService.openModal(DocumentLibraryFolderDialog, 'dialog', {
+            header: mode === 'create'
+                ? this.translate('modals.folder.headerCreate')
+                : this.translate('modals.folder.headerRename'),
+            styleClass: '!w-[28rem]',
+            inputValues: {
+                mode,
+                contextLabel: options.contextLabel,
+                initialName: options.initialName,
+            },
+        });
+        if (!ref) {
+            return;
+        }
+        ref.onClose.subscribe((result) => {
+            if (result?.folderName) {
+                void options.onSubmit(result.folderName);
+            }
+        });
+    }
+    async loadFolderEntries(folderId) {
+        try {
+            await this.fetchFolderEntries(folderId);
+        }
+        catch (error) {
+            this.handleError(error, this.translate('errors.loadFolderContents'));
+        }
+    }
+    async fetchFolderEntries(folderId) {
+        const folderKey = this.toFolderKey(folderId);
+        const entries = await this.withBusy(this.loadFolderBusyKey(folderId), async () => (await this.resolveAsync(this.api.loadFolderEntries(this.levelId(), folderId, this.requestContext()))).map((entry) => normalizeDocumentLibraryEntry(entry)));
+        const next = new Map(this.folderEntriesCache());
+        next.set(folderKey, entries);
+        this.folderEntriesCache.set(next);
+        const childFolders = entries
+            .filter((entry) => entry.isFolder)
+            .map((entry) => normalizeDocumentLibraryFolder(entry));
+        this.upsertFolders(childFolders);
+        return entries;
+    }
+    async ensureFolderEntries(folderId) {
+        return (this.folderEntriesCache().get(this.toFolderKey(folderId)) ??
+            (await this.fetchFolderEntries(folderId)));
+    }
+    async attachUploadedDocuments(folder, uploads) {
+        const levelDataId = this.levelDataId();
+        if (levelDataId == null || !uploads.length) {
+            return;
+        }
+        try {
+            const attached = [];
+            const failures = [];
+            const uploadFolderCache = new Map();
+            const hydratedTargetFolders = new Set();
+            await this.withBusy(this.uploadBusyKey(folder.id), async () => {
+                for (const upload of uploads) {
+                    if (!upload.documentGuid) {
+                        continue;
+                    }
+                    try {
+                        const targetFolder = await this.resolveUploadTargetFolder(folder, upload.relativePath, uploadFolderCache);
+                        const targetFolderKey = this.toFolderKey(targetFolder.id);
+                        if (!hydratedTargetFolders.has(targetFolderKey)) {
+                            await this.ensureFolderEntries(targetFolder.id);
+                            hydratedTargetFolders.add(targetFolderKey);
+                        }
+                        const uploaded = normalizeDocumentLibraryFile(await this.resolveAsync(this.api.addDocument(this.levelId(), levelDataId, {
+                            folderId: targetFolder.id,
+                            documentGuid: upload.documentGuid,
+                        }, this.requestContext())));
+                        attached.push(uploaded);
+                        this.patchFolderEntries(targetFolder.id, (entries) => this.mergeEntriesWithUploadedFiles(entries, [uploaded]));
+                        this.actionExecuted.emit({
+                            action: 'upload-file',
+                            target: uploaded,
+                        });
+                    }
+                    catch {
+                        failures.push(upload.fileName);
+                    }
+                }
+            });
+            if (attached.length) {
+                this.toast.success(attached.length === 1
+                    ? this.translate('messages.fileAttached', {
+                        name: attached[0].fileName,
+                    })
+                    : this.translate('messages.filesAttached', {
+                        count: attached.length,
+                    }));
+            }
+            if (failures.length) {
+                throw new Error(failures.length === 1
+                    ? this.translate('errors.attachFile', {
+                        name: failures[0],
+                    })
+                    : this.translate('errors.attachFiles', {
+                        count: failures.length,
+                    }));
+            }
+        }
+        catch (error) {
+            this.handleError(error, this.translate('errors.attachUploadedFiles'));
+        }
+    }
+    async createFolderInBackend(parent, folderName) {
+        const trimmedName = folderName.trim();
+        const parentId = parent?.id ?? null;
+        if (parentId != null &&
+            !this.folderEntriesCache().has(this.toFolderKey(parentId))) {
+            await this.ensureFolderEntries(parentId);
+        }
+        const created = await this.withBusy(this.createFolderBusyKey(parentId ?? 'root'), async () => normalizeDocumentLibraryFolder(await this.resolveAsync(this.api.createFolder(this.levelId(), this.levelDataId(), {
+            parentId,
+            folderName: trimmedName,
+        }, this.requestContext()))));
+        this.upsertFolders([created]);
+        this.insertFolderIntoParent(created);
+        this.expandParentForNewFolder(created.parentId);
+        return created;
+    }
+    insertFolderIntoParent(folder) {
+        if (folder.parentId == null) {
+            this.roots.update((folders) => this.sortFolders([...folders, folder]));
+            return;
+        }
+        this.patchFolderEntries(folder.parentId, (entries) => this.sortEntries([...entries, toDocumentLibraryFolderEntry(folder)]));
+    }
+    replaceFolder(folder) {
+        this.upsertFolders([folder]);
+        if (folder.parentId == null) {
+            this.roots.update((folders) => this.sortFolders(folders.map((item) => this.toFolderKey(item.id) === this.toFolderKey(folder.id)
+                ? folder
+                : item)));
+            return;
+        }
+        this.patchFolderEntries(folder.parentId, (entries) => this.sortEntries(entries.map((entry) => entry.isFolder &&
+            this.toFolderKey(entry.id) === this.toFolderKey(folder.id)
+            ? toDocumentLibraryFolderEntry(folder)
+            : entry)));
+    }
+    removeFolderTree(folderId) {
+        const folderKey = this.toFolderKey(folderId);
+        const parentId = this.folderRegistry().get(folderKey)?.parentId ?? null;
+        const folderKeys = new Set(this.collectFolderKeys(folderId));
+        const nextRegistry = new Map(this.folderRegistry());
+        const nextCache = new Map(this.folderEntriesCache());
+        const nextExpanded = new Set(this.expandedFolderKeys());
+        folderKeys.forEach((key) => {
+            nextRegistry.delete(key);
+            nextCache.delete(key);
+            nextExpanded.delete(key);
+        });
+        this.folderRegistry.set(nextRegistry);
+        this.folderEntriesCache.set(nextCache);
+        this.expandedFolderKeys.set(nextExpanded);
+        this.roots.update((folders) => folders.filter((folder) => this.toFolderKey(folder.id) !== this.toFolderKey(folderId)));
+        if (parentId != null) {
+            this.patchFolderEntries(parentId, (entries) => entries.filter((entry) => !(entry.isFolder && this.toFolderKey(entry.id) === folderKey)));
+        }
+        return folderKeys;
+    }
+    patchFolderEntries(folderId, updater) {
+        const folderKey = this.toFolderKey(folderId);
+        const next = new Map(this.folderEntriesCache());
+        const current = next.get(folderKey) ?? [];
+        next.set(folderKey, updater(current));
+        this.folderEntriesCache.set(next);
+    }
+    upsertFolders(folders) {
+        const next = new Map(this.folderRegistry());
+        folders.forEach((folder) => {
+            next.set(this.toFolderKey(folder.id), folder);
+        });
+        this.folderRegistry.set(next);
+    }
+    expandFolderPath(folder) {
+        const next = new Set(this.expandedFolderKeys());
+        let current = folder;
+        while (current) {
+            next.add(this.toFolderKey(current.id));
+            current = this.getParentFolder(current.id);
+        }
+        this.expandedFolderKeys.set(next);
+    }
+    expandParentForNewFolder(parentId) {
+        if (parentId == null) {
+            return;
+        }
+        this.expandedFolderKeys.update((state) => {
+            const next = new Set(state);
+            next.add(this.toFolderKey(parentId));
+            return next;
+        });
+    }
+    syncSelectedFolderEntry(folder) {
+        const selectedEntry = this.selectedEntry();
+        if (!selectedEntry?.isFolder ||
+            this.toFolderKey(selectedEntry.id) !== this.toFolderKey(folder.id)) {
+            return;
+        }
+        const nextEntry = toDocumentLibraryFolderEntry(folder);
+        this.selectedEntry.set(nextEntry);
+        this.selectionChanged.emit({
+            folder: this.selectedFolder(),
+            entry: nextEntry,
+        });
+    }
+    getFolderTrail(folderId) {
+        const trail = [];
+        let currentId = folderId;
+        while (currentId != null) {
+            const folder = this.folderRegistry().get(this.toFolderKey(currentId));
+            if (!folder) {
+                break;
+            }
+            trail.unshift(folder);
+            currentId = folder.parentId;
+        }
+        return trail;
+    }
+    getParentFolder(folderId) {
+        const folder = this.folderRegistry().get(this.toFolderKey(folderId));
+        if (folder?.parentId == null) {
+            return null;
+        }
+        return this.folderRegistry().get(this.toFolderKey(folder.parentId)) ?? null;
+    }
+    async resolveUploadTargetFolder(folder, relativePath, cache) {
+        const segments = this.getUploadFolderSegments(relativePath);
+        if (!segments.length) {
+            return folder;
+        }
+        let currentFolder = folder;
+        for (const segment of segments) {
+            const cacheKey = `${this.toFolderKey(currentFolder.id)}::${segment.toLowerCase()}`;
+            const cachedFolder = cache.get(cacheKey);
+            if (cachedFolder) {
+                currentFolder = cachedFolder;
+                continue;
+            }
+            const nextFolder = await this.findOrCreateChildFolder(currentFolder, segment);
+            cache.set(cacheKey, nextFolder);
+            currentFolder = nextFolder;
+        }
+        return currentFolder;
+    }
+    async findOrCreateChildFolder(parent, folderName) {
+        const childFolders = await this.ensureFolderEntries(parent.id);
+        const existingFolder = childFolders.find((entry) => entry.isFolder && this.folderNameMatches(entry, folderName));
+        if (existingFolder) {
+            const normalizedFolder = normalizeDocumentLibraryFolder(existingFolder);
+            if (!normalizedFolder.isEditableFolder) {
+                throw new Error(this.translate('errors.protectedFolderUpload', {
+                    name: this.getFolderLabel(normalizedFolder),
+                }));
+            }
+            return normalizedFolder;
+        }
+        return this.createFolderInBackend(parent, folderName);
+    }
+    folderNameMatches(folder, folderName) {
+        const normalizedTarget = folderName.trim().toLocaleLowerCase();
+        const label = normalizeDocumentLibraryLabel(folder.label);
+        return [label.display, label.en, label.ar]
+            .filter(Boolean)
+            .some((value) => value.trim().toLocaleLowerCase() === normalizedTarget);
+    }
+    getUploadFolderSegments(relativePath) {
+        return relativePath
+            .split(/[\\/]/)
+            .map((segment) => segment.trim())
+            .filter(Boolean)
+            .slice(0, -1);
+    }
+    mergeEntriesWithUploadedFiles(entries, uploaded) {
+        const uploadedIds = new Set(uploaded.map((file) => file.id));
+        return this.sortEntries([
+            ...entries.filter((entry) => entry.isFolder),
+            ...entries.filter((entry) => !entry.isFolder && !uploadedIds.has(entry.id)),
+            ...uploaded,
+        ]);
+    }
+    sortFolders(folders) {
+        return [...folders].sort((left, right) => this.getFolderLabel(left).localeCompare(this.getFolderLabel(right)));
+    }
+    sortEntries(entries) {
+        return [...entries].sort((left, right) => {
+            if (left.isFolder !== right.isFolder) {
+                return left.isFolder ? 1 : -1;
+            }
+            return this.getEntryTitle(left).localeCompare(this.getEntryTitle(right));
+        });
+    }
+    getTargetMenuItems(target) {
+        return this.isEntryTarget(target)
+            ? this.getEntryMenuItems(target)
+            : this.getFolderMenuItems(target);
+    }
+    isEntryTarget(target) {
+        return 'isFolder' in target;
+    }
+    isSelectedFolderInTree(folderKeys) {
+        const selectedFolderId = this.selectedFolderId();
+        return (selectedFolderId != null &&
+            folderKeys.has(this.toFolderKey(selectedFolderId)));
+    }
+    clearSelectionForRemovedFolders(folderKeys) {
+        const selectedEntry = this.selectedEntry();
+        if (!selectedEntry?.isFolder ||
+            !folderKeys.has(this.toFolderKey(selectedEntry.id))) {
+            return;
+        }
+        this.selectedEntry.set(null);
+        this.selectionChanged.emit({
+            folder: this.selectedFolder(),
+            entry: null,
+        });
+    }
+    canRenameFolder(folder) {
+        return this.levelDataId() != null && !!folder.isNameEditable;
+    }
+    collectFolderKeys(folderId) {
+        const targetKey = this.toFolderKey(folderId);
+        const collected = [targetKey];
+        const queue = [targetKey];
+        while (queue.length > 0) {
+            const current = queue.shift();
+            this.folderRegistry().forEach((folder, key) => {
+                if (folder.parentId != null &&
+                    this.toFolderKey(folder.parentId) === current &&
+                    !collected.includes(key)) {
+                    collected.push(key);
+                    queue.push(key);
+                }
+            });
+        }
+        return collected;
+    }
+    toFolderKey(folderId) {
+        return String(folderId);
+    }
+    deleteFolderBusyKey(folderId) {
+        return `delete-folder:${this.toFolderKey(folderId)}`;
+    }
+    deleteFileBusyKey(fileId) {
+        return `delete-file:${fileId}`;
+    }
+    uploadBusyKey(folderId) {
+        return `upload-file:${this.toFolderKey(folderId)}`;
+    }
+    async withBusy(key, task) {
+        this.busyKeys.update((state) => {
+            const next = new Set(state);
+            next.add(key);
+            return next;
+        });
+        try {
+            return await task();
+        }
+        finally {
+            this.busyKeys.update((state) => {
+                const next = new Set(state);
+                next.delete(key);
+                return next;
+            });
+        }
+    }
+    async resolveAsync(value) {
+        if (isObservable(value)) {
+            return firstValueFrom(value);
+        }
+        return Promise.resolve(value);
+    }
+    handleError(error, fallbackMessage) {
+        const message = error instanceof Error
+            ? error.message
+            : typeof error === 'string'
+                ? error
+                : fallbackMessage;
+        this.error.set(message);
+        this.toast.error(message);
+        this.errored.emit(message);
+    }
+    translate(key, params) {
+        this.activeLanguage();
+        return this.transloco.translate(`document-library.${key}`, params);
+    }
+    showPopover(popover, event) {
+        if (!popover) {
+            return;
+        }
+        popover.hide();
+        setTimeout(() => popover.show(event), 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DocumentLibrary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DocumentLibrary, isStandalone: true, selector: "mt-document-library", inputs: { levelId: { classPropertyName: "levelId", publicName: "levelId", isSignal: true, isRequired: true, transformFunction: null }, levelDataId: { classPropertyName: "levelDataId", publicName: "levelDataId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, requestContext: { classPropertyName: "requestContext", publicName: "requestContext", isSignal: true, isRequired: false, transformFunction: null }, uploadEndPoint: { classPropertyName: "uploadEndPoint", publicName: "uploadEndPoint", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", errored: "errored", selectionChanged: "selectionChanged", actionExecuted: "actionExecuted" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "nameCellTpl", first: true, predicate: ["nameCellTpl"], descendants: true, isSignal: true }, { propertyName: "updatedCellTpl", first: true, predicate: ["updatedCellTpl"], descendants: true, isSignal: true }, { propertyName: "actionsCellTpl", first: true, predicate: ["actionsCellTpl"], descendants: true, isSignal: true }, { propertyName: "addPopover", first: true, predicate: ["addPopover"], descendants: true, isSignal: true }, { propertyName: "folderPopover", first: true, predicate: ["folderPopover"], descendants: true, isSignal: true }, { propertyName: "contextPopover", first: true, predicate: ["contextPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'document-library'\">\r\n  <div class=\"flex h-full min-h-[42rem] flex-col gap-4\">\r\n    <div class=\"grid gap-4 xl:grid-cols-[19rem_minmax(0,1fr)]\">\r\n      <mt-card class=\"h-full\">\r\n        <ng-template #headless>\r\n          <div class=\"flex h-full flex-col\">\r\n            <div class=\"border-b border-surface px-5 py-5\">\r\n              <div class=\"flex items-start justify-between gap-3\">\r\n                <div>\r\n                  <div class=\"text-base font-semibold\">\r\n                    {{ resolvedTitle() }}\r\n                  </div>\r\n                </div>\r\n                <button\r\n                  type=\"button\"\r\n                  [class]=\"getIconButtonClass()\"\r\n                  [attr.aria-label]=\"\r\n                    t('aria.refresh', { title: resolvedTitle() })\r\n                  \"\r\n                  [disabled]=\"isBusy('roots')\"\r\n                  (click)=\"reload()\"\r\n                >\r\n                  <mt-avatar\r\n                    icon=\"arrow.refresh-cw-01\"\r\n                    [shape]=\"'circle'\"\r\n                    [style]=\"getActionAvatarStyle()\"\r\n                  />\r\n                </button>\r\n              </div>\r\n              <div class=\"mt-3\">\r\n                <mt-text-field\r\n                  [ngModel]=\"railSearch()\"\r\n                  (ngModelChange)=\"railSearch.set($event)\"\r\n                  icon=\"general.search-lg\"\r\n                  [placeholder]=\"t('searchFolders')\"\r\n                />\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"flex-1 overflow-y-auto px-2.5 py-2.5\">\r\n              <button\r\n                type=\"button\"\r\n                [class]=\"\r\n                  getRailItemClass(selectedFolderId() === null) +\n                  ' mb-0.5 flex items-center gap-2.5 px-2.5 py-2'\r\n                \"\r\n                (click)=\"goToRoot()\"\r\n              >\r\n                <mt-avatar\r\n                  class=\"[&_.p-avatar]:h-9 [&_.p-avatar]:w-9 [&_.p-avatar]:text-sm\"\r\n                  icon=\"general.home-05\"\r\n                  size=\"small\"\r\n                  [shape]=\"'square'\"\r\n                  [style]=\"getHomeAvatarStyle()\"\r\n                />\r\n                <span class=\"truncate\">{{ resolvedTitle() }}</span>\r\n              </button>\r\n\r\n              <ng-template #folderNodeTpl let-folder let-depth=\"depth\">\r\n                <div class=\"mt-px\">\r\n                  <div\r\n                    class=\"flex items-center gap-1.5 rounded-lg\"\r\n                    [style.padding-inline-start.rem]=\"0.1 + depth * 0.72\"\r\n                  >\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-color transition hover:bg-surface\"\r\n                      [class.invisible]=\"\r\n                        !folderHasChildFolders(folder.id) &&\r\n                        !hasLoadedChildren(folder.id)\r\n                      \"\r\n                      (click)=\"toggleExpanded(folder)\"\r\n                    >\r\n                      <mt-icon\r\n                        class=\"text-[0.85rem]\"\r\n                        [icon]=\"\r\n                          isExpanded(folder.id)\r\n                            ? 'arrow.chevron-down'\r\n                            : 'arrow.chevron-right'\r\n                        \"\r\n                      />\r\n                    </button>\r\n\r\n                    <button\r\n                      type=\"button\"\r\n                      [class]=\"\r\n                        getRailItemClass(isSelectedFolder(folder.id)) +\r\n                        ' flex min-w-0 flex-1 items-center gap-2.5 px-2.5 py-2'\r\n                      \"\r\n                      (click)=\"onRailFolderClick(folder)\"\r\n                      (contextmenu)=\"openContextMenu($event, folder)\"\r\n                    >\r\n                      <mt-avatar\r\n                        class=\"shrink-0 [&_.p-avatar]:h-9 [&_.p-avatar]:w-9 [&_.p-avatar]:text-sm\"\r\n                        size=\"small\"\r\n                        [icon]=\"getFolderIcon(folder)\"\r\n                        [shape]=\"'square'\"\r\n                        [style]=\"getFolderAvatarStyle(folder)\"\r\n                      />\r\n                      <span class=\"min-w-0 flex-1 truncate\">\r\n                        {{ getFolderLabel(folder) }}\r\n                      </span>\r\n                    </button>\r\n                  </div>\r\n\r\n                  @if (isExpanded(folder.id)) {\r\n                    <div class=\"space-y-px\">\r\n                      @for (\r\n                        child of foldersForRail(folder.id);\r\n                        track child.id\r\n                      ) {\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            folderNodeTpl;\r\n                            context: { $implicit: child, depth: depth + 1 }\r\n                          \"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  }\r\n                </div>\r\n              </ng-template>\r\n\r\n              @for (folder of visibleRoots(); track folder.id) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    folderNodeTpl;\r\n                    context: { $implicit: folder, depth: 0 }\r\n                  \"\r\n                />\r\n              }\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </mt-card>\r\n\r\n      <div class=\"flex min-w-0 flex-col gap-4\">\r\n        <mt-card>\r\n          <div class=\"flex flex-wrap items-center justify-between gap-3\">\r\n            <div class=\"min-w-0 flex-1\">\r\n              <mt-breadcrumb\r\n                [items]=\"breadcrumbs()\"\r\n                (onItemClick)=\"onBreadcrumbClick($event)\"\r\n              />\r\n              <div class=\"mt-2 flex items-start gap-3\">\r\n                <mt-avatar\r\n                  [icon]=\"\r\n                    selectedFolder()\r\n                      ? getFolderIcon(selectedFolder()!)\r\n                      : 'general.home-05'\r\n                  \"\r\n                  size=\"normal\"\r\n                  [shape]=\"'square'\"\r\n                  [style]=\"\r\n                    selectedFolder()\r\n                      ? getFolderAvatarStyle(selectedFolder()!)\r\n                      : getHomeAvatarStyle()\r\n                  \"\r\n                />\r\n                <div class=\"min-w-0\">\r\n                  <div class=\"truncate text-lg font-semibold\">\r\n                    {{ currentFolderTitle() }}\r\n                  </div>\r\n                  <div class=\"truncate text-sm text-muted-color\">\r\n                    {{ currentFolderSubtitle() }}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"flex flex-wrap items-center gap-2 self-start\">\r\n              @if (hasVisibleActionItems(addMenuItems())) {\r\n                <mt-button\r\n                  [label]=\"t('actions.add')\"\r\n                  icon=\"general.plus\"\r\n                  size=\"small\"\r\n                  (onClick)=\"openAddPopover($event)\"\r\n                />\r\n                <p-popover\r\n                  #addPopover\r\n                  [style]=\"getActionPopoverStyle()\"\r\n                  appendTo=\"body\"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      actionListTpl;\r\n                      context: { items: addMenuItems(), popover: addPopover }\r\n                    \"\r\n                  />\r\n                </p-popover>\r\n              }\r\n\r\n              @if (\r\n                selectedFolder() &&\r\n                hasVisibleActionItems(currentFolderMenuItems())\r\n              ) {\r\n                <button\r\n                  type=\"button\"\r\n                  [class]=\"getIconButtonClass()\"\r\n                  [attr.aria-label]=\"t('aria.folderActions')\"\r\n                  (click)=\"openFolderPopover($event)\"\r\n                >\r\n                  <mt-avatar\r\n                    icon=\"general.dots-horizontal\"\r\n                    [shape]=\"'circle'\"\r\n                    [style]=\"getActionAvatarStyle()\"\r\n                  />\r\n                </button>\r\n                <p-popover\r\n                  #folderPopover\r\n                  [style]=\"getActionPopoverStyle()\"\r\n                  appendTo=\"body\"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      actionListTpl;\r\n                      context: {\r\n                        items: currentFolderMenuItems(),\r\n                        popover: folderPopover,\r\n                      }\r\n                    \"\r\n                  />\r\n                </p-popover>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          @if (error()) {\r\n            <div\r\n              class=\"mt-4 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\r\n            >\r\n              {{ error() }}\r\n            </div>\r\n          }\r\n        </mt-card>\r\n\r\n        <mt-card class=\"min-w-0\">\r\n          <div class=\"grid gap-4 xl:grid-cols-[minmax(0,1fr)_18rem]\">\r\n            <div class=\"min-w-0\">\r\n              <mt-table\r\n                [columns]=\"columns()\"\r\n                [data]=\"tableRows()\"\r\n                [loading]=\"\r\n                  selectedFolderId() === null\n                    ? isBusy('roots')\r\n                    : isBusy(loadFolderBusyKey(selectedFolderId()!))\r\n                \"\r\n                [clickableRows]=\"true\"\r\n                (rowClick)=\"onRowClick($event)\"\r\n              >\r\n                <ng-template #empty>\r\n                  <div class=\"flex flex-col items-center gap-3 py-10\">\r\n                    <mt-avatar\r\n                      icon=\"file.folder-question\"\r\n                      size=\"large\"\r\n                      [shape]=\"'square'\"\r\n                      [style]=\"getHomeAvatarStyle()\"\r\n                    />\r\n                    <div class=\"text-base font-semibold\">\r\n                      {{ resolvedEmptyTitle() }}\r\n                    </div>\r\n                    <div class=\"max-w-md text-center text-sm text-muted-color\">\r\n                      {{ resolvedEmptyDescription() }}\r\n                    </div>\r\n                    @if (\r\n                      canCreateFolderInSelection() || canUploadIntoCurrentFolder()\r\n                    ) {\r\n                      <div class=\"flex flex-wrap justify-center gap-2\">\r\n                        @if (canCreateFolderInSelection()) {\r\n                          <mt-button\r\n                            [label]=\"t('actions.newFolder')\"\r\n                            icon=\"file.folder-plus\"\r\n                            (onClick)=\"openCreateFolderDialog(selectedFolder())\"\r\n                          />\r\n                        }\r\n                        @if (canUploadIntoCurrentFolder()) {\r\n                          <mt-button\r\n                            [label]=\"t('actions.uploadFile')\"\r\n                            icon=\"general.upload-01\"\r\n                            [outlined]=\"true\"\r\n                            (onClick)=\"openUploadDialog('file')\"\r\n                          />\r\n                          <mt-button\r\n                            [label]=\"t('actions.uploadFolder')\"\r\n                            icon=\"file.folder\"\r\n                            [outlined]=\"true\"\r\n                            (onClick)=\"openUploadDialog('folder')\"\r\n                          />\r\n                        }\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </ng-template>\r\n              </mt-table>\r\n            </div>\r\n\r\n            <div\r\n              class=\"min-w-0 rounded-2xl border border-surface bg-surface/30 p-4\"\r\n            >\r\n              <div class=\"text-sm font-semibold\">\r\n                {{ t(\"selection.title\") }}\r\n              </div>\r\n\r\n              @if (selectedEntry(); as entry) {\r\n                <div class=\"mt-4 space-y-4\">\r\n                  <div class=\"flex items-center gap-3\">\r\n                    @if (entry.isFolder) {\r\n                      <mt-avatar\r\n                        [icon]=\"getFolderIcon(entry)\"\r\n                        size=\"large\"\r\n                        [shape]=\"'square'\"\r\n                        [style]=\"getFolderAvatarStyle(entry)\"\r\n                      />\r\n                    } @else {\r\n                      <mt-avatar\r\n                        [icon]=\"getFileIcon(entry)\"\r\n                        size=\"large\"\r\n                        [shape]=\"'square'\"\r\n                        [style]=\"getFileAvatarStyle(entry)\"\r\n                      />\r\n                    }\r\n\r\n                    <div class=\"min-w-0\">\r\n                      <div class=\"truncate text-base font-semibold\">\r\n                        {{ getEntryTitle(entry) }}\r\n                      </div>\r\n                      <div class=\"truncate text-sm text-muted-color\">\r\n                        {{\r\n                          entry.isFolder\r\n                            ? t(\"selection.folder\")\r\n                            : t(\"selection.file\")\r\n                        }}\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n\r\n                  @if (entry.isFolder) {\r\n                    <div class=\"grid gap-3 text-sm\">\r\n                      <div\r\n                        class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n                      >\r\n                        <div\r\n                          class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n                        >\r\n                          {{ t(\"selection.permissions\") }}\r\n                        </div>\r\n                        <div class=\"mt-1 font-medium\">\r\n                          {{\r\n                            entry.isEditableFolder\r\n                              ? t(\"selection.editableArea\")\r\n                              : t(\"selection.systemManaged\")\r\n                          }}\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n                      >\r\n                        <div\r\n                          class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n                        >\r\n                          {{ t(\"selection.rename\") }}\r\n                        </div>\r\n                        <div class=\"mt-1 font-medium\">\r\n                          {{\r\n                            entry.isNameEditable\r\n                              ? t(\"selection.allowed\")\r\n                              : t(\"selection.protected\")\r\n                          }}\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  } @else {\r\n                    <div class=\"grid gap-3 text-sm\">\r\n                      <div\r\n                        class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n                      >\r\n                        <div\r\n                          class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n                        >\r\n                          {{ t(\"selection.type\") }}\r\n                        </div>\r\n                        <div class=\"mt-1 font-medium uppercase\">\r\n                          {{ getFileExtension(entry) }}\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n                      >\r\n                        <div\r\n                          class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n                        >\r\n                          {{ t(\"selection.size\") }}\r\n                        </div>\r\n                        <div class=\"mt-1 font-medium\">\r\n                          {{ formatFileSize(entry.size) }}\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n                      >\r\n                        <div\r\n                          class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n                        >\r\n                          {{ t(\"selection.owner\") }}\r\n                        </div>\r\n                        <div class=\"mt-1 font-medium\">\r\n                          {{ entry.createdBy || t(\"owner.unknown\") }}\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              } @else {\r\n                <div class=\"mt-4 text-sm text-muted-color\">\r\n                  {{ t(\"selection.inspectHint\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </mt-card>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-template #actionListTpl let-items=\"items\" let-popover=\"popover\">\r\n      <div class=\"flex flex-col gap-0.5 p-0.5\">\r\n        @for (item of getVisibleActionItems(items); track trackActionItem(item, $index)) {\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"getActionItemButtonClass(item)\"\r\n            (click)=\"executePopoverItem(item, popover)\"\r\n          >\r\n            @if (item.icon) {\r\n              <mt-avatar\r\n                class=\"[&_.p-avatar]:h-8 [&_.p-avatar]:w-8 [&_.p-avatar]:text-xs\"\r\n                [icon]=\"item.icon\"\r\n                [shape]=\"'square'\"\r\n                [style]=\"getActionItemAvatarStyle(item)\"\r\n              />\r\n            }\r\n            <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\r\n          </button>\r\n        }\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #nameCellTpl let-row>\r\n      <div\r\n        class=\"flex min-w-0 items-center gap-3\"\r\n        (contextmenu)=\"openContextMenu($event, row.entry)\"\r\n      >\r\n        @if (row.entry.isFolder) {\r\n          <mt-avatar\r\n            class=\"shrink-0\"\r\n            [icon]=\"getFolderIcon(row.entry)\"\r\n            [shape]=\"'square'\"\r\n            [style]=\"getFolderAvatarStyle(row.entry)\"\r\n          />\r\n        } @else {\r\n          <mt-avatar\r\n            class=\"shrink-0\"\r\n            [icon]=\"getFileIcon(row.entry)\"\r\n            [shape]=\"'square'\"\r\n            [style]=\"getFileAvatarStyle(row.entry)\"\r\n          />\r\n        }\r\n\r\n        <div class=\"min-w-0\">\r\n          <div class=\"truncate text-sm font-semibold\">\r\n            {{ row.name }}\r\n          </div>\r\n          @if (row.entry.isFolder) {\r\n            <div class=\"truncate text-xs text-muted-color\">\r\n              {{\r\n                row.entry.isEditableFolder\r\n                  ? t(\"selection.manualFolder\")\r\n                  : t(\"selection.protectedFolder\")\r\n              }}\r\n            </div>\r\n          } @else {\r\n            <div class=\"truncate text-xs text-muted-color uppercase\">\r\n              {{ getFileExtension(row.entry) }} -\r\n              {{ formatFileSize(row.entry.size) }}\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #updatedCellTpl let-row>\r\n      @if (row.entry.isFolder) {\r\n        <span class=\"text-sm text-muted-color\">-</span>\r\n      } @else {\r\n        <div class=\"text-sm\">\r\n          {{ row.updatedAt | date: \"dd MMM, y\" }}\r\n        </div>\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #actionsCellTpl let-row>\r\n      @if (hasVisibleActionItems(getEntryMenuItems(row.entry))) {\r\n        <div\r\n          class=\"flex w-full items-center justify-center\"\r\n          data-row-click-ignore=\"true\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"getIconButtonClass()\"\r\n            [attr.aria-label]=\"t('aria.rowActions')\"\r\n            (click)=\"rowPopover.toggle($event)\"\r\n          >\r\n            <mt-avatar\r\n              icon=\"general.dots-vertical\"\r\n              [shape]=\"'circle'\"\r\n              [style]=\"getActionAvatarStyle()\"\r\n            />\r\n          </button>\r\n          <p-popover\r\n            #rowPopover\r\n            [style]=\"getActionPopoverStyle()\"\r\n            appendTo=\"body\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                actionListTpl;\r\n                context: {\r\n                  items: getEntryMenuItems(row.entry),\r\n                  popover: rowPopover,\r\n                }\r\n              \"\r\n            />\r\n          </p-popover>\r\n        </div>\r\n      }\r\n    </ng-template>\r\n\r\n    <p-popover\r\n      #contextPopover\r\n      [style]=\"getActionPopoverStyle()\"\r\n      appendTo=\"body\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          actionListTpl;\r\n          context: { items: contextMenuItems(), popover: contextPopover }\r\n        \"\r\n      />\r\n    </p-popover>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DocumentLibrary, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-document-library', standalone: true, host: {
+                        class: 'block',
+                    }, imports: [
+                        CommonModule,
+                        FormsModule,
+                        Avatar,
+                        Breadcrumb,
+                        Button,
+                        Card,
+                        DatePipe,
+                        Icon,
+                        Popover,
+                        Table,
+                        TextField,
+                        TranslocoDirective,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'document-library'\">\r\n  <div class=\"flex h-full min-h-[42rem] flex-col gap-4\">\r\n    <div class=\"grid gap-4 xl:grid-cols-[19rem_minmax(0,1fr)]\">\r\n      <mt-card class=\"h-full\">\r\n        <ng-template #headless>\r\n          <div class=\"flex h-full flex-col\">\r\n            <div class=\"border-b border-surface px-5 py-5\">\r\n              <div class=\"flex items-start justify-between gap-3\">\r\n                <div>\r\n                  <div class=\"text-base font-semibold\">\r\n                    {{ resolvedTitle() }}\r\n                  </div>\r\n                </div>\r\n                <button\r\n                  type=\"button\"\r\n                  [class]=\"getIconButtonClass()\"\r\n                  [attr.aria-label]=\"\r\n                    t('aria.refresh', { title: resolvedTitle() })\r\n                  \"\r\n                  [disabled]=\"isBusy('roots')\"\r\n                  (click)=\"reload()\"\r\n                >\r\n                  <mt-avatar\r\n                    icon=\"arrow.refresh-cw-01\"\r\n                    [shape]=\"'circle'\"\r\n                    [style]=\"getActionAvatarStyle()\"\r\n                  />\r\n                </button>\r\n              </div>\r\n              <div class=\"mt-3\">\r\n                <mt-text-field\r\n                  [ngModel]=\"railSearch()\"\r\n                  (ngModelChange)=\"railSearch.set($event)\"\r\n                  icon=\"general.search-lg\"\r\n                  [placeholder]=\"t('searchFolders')\"\r\n                />\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"flex-1 overflow-y-auto px-2.5 py-2.5\">\r\n              <button\r\n                type=\"button\"\r\n                [class]=\"\r\n                  getRailItemClass(selectedFolderId() === null) +\n                  ' mb-0.5 flex items-center gap-2.5 px-2.5 py-2'\r\n                \"\r\n                (click)=\"goToRoot()\"\r\n              >\r\n                <mt-avatar\r\n                  class=\"[&_.p-avatar]:h-9 [&_.p-avatar]:w-9 [&_.p-avatar]:text-sm\"\r\n                  icon=\"general.home-05\"\r\n                  size=\"small\"\r\n                  [shape]=\"'square'\"\r\n                  [style]=\"getHomeAvatarStyle()\"\r\n                />\r\n                <span class=\"truncate\">{{ resolvedTitle() }}</span>\r\n              </button>\r\n\r\n              <ng-template #folderNodeTpl let-folder let-depth=\"depth\">\r\n                <div class=\"mt-px\">\r\n                  <div\r\n                    class=\"flex items-center gap-1.5 rounded-lg\"\r\n                    [style.padding-inline-start.rem]=\"0.1 + depth * 0.72\"\r\n                  >\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-color transition hover:bg-surface\"\r\n                      [class.invisible]=\"\r\n                        !folderHasChildFolders(folder.id) &&\r\n                        !hasLoadedChildren(folder.id)\r\n                      \"\r\n                      (click)=\"toggleExpanded(folder)\"\r\n                    >\r\n                      <mt-icon\r\n                        class=\"text-[0.85rem]\"\r\n                        [icon]=\"\r\n                          isExpanded(folder.id)\r\n                            ? 'arrow.chevron-down'\r\n                            : 'arrow.chevron-right'\r\n                        \"\r\n                      />\r\n                    </button>\r\n\r\n                    <button\r\n                      type=\"button\"\r\n                      [class]=\"\r\n                        getRailItemClass(isSelectedFolder(folder.id)) +\r\n                        ' flex min-w-0 flex-1 items-center gap-2.5 px-2.5 py-2'\r\n                      \"\r\n                      (click)=\"onRailFolderClick(folder)\"\r\n                      (contextmenu)=\"openContextMenu($event, folder)\"\r\n                    >\r\n                      <mt-avatar\r\n                        class=\"shrink-0 [&_.p-avatar]:h-9 [&_.p-avatar]:w-9 [&_.p-avatar]:text-sm\"\r\n                        size=\"small\"\r\n                        [icon]=\"getFolderIcon(folder)\"\r\n                        [shape]=\"'square'\"\r\n                        [style]=\"getFolderAvatarStyle(folder)\"\r\n                      />\r\n                      <span class=\"min-w-0 flex-1 truncate\">\r\n                        {{ getFolderLabel(folder) }}\r\n                      </span>\r\n                    </button>\r\n                  </div>\r\n\r\n                  @if (isExpanded(folder.id)) {\r\n                    <div class=\"space-y-px\">\r\n                      @for (\r\n                        child of foldersForRail(folder.id);\r\n                        track child.id\r\n                      ) {\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            folderNodeTpl;\r\n                            context: { $implicit: child, depth: depth + 1 }\r\n                          \"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  }\r\n                </div>\r\n              </ng-template>\r\n\r\n              @for (folder of visibleRoots(); track folder.id) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    folderNodeTpl;\r\n                    context: { $implicit: folder, depth: 0 }\r\n                  \"\r\n                />\r\n              }\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </mt-card>\r\n\r\n      <div class=\"flex min-w-0 flex-col gap-4\">\r\n        <mt-card>\r\n          <div class=\"flex flex-wrap items-center justify-between gap-3\">\r\n            <div class=\"min-w-0 flex-1\">\r\n              <mt-breadcrumb\r\n                [items]=\"breadcrumbs()\"\r\n                (onItemClick)=\"onBreadcrumbClick($event)\"\r\n              />\r\n              <div class=\"mt-2 flex items-start gap-3\">\r\n                <mt-avatar\r\n                  [icon]=\"\r\n                    selectedFolder()\r\n                      ? getFolderIcon(selectedFolder()!)\r\n                      : 'general.home-05'\r\n                  \"\r\n                  size=\"normal\"\r\n                  [shape]=\"'square'\"\r\n                  [style]=\"\r\n                    selectedFolder()\r\n                      ? getFolderAvatarStyle(selectedFolder()!)\r\n                      : getHomeAvatarStyle()\r\n                  \"\r\n                />\r\n                <div class=\"min-w-0\">\r\n                  <div class=\"truncate text-lg font-semibold\">\r\n                    {{ currentFolderTitle() }}\r\n                  </div>\r\n                  <div class=\"truncate text-sm text-muted-color\">\r\n                    {{ currentFolderSubtitle() }}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"flex flex-wrap items-center gap-2 self-start\">\r\n              @if (hasVisibleActionItems(addMenuItems())) {\r\n                <mt-button\r\n                  [label]=\"t('actions.add')\"\r\n                  icon=\"general.plus\"\r\n                  size=\"small\"\r\n                  (onClick)=\"openAddPopover($event)\"\r\n                />\r\n                <p-popover\r\n                  #addPopover\r\n                  [style]=\"getActionPopoverStyle()\"\r\n                  appendTo=\"body\"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      actionListTpl;\r\n                      context: { items: addMenuItems(), popover: addPopover }\r\n                    \"\r\n                  />\r\n                </p-popover>\r\n              }\r\n\r\n              @if (\r\n                selectedFolder() &&\r\n                hasVisibleActionItems(currentFolderMenuItems())\r\n              ) {\r\n                <button\r\n                  type=\"button\"\r\n                  [class]=\"getIconButtonClass()\"\r\n                  [attr.aria-label]=\"t('aria.folderActions')\"\r\n                  (click)=\"openFolderPopover($event)\"\r\n                >\r\n                  <mt-avatar\r\n                    icon=\"general.dots-horizontal\"\r\n                    [shape]=\"'circle'\"\r\n                    [style]=\"getActionAvatarStyle()\"\r\n                  />\r\n                </button>\r\n                <p-popover\r\n                  #folderPopover\r\n                  [style]=\"getActionPopoverStyle()\"\r\n                  appendTo=\"body\"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      actionListTpl;\r\n                      context: {\r\n                        items: currentFolderMenuItems(),\r\n                        popover: folderPopover,\r\n                      }\r\n                    \"\r\n                  />\r\n                </p-popover>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          @if (error()) {\r\n            <div\r\n              class=\"mt-4 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\r\n            >\r\n              {{ error() }}\r\n            </div>\r\n          }\r\n        </mt-card>\r\n\r\n        <mt-card class=\"min-w-0\">\r\n          <div class=\"grid gap-4 xl:grid-cols-[minmax(0,1fr)_18rem]\">\r\n            <div class=\"min-w-0\">\r\n              <mt-table\r\n                [columns]=\"columns()\"\r\n                [data]=\"tableRows()\"\r\n                [loading]=\"\r\n                  selectedFolderId() === null\n                    ? isBusy('roots')\r\n                    : isBusy(loadFolderBusyKey(selectedFolderId()!))\r\n                \"\r\n                [clickableRows]=\"true\"\r\n                (rowClick)=\"onRowClick($event)\"\r\n              >\r\n                <ng-template #empty>\r\n                  <div class=\"flex flex-col items-center gap-3 py-10\">\r\n                    <mt-avatar\r\n                      icon=\"file.folder-question\"\r\n                      size=\"large\"\r\n                      [shape]=\"'square'\"\r\n                      [style]=\"getHomeAvatarStyle()\"\r\n                    />\r\n                    <div class=\"text-base font-semibold\">\r\n                      {{ resolvedEmptyTitle() }}\r\n                    </div>\r\n                    <div class=\"max-w-md text-center text-sm text-muted-color\">\r\n                      {{ resolvedEmptyDescription() }}\r\n                    </div>\r\n                    @if (\r\n                      canCreateFolderInSelection() || canUploadIntoCurrentFolder()\r\n                    ) {\r\n                      <div class=\"flex flex-wrap justify-center gap-2\">\r\n                        @if (canCreateFolderInSelection()) {\r\n                          <mt-button\r\n                            [label]=\"t('actions.newFolder')\"\r\n                            icon=\"file.folder-plus\"\r\n                            (onClick)=\"openCreateFolderDialog(selectedFolder())\"\r\n                          />\r\n                        }\r\n                        @if (canUploadIntoCurrentFolder()) {\r\n                          <mt-button\r\n                            [label]=\"t('actions.uploadFile')\"\r\n                            icon=\"general.upload-01\"\r\n                            [outlined]=\"true\"\r\n                            (onClick)=\"openUploadDialog('file')\"\r\n                          />\r\n                          <mt-button\r\n                            [label]=\"t('actions.uploadFolder')\"\r\n                            icon=\"file.folder\"\r\n                            [outlined]=\"true\"\r\n                            (onClick)=\"openUploadDialog('folder')\"\r\n                          />\r\n                        }\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </ng-template>\r\n              </mt-table>\r\n            </div>\r\n\r\n            <div\r\n              class=\"min-w-0 rounded-2xl border border-surface bg-surface/30 p-4\"\r\n            >\r\n              <div class=\"text-sm font-semibold\">\r\n                {{ t(\"selection.title\") }}\r\n              </div>\r\n\r\n              @if (selectedEntry(); as entry) {\r\n                <div class=\"mt-4 space-y-4\">\r\n                  <div class=\"flex items-center gap-3\">\r\n                    @if (entry.isFolder) {\r\n                      <mt-avatar\r\n                        [icon]=\"getFolderIcon(entry)\"\r\n                        size=\"large\"\r\n                        [shape]=\"'square'\"\r\n                        [style]=\"getFolderAvatarStyle(entry)\"\r\n                      />\r\n                    } @else {\r\n                      <mt-avatar\r\n                        [icon]=\"getFileIcon(entry)\"\r\n                        size=\"large\"\r\n                        [shape]=\"'square'\"\r\n                        [style]=\"getFileAvatarStyle(entry)\"\r\n                      />\r\n                    }\r\n\r\n                    <div class=\"min-w-0\">\r\n                      <div class=\"truncate text-base font-semibold\">\r\n                        {{ getEntryTitle(entry) }}\r\n                      </div>\r\n                      <div class=\"truncate text-sm text-muted-color\">\r\n                        {{\r\n                          entry.isFolder\r\n                            ? t(\"selection.folder\")\r\n                            : t(\"selection.file\")\r\n                        }}\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n\r\n                  @if (entry.isFolder) {\r\n                    <div class=\"grid gap-3 text-sm\">\r\n                      <div\r\n                        class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n                      >\r\n                        <div\r\n                          class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n                        >\r\n                          {{ t(\"selection.permissions\") }}\r\n                        </div>\r\n                        <div class=\"mt-1 font-medium\">\r\n                          {{\r\n                            entry.isEditableFolder\r\n                              ? t(\"selection.editableArea\")\r\n                              : t(\"selection.systemManaged\")\r\n                          }}\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n                      >\r\n                        <div\r\n                          class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n                        >\r\n                          {{ t(\"selection.rename\") }}\r\n                        </div>\r\n                        <div class=\"mt-1 font-medium\">\r\n                          {{\r\n                            entry.isNameEditable\r\n                              ? t(\"selection.allowed\")\r\n                              : t(\"selection.protected\")\r\n                          }}\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  } @else {\r\n                    <div class=\"grid gap-3 text-sm\">\r\n                      <div\r\n                        class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n                      >\r\n                        <div\r\n                          class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n                        >\r\n                          {{ t(\"selection.type\") }}\r\n                        </div>\r\n                        <div class=\"mt-1 font-medium uppercase\">\r\n                          {{ getFileExtension(entry) }}\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n                      >\r\n                        <div\r\n                          class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n                        >\r\n                          {{ t(\"selection.size\") }}\r\n                        </div>\r\n                        <div class=\"mt-1 font-medium\">\r\n                          {{ formatFileSize(entry.size) }}\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n                      >\r\n                        <div\r\n                          class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n                        >\r\n                          {{ t(\"selection.owner\") }}\r\n                        </div>\r\n                        <div class=\"mt-1 font-medium\">\r\n                          {{ entry.createdBy || t(\"owner.unknown\") }}\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              } @else {\r\n                <div class=\"mt-4 text-sm text-muted-color\">\r\n                  {{ t(\"selection.inspectHint\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </mt-card>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-template #actionListTpl let-items=\"items\" let-popover=\"popover\">\r\n      <div class=\"flex flex-col gap-0.5 p-0.5\">\r\n        @for (item of getVisibleActionItems(items); track trackActionItem(item, $index)) {\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"getActionItemButtonClass(item)\"\r\n            (click)=\"executePopoverItem(item, popover)\"\r\n          >\r\n            @if (item.icon) {\r\n              <mt-avatar\r\n                class=\"[&_.p-avatar]:h-8 [&_.p-avatar]:w-8 [&_.p-avatar]:text-xs\"\r\n                [icon]=\"item.icon\"\r\n                [shape]=\"'square'\"\r\n                [style]=\"getActionItemAvatarStyle(item)\"\r\n              />\r\n            }\r\n            <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\r\n          </button>\r\n        }\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #nameCellTpl let-row>\r\n      <div\r\n        class=\"flex min-w-0 items-center gap-3\"\r\n        (contextmenu)=\"openContextMenu($event, row.entry)\"\r\n      >\r\n        @if (row.entry.isFolder) {\r\n          <mt-avatar\r\n            class=\"shrink-0\"\r\n            [icon]=\"getFolderIcon(row.entry)\"\r\n            [shape]=\"'square'\"\r\n            [style]=\"getFolderAvatarStyle(row.entry)\"\r\n          />\r\n        } @else {\r\n          <mt-avatar\r\n            class=\"shrink-0\"\r\n            [icon]=\"getFileIcon(row.entry)\"\r\n            [shape]=\"'square'\"\r\n            [style]=\"getFileAvatarStyle(row.entry)\"\r\n          />\r\n        }\r\n\r\n        <div class=\"min-w-0\">\r\n          <div class=\"truncate text-sm font-semibold\">\r\n            {{ row.name }}\r\n          </div>\r\n          @if (row.entry.isFolder) {\r\n            <div class=\"truncate text-xs text-muted-color\">\r\n              {{\r\n                row.entry.isEditableFolder\r\n                  ? t(\"selection.manualFolder\")\r\n                  : t(\"selection.protectedFolder\")\r\n              }}\r\n            </div>\r\n          } @else {\r\n            <div class=\"truncate text-xs text-muted-color uppercase\">\r\n              {{ getFileExtension(row.entry) }} -\r\n              {{ formatFileSize(row.entry.size) }}\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #updatedCellTpl let-row>\r\n      @if (row.entry.isFolder) {\r\n        <span class=\"text-sm text-muted-color\">-</span>\r\n      } @else {\r\n        <div class=\"text-sm\">\r\n          {{ row.updatedAt | date: \"dd MMM, y\" }}\r\n        </div>\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #actionsCellTpl let-row>\r\n      @if (hasVisibleActionItems(getEntryMenuItems(row.entry))) {\r\n        <div\r\n          class=\"flex w-full items-center justify-center\"\r\n          data-row-click-ignore=\"true\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"getIconButtonClass()\"\r\n            [attr.aria-label]=\"t('aria.rowActions')\"\r\n            (click)=\"rowPopover.toggle($event)\"\r\n          >\r\n            <mt-avatar\r\n              icon=\"general.dots-vertical\"\r\n              [shape]=\"'circle'\"\r\n              [style]=\"getActionAvatarStyle()\"\r\n            />\r\n          </button>\r\n          <p-popover\r\n            #rowPopover\r\n            [style]=\"getActionPopoverStyle()\"\r\n            appendTo=\"body\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                actionListTpl;\r\n                context: {\r\n                  items: getEntryMenuItems(row.entry),\r\n                  popover: rowPopover,\r\n                }\r\n              \"\r\n            />\r\n          </p-popover>\r\n        </div>\r\n      }\r\n    </ng-template>\r\n\r\n    <p-popover\r\n      #contextPopover\r\n      [style]=\"getActionPopoverStyle()\"\r\n      appendTo=\"body\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          actionListTpl;\r\n          context: { items: contextMenuItems(), popover: contextPopover }\r\n        \"\r\n      />\r\n    </p-popover>\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { levelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelId", required: true }] }], levelDataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelDataId", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], requestContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestContext", required: false }] }], uploadEndPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadEndPoint", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], errored: [{ type: i0.Output, args: ["errored"] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], actionExecuted: [{ type: i0.Output, args: ["actionExecuted"] }], nameCellTpl: [{ type: i0.ViewChild, args: ['nameCellTpl', { isSignal: true }] }], updatedCellTpl: [{ type: i0.ViewChild, args: ['updatedCellTpl', { isSignal: true }] }], actionsCellTpl: [{ type: i0.ViewChild, args: ['actionsCellTpl', { isSignal: true }] }], addPopover: [{ type: i0.ViewChild, args: ['addPopover', { isSignal: true }] }], folderPopover: [{ type: i0.ViewChild, args: ['folderPopover', { isSignal: true }] }], contextPopover: [{ type: i0.ViewChild, args: ['contextPopover', { isSignal: true }] }] } });
+
+function isDocumentLibraryFolderEntry(entry) {
+    return !!entry && 'isFolder' in entry && entry.isFolder;
+}
+function isDocumentLibraryFileEntry(entry) {
+    return !!entry && !entry.isFolder;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DocumentLibrary, isDocumentLibraryFileEntry, isDocumentLibraryFolderEntry };
+//# sourceMappingURL=masterteam-document-library.mjs.map