@masterteam/document-library 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -275,21 +275,21 @@ class DocumentLibraryApiService {
|
|
|
275
275
|
}
|
|
276
276
|
return trimmed.replace(/^\//, '');
|
|
277
277
|
}
|
|
278
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
279
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
278
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DocumentLibraryApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
279
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DocumentLibraryApiService, providedIn: 'root' });
|
|
280
280
|
}
|
|
281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
281
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DocumentLibraryApiService, decorators: [{
|
|
282
282
|
type: Injectable,
|
|
283
283
|
args: [{ providedIn: 'root' }]
|
|
284
284
|
}] });
|
|
285
285
|
|
|
286
286
|
class DocumentLibraryFolderDialog {
|
|
287
|
-
mode = input('create', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
288
|
-
contextLabel = input('', ...(ngDevMode ? [{ debugName: "contextLabel" }] : []));
|
|
289
|
-
initialName = input('', ...(ngDevMode ? [{ debugName: "initialName" }] : []));
|
|
287
|
+
mode = input('create', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
288
|
+
contextLabel = input('', ...(ngDevMode ? [{ debugName: "contextLabel" }] : /* istanbul ignore next */ []));
|
|
289
|
+
initialName = input('', ...(ngDevMode ? [{ debugName: "initialName" }] : /* istanbul ignore next */ []));
|
|
290
290
|
modal = inject(ModalService);
|
|
291
291
|
ref = inject(ModalRef);
|
|
292
|
-
folderName = signal('', ...(ngDevMode ? [{ debugName: "folderName" }] : []));
|
|
292
|
+
folderName = signal('', ...(ngDevMode ? [{ debugName: "folderName" }] : /* istanbul ignore next */ []));
|
|
293
293
|
constructor() {
|
|
294
294
|
effect(() => {
|
|
295
295
|
this.folderName.set(this.initialName());
|
|
@@ -307,27 +307,27 @@ class DocumentLibraryFolderDialog {
|
|
|
307
307
|
cancel() {
|
|
308
308
|
this.ref.close(null);
|
|
309
309
|
}
|
|
310
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
311
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
310
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DocumentLibraryFolderDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
311
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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"] }] });
|
|
312
312
|
}
|
|
313
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
313
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DocumentLibraryFolderDialog, decorators: [{
|
|
314
314
|
type: Component,
|
|
315
315
|
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" }]
|
|
316
316
|
}], 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 }] }] } });
|
|
317
317
|
|
|
318
318
|
class DocumentLibraryUploadDialog {
|
|
319
|
-
mode = input('file', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
320
|
-
folderLabel = input('', ...(ngDevMode ? [{ debugName: "folderLabel" }] : []));
|
|
321
|
-
uploadEndPoint = input('uploader', ...(ngDevMode ? [{ debugName: "uploadEndPoint" }] : []));
|
|
322
|
-
requestContext = input(undefined, ...(ngDevMode ? [{ debugName: "requestContext" }] : []));
|
|
319
|
+
mode = input('file', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
320
|
+
folderLabel = input('', ...(ngDevMode ? [{ debugName: "folderLabel" }] : /* istanbul ignore next */ []));
|
|
321
|
+
uploadEndPoint = input('uploader', ...(ngDevMode ? [{ debugName: "uploadEndPoint" }] : /* istanbul ignore next */ []));
|
|
322
|
+
requestContext = input(undefined, ...(ngDevMode ? [{ debugName: "requestContext" }] : /* istanbul ignore next */ []));
|
|
323
323
|
modal = inject(ModalService);
|
|
324
324
|
api = inject(DocumentLibraryApiService);
|
|
325
325
|
ref = inject(ModalRef);
|
|
326
326
|
transloco = inject(TranslocoService);
|
|
327
|
-
uploadedFile = signal(null, ...(ngDevMode ? [{ debugName: "uploadedFile" }] : []));
|
|
328
|
-
folderItems = signal([], ...(ngDevMode ? [{ debugName: "folderItems" }] : []));
|
|
329
|
-
targetRootFolderName = signal('', ...(ngDevMode ? [{ debugName: "targetRootFolderName" }] : []));
|
|
330
|
-
submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
|
|
327
|
+
uploadedFile = signal(null, ...(ngDevMode ? [{ debugName: "uploadedFile" }] : /* istanbul ignore next */ []));
|
|
328
|
+
folderItems = signal([], ...(ngDevMode ? [{ debugName: "folderItems" }] : /* istanbul ignore next */ []));
|
|
329
|
+
targetRootFolderName = signal('', ...(ngDevMode ? [{ debugName: "targetRootFolderName" }] : /* istanbul ignore next */ []));
|
|
330
|
+
submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
|
|
331
331
|
activeLanguage = toSignal(this.transloco.langChanges$, {
|
|
332
332
|
initialValue: this.transloco.getActiveLang() || 'en',
|
|
333
333
|
});
|
|
@@ -336,14 +336,14 @@ class DocumentLibraryUploadDialog {
|
|
|
336
336
|
return firstItem
|
|
337
337
|
? (this.getRelativePathSegments(firstItem.relativePath)[0] ?? '')
|
|
338
338
|
: '';
|
|
339
|
-
}, ...(ngDevMode ? [{ debugName: "selectedFolderName" }] : []));
|
|
340
|
-
hasTargetRootFolderName = computed(() => !!this.targetRootFolderName().trim(), ...(ngDevMode ? [{ debugName: "hasTargetRootFolderName" }] : []));
|
|
341
|
-
selectedCount = computed(() => this.folderItems().filter((item) => item.enabled).length, ...(ngDevMode ? [{ debugName: "selectedCount" }] : []));
|
|
339
|
+
}, ...(ngDevMode ? [{ debugName: "selectedFolderName" }] : /* istanbul ignore next */ []));
|
|
340
|
+
hasTargetRootFolderName = computed(() => !!this.targetRootFolderName().trim(), ...(ngDevMode ? [{ debugName: "hasTargetRootFolderName" }] : /* istanbul ignore next */ []));
|
|
341
|
+
selectedCount = computed(() => this.folderItems().filter((item) => item.enabled).length, ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
|
|
342
342
|
uploadedCount = computed(() => this.folderItems().filter((item) => item.enabled && item.uploadedAsset)
|
|
343
|
-
.length, ...(ngDevMode ? [{ debugName: "uploadedCount" }] : []));
|
|
344
|
-
pendingCount = computed(() => this.folderItems().filter((item) => item.enabled && !item.uploadedAsset && !item.uploading).length, ...(ngDevMode ? [{ debugName: "pendingCount" }] : []));
|
|
345
|
-
failedCount = computed(() => this.folderItems().filter((item) => item.enabled && !item.uploadedAsset && !!item.error).length, ...(ngDevMode ? [{ debugName: "failedCount" }] : []));
|
|
346
|
-
canCloseWithUploads = computed(() => this.uploadedCount() > 0 && this.pendingCount() === 0, ...(ngDevMode ? [{ debugName: "canCloseWithUploads" }] : []));
|
|
343
|
+
.length, ...(ngDevMode ? [{ debugName: "uploadedCount" }] : /* istanbul ignore next */ []));
|
|
344
|
+
pendingCount = computed(() => this.folderItems().filter((item) => item.enabled && !item.uploadedAsset && !item.uploading).length, ...(ngDevMode ? [{ debugName: "pendingCount" }] : /* istanbul ignore next */ []));
|
|
345
|
+
failedCount = computed(() => this.folderItems().filter((item) => item.enabled && !item.uploadedAsset && !!item.error).length, ...(ngDevMode ? [{ debugName: "failedCount" }] : /* istanbul ignore next */ []));
|
|
346
|
+
canCloseWithUploads = computed(() => this.uploadedCount() > 0 && this.pendingCount() === 0, ...(ngDevMode ? [{ debugName: "canCloseWithUploads" }] : /* istanbul ignore next */ []));
|
|
347
347
|
primaryActionLabel = computed(() => {
|
|
348
348
|
if (this.mode() === 'file') {
|
|
349
349
|
return this.translate('primary.attachFile');
|
|
@@ -351,7 +351,7 @@ class DocumentLibraryUploadDialog {
|
|
|
351
351
|
return this.canCloseWithUploads()
|
|
352
352
|
? this.translate('primary.attachUploadedFiles')
|
|
353
353
|
: this.translate('primary.uploadSelectedFiles');
|
|
354
|
-
}, ...(ngDevMode ? [{ debugName: "primaryActionLabel" }] : []));
|
|
354
|
+
}, ...(ngDevMode ? [{ debugName: "primaryActionLabel" }] : /* istanbul ignore next */ []));
|
|
355
355
|
submit() {
|
|
356
356
|
if (this.mode() === 'file') {
|
|
357
357
|
const documentGuid = this.uploadedFile()?.id?.trim() || this.uploadedFile()?.name?.trim();
|
|
@@ -600,10 +600,10 @@ class DocumentLibraryUploadDialog {
|
|
|
600
600
|
this.activeLanguage();
|
|
601
601
|
return this.transloco.translate(`document-library.modals.upload.${key}`, params);
|
|
602
602
|
}
|
|
603
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
604
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
603
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DocumentLibraryUploadDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
604
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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-lg 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-lg 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-lg 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", "inputId", "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", "multiple", "accept", "isDragging", "fileSizeLimit", "readonly", "context"], outputs: ["isDraggingChange", "onChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
|
|
605
605
|
}
|
|
606
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
606
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DocumentLibraryUploadDialog, decorators: [{
|
|
607
607
|
type: Component,
|
|
608
608
|
args: [{ selector: 'mt-document-library-upload-dialog', standalone: true, imports: [
|
|
609
609
|
CommonModule,
|
|
@@ -613,7 +613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
613
613
|
ToggleField,
|
|
614
614
|
UploadField,
|
|
615
615
|
TranslocoDirective,
|
|
616
|
-
], 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-
|
|
616
|
+
], 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-lg 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-lg 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-lg 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" }]
|
|
617
617
|
}], 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 }] }] } });
|
|
618
618
|
|
|
619
619
|
class DocumentLibrary {
|
|
@@ -622,39 +622,39 @@ class DocumentLibrary {
|
|
|
622
622
|
modalService = inject(ModalService);
|
|
623
623
|
toast = inject(ToastService);
|
|
624
624
|
transloco = inject(TranslocoService);
|
|
625
|
-
levelId = input.required(...(ngDevMode ? [{ debugName: "levelId" }] : []));
|
|
626
|
-
levelDataId = input(null, ...(ngDevMode ? [{ debugName: "levelDataId" }] : []));
|
|
627
|
-
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
628
|
-
description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
|
|
629
|
-
lang = input('en', ...(ngDevMode ? [{ debugName: "lang" }] : []));
|
|
630
|
-
requestContext = input(undefined, ...(ngDevMode ? [{ debugName: "requestContext" }] : []));
|
|
631
|
-
uploadEndPoint = input('uploader', ...(ngDevMode ? [{ debugName: "uploadEndPoint" }] : []));
|
|
632
|
-
emptyTitle = input('', ...(ngDevMode ? [{ debugName: "emptyTitle" }] : []));
|
|
633
|
-
emptyDescription = input('', ...(ngDevMode ? [{ debugName: "emptyDescription" }] : []));
|
|
625
|
+
levelId = input.required(...(ngDevMode ? [{ debugName: "levelId" }] : /* istanbul ignore next */ []));
|
|
626
|
+
levelDataId = input(null, ...(ngDevMode ? [{ debugName: "levelDataId" }] : /* istanbul ignore next */ []));
|
|
627
|
+
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
628
|
+
description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
629
|
+
lang = input('en', ...(ngDevMode ? [{ debugName: "lang" }] : /* istanbul ignore next */ []));
|
|
630
|
+
requestContext = input(undefined, ...(ngDevMode ? [{ debugName: "requestContext" }] : /* istanbul ignore next */ []));
|
|
631
|
+
uploadEndPoint = input('uploader', ...(ngDevMode ? [{ debugName: "uploadEndPoint" }] : /* istanbul ignore next */ []));
|
|
632
|
+
emptyTitle = input('', ...(ngDevMode ? [{ debugName: "emptyTitle" }] : /* istanbul ignore next */ []));
|
|
633
|
+
emptyDescription = input('', ...(ngDevMode ? [{ debugName: "emptyDescription" }] : /* istanbul ignore next */ []));
|
|
634
634
|
loaded = output();
|
|
635
635
|
errored = output();
|
|
636
636
|
selectionChanged = output();
|
|
637
637
|
actionExecuted = output();
|
|
638
|
-
nameCellTpl = viewChild('nameCellTpl', ...(ngDevMode ? [{ debugName: "nameCellTpl" }] : []));
|
|
639
|
-
updatedCellTpl = viewChild('updatedCellTpl', ...(ngDevMode ? [{ debugName: "updatedCellTpl" }] : []));
|
|
640
|
-
actionsCellTpl = viewChild('actionsCellTpl', ...(ngDevMode ? [{ debugName: "actionsCellTpl" }] : []));
|
|
641
|
-
addPopover = viewChild('addPopover', ...(ngDevMode ? [{ debugName: "addPopover" }] : []));
|
|
642
|
-
folderPopover = viewChild('folderPopover', ...(ngDevMode ? [{ debugName: "folderPopover" }] : []));
|
|
643
|
-
contextPopover = viewChild('contextPopover', ...(ngDevMode ? [{ debugName: "contextPopover" }] : []));
|
|
644
|
-
roots = signal([], ...(ngDevMode ? [{ debugName: "roots" }] : []));
|
|
645
|
-
folderRegistry = signal(new Map(), ...(ngDevMode ? [{ debugName: "folderRegistry" }] : []));
|
|
646
|
-
folderEntriesCache = signal(new Map(), ...(ngDevMode ? [{ debugName: "folderEntriesCache" }] : []));
|
|
647
|
-
expandedFolderKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedFolderKeys" }] : []));
|
|
648
|
-
busyKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "busyKeys" }] : []));
|
|
649
|
-
selectedFolderId = signal(null, ...(ngDevMode ? [{ debugName: "selectedFolderId" }] : []));
|
|
650
|
-
selectedEntry = signal(null, ...(ngDevMode ? [{ debugName: "selectedEntry" }] : []));
|
|
651
|
-
error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
652
|
-
contextMenuItems = signal([], ...(ngDevMode ? [{ debugName: "contextMenuItems" }] : []));
|
|
653
|
-
railSearch = signal('', ...(ngDevMode ? [{ debugName: "railSearch" }] : []));
|
|
638
|
+
nameCellTpl = viewChild('nameCellTpl', ...(ngDevMode ? [{ debugName: "nameCellTpl" }] : /* istanbul ignore next */ []));
|
|
639
|
+
updatedCellTpl = viewChild('updatedCellTpl', ...(ngDevMode ? [{ debugName: "updatedCellTpl" }] : /* istanbul ignore next */ []));
|
|
640
|
+
actionsCellTpl = viewChild('actionsCellTpl', ...(ngDevMode ? [{ debugName: "actionsCellTpl" }] : /* istanbul ignore next */ []));
|
|
641
|
+
addPopover = viewChild('addPopover', ...(ngDevMode ? [{ debugName: "addPopover" }] : /* istanbul ignore next */ []));
|
|
642
|
+
folderPopover = viewChild('folderPopover', ...(ngDevMode ? [{ debugName: "folderPopover" }] : /* istanbul ignore next */ []));
|
|
643
|
+
contextPopover = viewChild('contextPopover', ...(ngDevMode ? [{ debugName: "contextPopover" }] : /* istanbul ignore next */ []));
|
|
644
|
+
roots = signal([], ...(ngDevMode ? [{ debugName: "roots" }] : /* istanbul ignore next */ []));
|
|
645
|
+
folderRegistry = signal(new Map(), ...(ngDevMode ? [{ debugName: "folderRegistry" }] : /* istanbul ignore next */ []));
|
|
646
|
+
folderEntriesCache = signal(new Map(), ...(ngDevMode ? [{ debugName: "folderEntriesCache" }] : /* istanbul ignore next */ []));
|
|
647
|
+
expandedFolderKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedFolderKeys" }] : /* istanbul ignore next */ []));
|
|
648
|
+
busyKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "busyKeys" }] : /* istanbul ignore next */ []));
|
|
649
|
+
selectedFolderId = signal(null, ...(ngDevMode ? [{ debugName: "selectedFolderId" }] : /* istanbul ignore next */ []));
|
|
650
|
+
selectedEntry = signal(null, ...(ngDevMode ? [{ debugName: "selectedEntry" }] : /* istanbul ignore next */ []));
|
|
651
|
+
error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
652
|
+
contextMenuItems = signal([], ...(ngDevMode ? [{ debugName: "contextMenuItems" }] : /* istanbul ignore next */ []));
|
|
653
|
+
railSearch = signal('', ...(ngDevMode ? [{ debugName: "railSearch" }] : /* istanbul ignore next */ []));
|
|
654
654
|
activeLanguage = toSignal(this.transloco.langChanges$, {
|
|
655
655
|
initialValue: this.transloco.getActiveLang() || 'en',
|
|
656
656
|
});
|
|
657
|
-
canMutateLevelData = computed(() => this.levelDataId() != null, ...(ngDevMode ? [{ debugName: "canMutateLevelData" }] : []));
|
|
657
|
+
canMutateLevelData = computed(() => this.levelDataId() != null, ...(ngDevMode ? [{ debugName: "canMutateLevelData" }] : /* istanbul ignore next */ []));
|
|
658
658
|
uiLang = computed(() => {
|
|
659
659
|
const activeLang = this.activeLanguage();
|
|
660
660
|
return activeLang === 'ar'
|
|
@@ -662,16 +662,16 @@ class DocumentLibrary {
|
|
|
662
662
|
: activeLang === 'en'
|
|
663
663
|
? 'en'
|
|
664
664
|
: this.lang();
|
|
665
|
-
}, ...(ngDevMode ? [{ debugName: "uiLang" }] : []));
|
|
666
|
-
resolvedTitle = computed(() => this.title().trim() || this.translate('title'), ...(ngDevMode ? [{ debugName: "resolvedTitle" }] : []));
|
|
667
|
-
resolvedEmptyTitle = computed(() => this.emptyTitle().trim() || this.translate('empty.title'), ...(ngDevMode ? [{ debugName: "resolvedEmptyTitle" }] : []));
|
|
668
|
-
resolvedEmptyDescription = computed(() => this.emptyDescription().trim() || this.translate('empty.description'), ...(ngDevMode ? [{ debugName: "resolvedEmptyDescription" }] : []));
|
|
665
|
+
}, ...(ngDevMode ? [{ debugName: "uiLang" }] : /* istanbul ignore next */ []));
|
|
666
|
+
resolvedTitle = computed(() => this.title().trim() || this.translate('title'), ...(ngDevMode ? [{ debugName: "resolvedTitle" }] : /* istanbul ignore next */ []));
|
|
667
|
+
resolvedEmptyTitle = computed(() => this.emptyTitle().trim() || this.translate('empty.title'), ...(ngDevMode ? [{ debugName: "resolvedEmptyTitle" }] : /* istanbul ignore next */ []));
|
|
668
|
+
resolvedEmptyDescription = computed(() => this.emptyDescription().trim() || this.translate('empty.description'), ...(ngDevMode ? [{ debugName: "resolvedEmptyDescription" }] : /* istanbul ignore next */ []));
|
|
669
669
|
capabilities = computed(() => ({
|
|
670
670
|
canCreateRootFolders: true,
|
|
671
671
|
canUploadFiles: this.canMutateLevelData(),
|
|
672
672
|
canDownloadFiles: true,
|
|
673
673
|
canDeleteFiles: this.canMutateLevelData(),
|
|
674
|
-
}), ...(ngDevMode ? [{ debugName: "capabilities" }] : []));
|
|
674
|
+
}), ...(ngDevMode ? [{ debugName: "capabilities" }] : /* istanbul ignore next */ []));
|
|
675
675
|
columns = computed(() => {
|
|
676
676
|
const nameCellTpl = this.nameCellTpl();
|
|
677
677
|
const updatedCellTpl = this.updatedCellTpl();
|
|
@@ -707,21 +707,21 @@ class DocumentLibrary {
|
|
|
707
707
|
customCellTpl: actionsCellTpl,
|
|
708
708
|
},
|
|
709
709
|
];
|
|
710
|
-
}, ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
710
|
+
}, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
711
711
|
selectedFolder = computed(() => {
|
|
712
712
|
const folderId = this.selectedFolderId();
|
|
713
713
|
if (folderId == null) {
|
|
714
714
|
return null;
|
|
715
715
|
}
|
|
716
716
|
return this.folderRegistry().get(this.toFolderKey(folderId)) ?? null;
|
|
717
|
-
}, ...(ngDevMode ? [{ debugName: "selectedFolder" }] : []));
|
|
717
|
+
}, ...(ngDevMode ? [{ debugName: "selectedFolder" }] : /* istanbul ignore next */ []));
|
|
718
718
|
currentEntries = computed(() => {
|
|
719
719
|
const folderId = this.selectedFolderId();
|
|
720
720
|
if (folderId == null) {
|
|
721
721
|
return this.roots().map((folder) => toDocumentLibraryFolderEntry(folder));
|
|
722
722
|
}
|
|
723
723
|
return this.folderEntriesCache().get(this.toFolderKey(folderId)) ?? [];
|
|
724
|
-
}, ...(ngDevMode ? [{ debugName: "currentEntries" }] : []));
|
|
724
|
+
}, ...(ngDevMode ? [{ debugName: "currentEntries" }] : /* istanbul ignore next */ []));
|
|
725
725
|
tableRows = computed(() => this.currentEntries().map((entry) => ({
|
|
726
726
|
id: this.getEntryKey(entry),
|
|
727
727
|
entry,
|
|
@@ -729,7 +729,7 @@ class DocumentLibrary {
|
|
|
729
729
|
owner: this.getEntryOwner(entry),
|
|
730
730
|
size: entry.isFolder ? '-' : this.formatFileSize(entry.size),
|
|
731
731
|
updatedAt: this.getEntryUpdatedAt(entry),
|
|
732
|
-
})), ...(ngDevMode ? [{ debugName: "tableRows" }] : []));
|
|
732
|
+
})), ...(ngDevMode ? [{ debugName: "tableRows" }] : /* istanbul ignore next */ []));
|
|
733
733
|
breadcrumbs = computed(() => {
|
|
734
734
|
const items = [
|
|
735
735
|
{
|
|
@@ -745,13 +745,13 @@ class DocumentLibrary {
|
|
|
745
745
|
});
|
|
746
746
|
});
|
|
747
747
|
return items;
|
|
748
|
-
}, ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
|
|
748
|
+
}, ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : /* istanbul ignore next */ []));
|
|
749
749
|
currentFolderTitle = computed(() => {
|
|
750
750
|
const selectedFolder = this.selectedFolder();
|
|
751
751
|
return selectedFolder
|
|
752
752
|
? this.getFolderLabel(selectedFolder)
|
|
753
753
|
: this.resolvedTitle();
|
|
754
|
-
}, ...(ngDevMode ? [{ debugName: "currentFolderTitle" }] : []));
|
|
754
|
+
}, ...(ngDevMode ? [{ debugName: "currentFolderTitle" }] : /* istanbul ignore next */ []));
|
|
755
755
|
currentFolderSubtitle = computed(() => {
|
|
756
756
|
const selectedFolder = this.selectedFolder();
|
|
757
757
|
if (!selectedFolder) {
|
|
@@ -766,19 +766,19 @@ class DocumentLibrary {
|
|
|
766
766
|
folderCount,
|
|
767
767
|
fileCount,
|
|
768
768
|
});
|
|
769
|
-
}, ...(ngDevMode ? [{ debugName: "currentFolderSubtitle" }] : []));
|
|
769
|
+
}, ...(ngDevMode ? [{ debugName: "currentFolderSubtitle" }] : /* istanbul ignore next */ []));
|
|
770
770
|
rootSummary = computed(() => {
|
|
771
771
|
return this.translate('summary.rootFolders', {
|
|
772
772
|
count: this.roots().length,
|
|
773
773
|
});
|
|
774
|
-
}, ...(ngDevMode ? [{ debugName: "rootSummary" }] : []));
|
|
774
|
+
}, ...(ngDevMode ? [{ debugName: "rootSummary" }] : /* istanbul ignore next */ []));
|
|
775
775
|
visibleRoots = computed(() => {
|
|
776
776
|
const query = this.railSearch().trim().toLowerCase();
|
|
777
777
|
if (!query) {
|
|
778
778
|
return this.roots();
|
|
779
779
|
}
|
|
780
780
|
return this.roots().filter((folder) => this.getFolderLabel(folder).toLowerCase().includes(query));
|
|
781
|
-
}, ...(ngDevMode ? [{ debugName: "visibleRoots" }] : []));
|
|
781
|
+
}, ...(ngDevMode ? [{ debugName: "visibleRoots" }] : /* istanbul ignore next */ []));
|
|
782
782
|
addMenuItems = computed(() => [
|
|
783
783
|
{
|
|
784
784
|
label: this.translate('actions.newFolder'),
|
|
@@ -798,11 +798,11 @@ class DocumentLibrary {
|
|
|
798
798
|
command: () => this.openUploadDialog('folder'),
|
|
799
799
|
visible: this.canUploadIntoCurrentFolder(),
|
|
800
800
|
},
|
|
801
|
-
], ...(ngDevMode ? [{ debugName: "addMenuItems" }] : []));
|
|
801
|
+
], ...(ngDevMode ? [{ debugName: "addMenuItems" }] : /* istanbul ignore next */ []));
|
|
802
802
|
currentFolderMenuItems = computed(() => {
|
|
803
803
|
const folder = this.selectedFolder();
|
|
804
804
|
return folder ? this.getFolderMenuItems(folder) : [];
|
|
805
|
-
}, ...(ngDevMode ? [{ debugName: "currentFolderMenuItems" }] : []));
|
|
805
|
+
}, ...(ngDevMode ? [{ debugName: "currentFolderMenuItems" }] : /* istanbul ignore next */ []));
|
|
806
806
|
constructor() {
|
|
807
807
|
effect(() => {
|
|
808
808
|
this.levelId();
|
|
@@ -1829,10 +1829,10 @@ class DocumentLibrary {
|
|
|
1829
1829
|
popover.hide();
|
|
1830
1830
|
setTimeout(() => popover.show(event), 0);
|
|
1831
1831
|
}
|
|
1832
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1833
|
-
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) +\r\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\r\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() ||\r\n 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 (\r\n item of getVisibleActionItems(items);\r\n track trackActionItem(item, $index)\r\n ) {\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", "lazyLocalSearch", "showFilters", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "actionShape", "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" }] });
|
|
1832
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DocumentLibrary, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1833
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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) +\r\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-lg 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 storageKey=\"document-library-entries-table\"\r\n [loading]=\"\r\n selectedFolderId() === null\r\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() ||\r\n 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-lg 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-lg 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-lg 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-lg 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-lg 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-lg 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 (\r\n item of getVisibleActionItems(items);\r\n track trackActionItem(item, $index)\r\n ) {\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", "lazyLocalSearch", "showFilters", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "exportFilename", "actionShape", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "rowsPerPageOptions", "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" }] });
|
|
1834
1834
|
}
|
|
1835
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1835
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DocumentLibrary, decorators: [{
|
|
1836
1836
|
type: Component,
|
|
1837
1837
|
args: [{ selector: 'mt-document-library', standalone: true, host: {
|
|
1838
1838
|
class: 'block',
|
|
@@ -1849,7 +1849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1849
1849
|
Table,
|
|
1850
1850
|
TextField,
|
|
1851
1851
|
TranslocoDirective,
|
|
1852
|
-
], 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) +\r\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\r\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() ||\r\n 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 (\r\n item of getVisibleActionItems(items);\r\n track trackActionItem(item, $index)\r\n ) {\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" }]
|
|
1852
|
+
], 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) +\r\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-lg 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 storageKey=\"document-library-entries-table\"\r\n [loading]=\"\r\n selectedFolderId() === null\r\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() ||\r\n 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-lg 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-lg 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-lg 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-lg 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-lg 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-lg 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 (\r\n item of getVisibleActionItems(items);\r\n track trackActionItem(item, $index)\r\n ) {\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" }]
|
|
1853
1853
|
}], 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 }] }] } });
|
|
1854
1854
|
|
|
1855
1855
|
function isDocumentLibraryFolderEntry(entry) {
|