@flusys/ng-storage 1.1.0 → 1.2.0-rc.1

package/fesm2022/flusys-ng-storage.mjs

@@ -1,14 +1,166 @@
 import * as i0 from '@angular/core';
-import { inject, signal, computed, Directive, Injectable, ChangeDetectionStrategy, Component } from '@angular/core';
-import { Router, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
+import { inject, signal, computed, Directive, DestroyRef, Injectable, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router, RouterOutlet } from '@angular/router';
 import { APP_CONFIG, DEFAULT_APP_NAME, BaseApiService, getDefaultStorageConfigId } from '@flusys/ng-core';
 import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
-import { BaseListPage, ApiResourceService, PROFILE_UPLOAD_PROVIDER, permissionGuard, FILE_PERMISSIONS, FOLDER_PERMISSIONS, STORAGE_CONFIG_PERMISSIONS, PermissionValidatorService } from '@flusys/ng-shared';
-import { MessageService } from 'primeng/api';
-import { map } from 'rxjs/operators';
-import { firstValueFrom, switchMap } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
-import { CommonModule } from '@angular/common';
+import { TranslateService, ApiResourceService, FILE_PROVIDER, permissionGuard, FILE_PERMISSIONS, FOLDER_PERMISSIONS, STORAGE_CONFIG_PERMISSIONS, resolveTranslationModule, SHARED_MESSAGES, PermissionValidatorService, RouterTabsComponent, TranslatePipe } from '@flusys/ng-shared';
+import { MessageService, ConfirmationService } from '@flusys/ng-ui';
+import { from, switchMap, map } from 'rxjs';
+
+const STORAGE_MESSAGES = {
+    // File entity CRUD (API keys)
+    'file.create.success': 'File created successfully',
+    'file.create.many.success': '{{count}} files created successfully',
+    'file.get.success': 'File retrieved successfully',
+    'file.get.by.ids.success': 'Files retrieved successfully by Ids',
+    'file.get.by.filter.success': 'Files retrieved successfully by filter',
+    'file.get.all.success': 'Files retrieved successfully',
+    'file.update.success': 'File updated successfully',
+    'file.update.many.success': '{{count}} files updated successfully',
+    'file.delete.success': 'File deleted successfully',
+    'file.restore.success': 'File restored successfully',
+    'file.not.found': 'File not found',
+    // Folder entity CRUD (API keys)
+    'folder.create.success': 'Folder created successfully',
+    'folder.create.many.success': '{{count}} folders created successfully',
+    'folder.get.success': 'Folder retrieved successfully',
+    'folder.get.by.ids.success': 'Folders retrieved successfully by Ids',
+    'folder.get.by.filter.success': 'Folders retrieved successfully by filter',
+    'folder.get.all.success': 'Folders retrieved successfully',
+    'folder.update.success': 'Folder updated successfully',
+    'folder.update.many.success': '{{count}} folders updated successfully',
+    'folder.delete.success': 'Folder deleted successfully',
+    'folder.restore.success': 'Folder restored successfully',
+    'folder.not.found': 'Folder not found',
+    // Storage config CRUD (API keys)
+    'storage.config.create.success': 'Storage configuration created successfully',
+    'storage.config.create.many.success': '{{count}} storage configurations created successfully',
+    'storage.config.get.success': 'Storage configuration retrieved successfully',
+    'storage.config.get.by.ids.success': 'Storage configurations retrieved successfully by Ids',
+    'storage.config.get.by.filter.success': 'Storage configurations retrieved successfully by filter',
+    'storage.config.get.all.success': 'Storage configurations retrieved successfully',
+    'storage.config.update.success': 'Storage configuration updated successfully',
+    'storage.config.update.many.success': '{{count}} storage configurations updated successfully',
+    'storage.config.delete.success': 'Storage configuration deleted successfully',
+    'storage.config.restore.success': 'Storage configuration restored successfully',
+    // Upload (API keys)
+    'upload.success': 'File uploaded successfully',
+    'upload.many.success': 'Files uploaded successfully',
+    'upload.file.too.large': 'File size ({{fileSize}}MB) exceeds maximum {{maxSize}}MB',
+    'upload.invalid.type': 'File type "{{mimeType}}" not allowed. Allowed: {{allowedTypes}}',
+    'upload.no.files.provided': 'No files provided',
+    'upload.no.file.path': 'File path is required',
+    'upload.invalid.file.path': 'Invalid file path',
+    'upload.config.not.found': 'Upload configuration not found',
+    // pages/storage-container/storage-container.component.ts
+    'storage.title': 'Storage',
+    'storage.subtitle': 'Manage files, folders, and storage configurations',
+    'storage.file.title': 'Files',
+    'storage.folder.title': 'Folder Setup',
+    'storage.config.title': 'Storage Configurations',
+    // pages/storage-config/storage-config-list.component.ts
+    'storage.button.new.configuration': 'New Configuration',
+    'storage.table.provider': 'Provider',
+    'storage.table.created': 'Created',
+    'storage.empty.configs.in.company': 'No storage configurations found in current company',
+    'storage.empty.configs': 'No storage configurations found',
+    'storage.config.load.failed': 'Failed to load storage configurations',
+    'storage.config.delete.title': 'Delete Configuration',
+    // pages/storage-config/storage-config-form.component.ts
+    'storage.config.edit.config': 'Edit Storage Configuration',
+    'storage.config.new.config': 'New Configuration',
+    'storage.config.config.name.required': 'Configuration Name *',
+    'storage.config.config.name.placeholder': 'e.g., Production AWS S3',
+    'storage.config.provider.required': 'Storage Provider *',
+    'storage.set.as.default': 'Set as Default',
+    'storage.aws.title': 'AWS S3 Configuration',
+    'storage.config.region.required': 'AWS Region *',
+    'storage.aws.region.placeholder': 'us-east-1',
+    'storage.config.bucket.required': 'Bucket Name *',
+    'storage.aws.bucket.placeholder': 'my-bucket',
+    'storage.config.access.key.required': 'Access Key ID *',
+    'storage.config.secret.key.required': 'Secret Access Key *',
+    'storage.config.endpoint.optional': 'Custom Endpoint (Optional)',
+    'storage.config.endpoint.placeholder': 'https://s3.custom-endpoint.com',
+    'storage.azure.title': 'Azure Blob Configuration',
+    'storage.azure.account.name.required': 'Account Name *',
+    'storage.azure.container.name.required': 'Container Name *',
+    'storage.azure.account.key.required': 'Account Key *',
+    'storage.sftp.title': 'SFTP Configuration',
+    'storage.sftp.host.required': 'Host *',
+    'storage.sftp.host.placeholder': 'sftp.example.com',
+    'storage.sftp.port.required': 'Port *',
+    'storage.sftp.port.placeholder': '22',
+    'storage.sftp.username.required': 'Username *',
+    'storage.sftp.password.required': 'Password *',
+    'storage.sftp.base.path.required': 'Base Path *',
+    'storage.sftp.base.path.placeholder': '/uploads',
+    'storage.local.title': 'Local Storage Configuration',
+    'storage.local.base.path.required': 'Base Path *',
+    'storage.local.base.path.placeholder': '/var/www/uploads',
+    'storage.config.endpoint': 'Endpoint URL',
+    'storage.validation.config.name.required': 'Configuration name is required',
+    // pages/file-manager/file-manager-list.component.ts
+    'storage.file.manager.title': 'File Manager',
+    'storage.button.upload.file': 'Upload File',
+    'storage.table.size': 'Size',
+    'storage.table.location': 'Location',
+    'storage.table.config': 'Config',
+    'storage.table.private': 'Private',
+    'storage.private': 'Private',
+    'storage.public': 'Public',
+    'storage.tooltip.trash': 'Trash',
+    'storage.empty.files.in.company': 'No files found in current company',
+    'storage.empty.files': 'No files found',
+    'storage.file.url.not.available': 'File URL is not available',
+    'storage.delete.move.to.trash.confirm': 'Move "{{name}}" to trash? You can recover it later.',
+    'storage.delete.move.to.trash': 'Move to Trash',
+    'storage.delete.permanent.delete.confirm': 'Permanently delete "{{name}}"? This action CANNOT be undone and will delete the file from storage.',
+    'storage.delete.permanent.delete': 'Permanent Delete',
+    'storage.delete.permanent.delete.button': 'Delete Permanently',
+    // pages/file-manager/file-manager-form.component.ts
+    'storage.file.manager.edit.file': 'Edit File',
+    'storage.file.manager.upload.file': 'Upload File',
+    'storage.config.select.config': 'Select storage configuration...',
+    'storage.config.no.configs': 'No storage configurations found. Please create one first.',
+    'storage.folder.optional': 'Folder (Optional)',
+    'storage.folder.no.folder': 'No folder (root level)',
+    'storage.folder.no.folders.available': 'No folders available. File will be uploaded to root level.',
+    'storage.folder.no.folders.edit': 'No folders available.',
+    'storage.file.select.required': 'Select File *',
+    'storage.button.choose.file': 'Choose File',
+    'storage.upload.drag.drop': 'Drag and drop file here or click to browse',
+    'storage.upload.max.size': 'Maximum file size: {{size}}',
+    'storage.upload.please.select': 'Please select a file to upload',
+    'storage.file.name.required': 'File Name *',
+    'storage.file.placeholder.edit': 'Enter file name',
+    'storage.file.placeholder': 'Will be auto-filled from selected file',
+    'storage.file.private': 'Private File',
+    'storage.file.private.hint': 'Only users with permission can access',
+    'storage.file.public.hint': 'File is publicly accessible',
+    'storage.validation.file.name.required': 'File name is required',
+    'storage.error.no.file': 'Please select a file',
+    'storage.error.no.config': 'Please select a storage configuration',
+    'storage.upload.failed': 'Failed to upload file',
+    // pages/folder/folder-list.component.ts
+    'storage.button.new.folder': 'New Folder',
+    'storage.table.slug': 'Slug',
+    'storage.empty.folders.in.company': 'No folders found in current company',
+    'storage.empty.folders': 'No folders found',
+    'storage.folder.delete.title': 'Delete Folder',
+    // pages/folder/folder-form.component.ts
+    'storage.folder.edit.folder': 'Edit Folder',
+    'storage.folder.new.folder': 'New Folder',
+    'storage.folder.name.required': 'Folder Name *',
+    'storage.folder.name.placeholder': 'Enter folder name',
+    'storage.validation.folder.name.required': 'Folder name is required',
+    // utils/base-storage-page.ts
+    'storage.delete.this.item': 'this item',
+    // utils/storage-utils.ts
+    'storage.size.bytes': 'Bytes',
+    'storage.size.gb': 'GB',
+};
 
 /**
  * File Location Enum
@@ -33,47 +185,56 @@ var ImageFormat;
     ImageFormat["WEBP"] = "webp";
 })(ImageFormat || (ImageFormat = {}));
 
+/**
+ * Provider label translation keys
+ */
+const PROVIDER_LABEL_KEYS = {
+    [FileLocationEnum.LOCAL]: 'storage.local.title',
+    [FileLocationEnum.AWS]: 'storage.aws.title',
+    [FileLocationEnum.AZURE]: 'storage.azure.title',
+    [FileLocationEnum.SFTP]: 'storage.sftp.title',
+};
 /**
  * Provider configurations for all storage types
  */
 const PROVIDER_CONFIGS = {
     [FileLocationEnum.LOCAL]: {
-        label: 'Local',
-        icon: 'pi pi-folder',
+        labelKey: 'storage.local.title',
+        icon: 'folder',
         severity: 'secondary',
     },
     [FileLocationEnum.AWS]: {
-        label: 'AWS S3',
-        icon: 'pi pi-cloud',
+        labelKey: 'storage.aws.title',
+        icon: 'cloud',
         severity: 'warn',
     },
     [FileLocationEnum.AZURE]: {
-        label: 'Azure Blob',
-        icon: 'pi pi-cloud',
+        labelKey: 'storage.azure.title',
+        icon: 'cloud',
         severity: 'info',
     },
     [FileLocationEnum.SFTP]: {
-        label: 'SFTP',
-        icon: 'pi pi-server',
+        labelKey: 'storage.sftp.title',
+        icon: 'server',
         severity: 'contrast',
     },
 };
 /**
- * Get provider label for display
+ * Get provider label translation key
  */
-function getProviderLabel(storage) {
+function getProviderLabelKey(storage) {
     const enumValue = storage;
-    return PROVIDER_CONFIGS[enumValue]?.label ?? storage;
+    return PROVIDER_CONFIGS[enumValue]?.labelKey ?? storage;
 }
 /**
  * Get provider icon class
  */
 function getProviderIcon(storage) {
     const enumValue = storage;
-    return PROVIDER_CONFIGS[enumValue]?.icon ?? 'pi pi-database';
+    return PROVIDER_CONFIGS[enumValue]?.icon ?? 'database';
 }
 /**
- * Get provider severity for p-tag
+ * Get provider severity for f-tag
  */
 function getProviderSeverity(storage) {
     const enumValue = storage;
@@ -84,38 +245,62 @@ function getProviderSeverity(storage) {
  */
 function getFileIcon(contentType) {
     if (contentType.startsWith('image/'))
-        return 'pi pi-image';
+        return 'image';
     if (contentType.startsWith('video/'))
-        return 'pi pi-video';
+        return 'video';
     if (contentType.startsWith('audio/'))
-        return 'pi pi-volume-up';
+        return 'volume-up';
     if (contentType.includes('pdf'))
-        return 'pi pi-file-pdf';
+        return 'file-pdf';
     if (contentType.includes('word') || contentType.includes('document'))
-        return 'pi pi-file-word';
+        return 'file-word';
     if (contentType.includes('excel') || contentType.includes('spreadsheet'))
-        return 'pi pi-file-excel';
-    return 'pi pi-file';
+        return 'file-excel';
+    return 'file';
 }
+/** File size unit keys for translation */
+const FILE_SIZE_UNIT_KEYS = [
+    'storage.size.bytes',
+    'shared.size.kb',
+    'shared.size.mb',
+    'storage.size.gb',
+];
 /**
- * Format file size from bytes to human readable string
+ * Format file size from bytes to human readable format
+ * Returns an object with value and unitKey for translation
  */
-function formatFileSize(bytes) {
+function formatFileSizeWithKey(bytes) {
     if (bytes <= 0)
-        return '0 Bytes';
+        return { value: '0', unitKey: 'storage.size.bytes' };
     const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1);
-    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), FILE_SIZE_UNIT_KEYS.length - 1);
+    const value = (Math.round((bytes / Math.pow(k, i)) * 100) / 100).toString();
+    return { value, unitKey: FILE_SIZE_UNIT_KEYS[i] };
+}
+/**
+ * Format file size from bytes to human readable string
+ * @deprecated Use formatFileSizeWithKey for localization support
+ */
+function formatFileSize(bytes) {
+    const { value, unitKey } = formatFileSizeWithKey(bytes);
+    // Fallback to non-translated units for backward compatibility
+    const unitMap = {
+        'storage.size.bytes': 'Bytes',
+        'shared.size.kb': 'KB',
+        'shared.size.mb': 'MB',
+        'storage.size.gb': 'GB',
+    };
+    return `${value} ${unitMap[unitKey]}`;
 }
 /**
  * Storage provider options for dropdown selects
+ * Labels are translation keys - components should translate them
  */
-const STORAGE_PROVIDERS = [
-    { label: 'AWS S3', value: FileLocationEnum.AWS },
-    { label: 'Azure Blob Storage', value: FileLocationEnum.AZURE },
-    { label: 'SFTP', value: FileLocationEnum.SFTP },
-    { label: 'Local Storage', value: FileLocationEnum.LOCAL },
+const STORAGE_PROVIDER_OPTIONS = [
+    { labelKey: 'storage.aws.title', value: FileLocationEnum.AWS },
+    { labelKey: 'storage.azure.title', value: FileLocationEnum.AZURE },
+    { labelKey: 'storage.sftp.title', value: FileLocationEnum.SFTP },
+    { labelKey: 'storage.local.title', value: FileLocationEnum.LOCAL },
 ];
 
 class BaseStoragePage {
@@ -123,43 +308,151 @@ class BaseStoragePage {
     messageService = inject(MessageService);
     appConfig = inject(APP_CONFIG);
     companyContext = inject(LAYOUT_AUTH_STATE);
-    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    showCompanyInfo = computed(() => this.appConfig.enableCompanyFeature, ...(ngDevMode ? [{ debugName: "showCompanyInfo" }] : []));
-    currentCompanyName = computed(() => this.companyContext.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME, ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
-    showSuccess(detail, summary = 'Success') {
+    translateAdapter = inject(TranslateService);
+    isLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    showCompanyInfo = computed(() => this.appConfig.enableCompanyFeature, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCompanyInfo" }] : /* istanbul ignore next */ []));
+    currentCompanyName = computed(() => this.companyContext.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : /* istanbul ignore next */ []));
+    showSuccess(detail, summaryKey = 'shared.success') {
+        const summary = this.translateAdapter.translate(summaryKey);
         this.messageService.add({ severity: 'success', summary, detail });
     }
-    showError(detail, summary = 'Error') {
+    showError(detail, summaryKey = 'shared.error') {
+        const summary = this.translateAdapter.translate(summaryKey);
         this.messageService.add({ severity: 'error', summary, detail });
     }
     navigateTo(path) {
         this.router.navigate(path);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseStoragePage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: BaseStoragePage, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseStoragePage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: BaseStoragePage, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseStoragePage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseStoragePage, decorators: [{
             type: Directive
         }] });
-class BaseStorageListPage extends BaseListPage {
+class BaseStorageListPage {
+    router = inject(Router);
+    messageService = inject(MessageService);
+    appConfig = inject(APP_CONFIG);
+    confirmationService = inject(ConfirmationService);
+    destroyRef = inject(DestroyRef);
+    translateAdapter = inject(TranslateService);
     companyContext = inject(LAYOUT_AUTH_STATE);
-    pageSize = signal(50, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    items = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    isLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    total = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    pageSize = signal(50, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    first = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []));
+    currentPage = computed(() => Math.floor(this.first() / this.pageSize()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    showCompanyInfo = computed(() => this.appConfig.enableCompanyFeature, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCompanyInfo" }] : /* istanbul ignore next */ []));
     totalRecords = this.total;
-    currentCompanyName = computed(() => this.companyContext.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME, ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
+    currentCompanyName = computed(() => this.companyContext.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : /* istanbul ignore next */ []));
     getDeleteConfirmMessage(item) {
-        const name = item.name ?? 'this item';
-        return `Are you sure you want to delete "${name}"?`;
+        const itemName = item.name;
+        const name = itemName ?? this.translateAdapter.translate('storage.delete.this.item');
+        return this.translateAdapter.translate('shared.confirm.delete.item', { name });
+    }
+    onCreate() {
+        this.router.navigate([this.getResourceRoute(), 'new']);
+    }
+    onEdit(id) {
+        this.router.navigate([this.getResourceRoute(), id]);
+    }
+    onPageChange(event) {
+        this.first.set(event.first ?? 0);
+        this.pageSize.set(event.rows ?? 10);
+        this.loadData();
+    }
+    getPaginationParams() {
+        return { currentPage: this.currentPage(), pageSize: this.pageSize() };
+    }
+    showSuccess(detail, summary) {
+        this.messageService.add({
+            severity: 'success',
+            summary: summary ?? this.t('shared.success'),
+            detail,
+        });
+    }
+    showError(detail, summary) {
+        this.messageService.add({
+            severity: 'error',
+            summary: summary ?? this.t('shared.error'),
+            detail,
+        });
+    }
+    showInfo(detail, summary) {
+        this.messageService.add({
+            severity: 'info',
+            summary: summary ?? this.t('shared.info'),
+            detail,
+        });
+    }
+    showWarn(detail, summary) {
+        this.messageService.add({
+            severity: 'warn',
+            summary: summary ?? this.t('shared.warning'),
+            detail,
+        });
+    }
+    onDelete(item, idGetter, deleteApiCall, options) {
+        this.confirmationService.confirm({
+            message: this.getDeleteConfirmMessage(item),
+            header: options?.header ?? this.t('shared.confirm.delete.header'),
+            icon: 'exclamation-triangle',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: () => {
+                from(deleteApiCall(idGetter(item)))
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe({
+                    next: (res) => {
+                        const r = res;
+                        this.showSuccess(r?.messageKey ? this.t(r.messageKey, r.messageVariables) : (r?.message ?? ''));
+                        this.loadData();
+                    },
+                });
+            },
+        });
+    }
+    async onDeleteAsync(item, idGetter, deleteApiCall, options) {
+        this.confirmationService.confirm({
+            message: this.getDeleteConfirmMessage(item),
+            header: options?.header ?? this.t('shared.confirm.delete.header'),
+            icon: 'exclamation-triangle',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: async () => {
+                const res = await deleteApiCall(idGetter(item));
+                const r = res;
+                this.showSuccess(r?.messageKey ? this.t(r.messageKey, r.messageVariables) : (r?.message ?? ''));
+                await this.loadData();
+            },
+        });
+    }
+    navigateTo(path) {
+        this.router.navigate(path);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseStorageListPage, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: BaseStorageListPage, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    t(key, variables) {
+        return this.translateAdapter?.translate(key, variables) ?? key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseStorageListPage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: BaseStorageListPage, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseStorageListPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseStorageListPage, decorators: [{
             type: Directive
         }] });
 
 class FileManagerApiService extends ApiResourceService {
     constructor() {
-        super('file-manager', inject(HttpClient), 'storage');
+        super('file-manager', 'storage');
     }
     getFiles(fileIds) {
         const requests = fileIds.map((id) => ({ id }));
@@ -168,17 +461,59 @@ class FileManagerApiService extends ApiResourceService {
     createFile(dto) {
         return this.http.post(`${this.baseUrl}/insert`, dto);
     }
-    async createFileAsync(dto) {
-        return firstValueFrom(this.createFile(dto));
+    createFiles(dtos) {
+        return this.http.post(`${this.baseUrl}/insert-many`, dtos);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileManagerApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileManagerApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileManagerApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileManagerApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileManagerApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileManagerApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/**
+ * Folder API Service
+ * Handles folder CRUD operations
+ * Endpoint: POST /storage/folder/*
+ *
+ * Note: Company feature enabled - all queries automatically scoped to user's company
+ */
+class FolderApiService extends ApiResourceService {
+    constructor() {
+        super('folder', 'storage');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FolderApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FolderApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FolderApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Storage Config API Service
+ * Handles storage configuration CRUD operations
+ * Endpoint: POST /storage/storage-config/*
+ *
+ * Note: Company feature enabled - all queries automatically scoped to user's company
+ */
+class StorageConfigApiService extends ApiResourceService {
+    constructor() {
+        super('storage-config', 'storage');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StorageConfigApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StorageConfigApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StorageConfigApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
 /**
  * Upload Service - File upload/delete operations
  * Endpoint: POST /storage/upload/*
@@ -220,23 +555,40 @@ class UploadService extends BaseApiService {
     uploadAndRegister(file, options) {
         return this.uploadSingleFile(file, options).pipe(switchMap((response) => {
             if (!response.success || !response.data) {
-                throw new Error(response.message || 'Upload failed');
+                throw new Error(response.message || 'upload.failed');
+            }
+            return this.fileManagerApi.createFile(this.toCreateFileDto(response.data, options));
+        }));
+    }
+    /** Upload multiple files and register in file manager - batch upload (2 API calls total) */
+    uploadAndRegisterMultiple(files, options) {
+        return this.uploadMultipleFiles(files, options).pipe(switchMap((response) => {
+            if (!response.success || !response.data) {
+                throw new Error(response.message || 'upload.failed');
             }
-            return this.fileManagerApi.createFile({
-                name: response.data.name,
-                key: response.data.key,
-                size: String(response.data.size),
-                contentType: response.data.contentType,
-                isPrivate: options?.isPrivate ?? false,
-                folderId: options?.folderId,
-                storageConfigId: this.resolveConfigId(options?.storageConfigId),
-            });
+            const dtos = response.data.map((fileInfo) => this.toCreateFileDto(fileInfo, options));
+            return this.fileManagerApi.createFiles(dtos).pipe(map((bulkResponse) => ({
+                success: bulkResponse.success,
+                data: bulkResponse.data ?? [],
+                message: bulkResponse.message,
+            })));
         }));
     }
     // ─── Private Helpers ───────────────────────────────────────────────────────
     resolveConfigId(storageConfigId) {
         return storageConfigId ?? this.getDefaultConfigId();
     }
+    toCreateFileDto(fileInfo, options) {
+        return {
+            name: fileInfo.name,
+            key: fileInfo.key,
+            size: String(fileInfo.size),
+            contentType: fileInfo.contentType,
+            isPrivate: options?.isPrivate ?? false,
+            folderId: options?.folderId,
+            storageConfigId: this.resolveConfigId(options?.storageConfigId),
+        };
+    }
     buildUploadUrl(endpoint, options) {
         const params = this.buildQueryParams(options);
         const baseUrl = this.getUrl(`upload/${endpoint}`);
@@ -265,58 +617,80 @@ class UploadService extends BaseApiService {
         const configId = this.resolveConfigId(storageConfigId);
         return { ...data, ...(configId && { storageConfigId: configId }) };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UploadService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UploadService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UploadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UploadService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-/**
- * Profile Upload Provider Adapter
- *
- * Implements IProfileUploadProvider interface for ng-auth profile page.
- * Uses UploadService.uploadAndRegister() to upload files and register in file manager.
- *
- * @example
- * // In app.config.ts
- * providers: [
- *   ...provideStorageProviders(),
- * ]
- */
-class ProfileUploadProviderAdapter {
+class FileProviderAdapter {
+    fileManagerApi = inject(FileManagerApiService);
     uploadService = inject(UploadService);
-    /**
-     * Upload profile picture and register in file manager
-     * Returns file manager ID (UUID) for storing in user.profilePictureId
-     */
-    uploadProfilePicture(file, options) {
+    folderApi = inject(FolderApiService);
+    storageConfigApi = inject(StorageConfigApiService);
+    loadFiles(filter) {
+        const filterObj = this.buildFileFilter(filter);
+        return from(this.fileManagerApi
+            .getAll({ pagination: { currentPage: filter.page, pageSize: filter.pageSize }, filter: Object.keys(filterObj).length > 0 ? filterObj : undefined }, filter.search || ''))
+            .pipe(map((res) => ({ ...res, data: res.data?.map(this.mapToFileBasicInfo) })));
+    }
+    uploadFile(file, options) {
+        return this.uploadService
+            .uploadAndRegister(file, options)
+            .pipe(map((res) => ({ ...res, data: res.data ? this.mapToUploadedFile(res.data) : undefined })));
+    }
+    uploadMultipleFiles(files, options) {
         return this.uploadService
-            .uploadAndRegister(file, {
-            folderPath: options?.folderPath ?? 'profile-pictures',
-            compress: options?.compress ?? true,
-            maxWidth: options?.maxWidth ?? 400,
-            maxHeight: options?.maxHeight ?? 400,
-        })
-            .pipe(map((response) => ({
-            success: response.success,
-            message: response.message,
-            data: response.data
-                ? {
-                    id: response.data.id,
-                    name: response.data.name,
-                    key: response.data.key,
-                    size: parseFloat(response.data.size) * 1024, // Convert KB to bytes
-                    contentType: response.data.contentType,
-                }
-                : undefined,
+            .uploadAndRegisterMultiple(files, options)
+            .pipe(map((res) => ({ ...res, data: res.data?.map(this.mapToUploadedFile) })));
+    }
+    getFileUrls(fileIds) {
+        return this.fileManagerApi.getFiles(fileIds).pipe(map((res) => ({
+            ...res,
+            data: res.data?.map((f) => ({ id: f.id, name: f.name, contentType: f.contentType, size: '0', url: f.url })),
         })));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfileUploadProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfileUploadProviderAdapter });
+    loadFolders(filter) {
+        return from(this.folderApi
+            .getAll({ pagination: { currentPage: filter.page, pageSize: filter.pageSize } }, filter.search || ''))
+            .pipe(map((res) => ({ ...res, data: res.data?.map((f) => ({ id: f.id, name: f.name, slug: f.slug })) })));
+    }
+    loadStorageConfigs(filter) {
+        return from(this.storageConfigApi
+            .getAll({ pagination: { currentPage: filter.page, pageSize: filter.pageSize } }, filter.search || ''))
+            .pipe(map((res) => ({ ...res, data: res.data?.map((c) => ({ id: c.id, name: c.name, isDefault: c.isDefault })) })));
+    }
+    // ─── Private Helpers ────────────────────────────────────────────────────────
+    buildFileFilter(filter) {
+        const filterObj = {};
+        if (filter.folderId)
+            filterObj['folderId'] = filter.folderId;
+        if (filter.storageConfigId)
+            filterObj['storageConfigId'] = filter.storageConfigId;
+        if (filter.contentTypes?.length)
+            filterObj['contentType'] = filter.contentTypes.join(',');
+        return filterObj;
+    }
+    mapToFileBasicInfo = (f) => ({
+        id: f.id,
+        name: f.name,
+        contentType: f.contentType,
+        size: f.size,
+        url: f.url,
+    });
+    mapToUploadedFile = (f) => ({
+        id: f.id,
+        name: f.name,
+        key: f.key,
+        size: parseFloat(f.size) * 1024,
+        contentType: f.contentType,
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileProviderAdapter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfileUploadProviderAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileProviderAdapter, decorators: [{
             type: Injectable
         }] });
 
@@ -339,54 +713,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 function provideStorageProviders() {
     return [
         {
-            provide: PROFILE_UPLOAD_PROVIDER,
-            useClass: ProfileUploadProviderAdapter,
+            provide: FILE_PROVIDER,
+            useClass: FileProviderAdapter,
         },
     ];
 }
 
-/**
- * Folder API Service
- * Handles folder CRUD operations
- * Endpoint: POST /storage/folder/*
- *
- * Note: Company feature enabled - all queries automatically scoped to user's company
- */
-class FolderApiService extends ApiResourceService {
-    constructor() {
-        super('folder', inject(HttpClient), 'storage');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FolderApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FolderApiService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FolderApiService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-/**
- * Storage Config API Service
- * Handles storage configuration CRUD operations
- * Endpoint: POST /storage/storage-config/*
- *
- * Note: Company feature enabled - all queries automatically scoped to user's company
- */
-class StorageConfigApiService extends ApiResourceService {
-    constructor() {
-        super('storage-config', inject(HttpClient), 'storage');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: StorageConfigApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: StorageConfigApiService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: StorageConfigApiService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
 /**
  * Storage Module Routes
  * All routes protected by permission guards
@@ -394,6 +726,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 const STORAGE_ROUTES = [
     {
         path: '',
+        resolve: { translations: resolveTranslationModule({ modules: ['storage'], fallbackMessages: { ...STORAGE_MESSAGES, ...SHARED_MESSAGES } }) },
         loadComponent: () => Promise.resolve().then(function () { return storageContainer_component; }).then((m) => m.StorageContainerComponent),
         children: [
             // File Manager Routes
@@ -403,17 +736,17 @@ const STORAGE_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-storage-file-manager-list.component-0O_b4EjN.mjs').then((m) => m.FileManagerListComponent),
+                        loadComponent: () => import('./flusys-ng-storage-file-manager-list.component-nZDj1UfS.mjs').then((m) => m.FileManagerListComponent),
                     },
                     {
                         path: 'new',
                         canActivate: [permissionGuard(FILE_PERMISSIONS.CREATE)],
-                        loadComponent: () => import('./flusys-ng-storage-file-manager-form.component-CXVB9G-f.mjs').then((m) => m.FileManagerFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-file-manager-form.component-DhqZmpuX.mjs').then((m) => m.FileManagerFormComponent),
                     },
                     {
                         path: ':id',
                         canActivate: [permissionGuard(FILE_PERMISSIONS.UPDATE)],
-                        loadComponent: () => import('./flusys-ng-storage-file-manager-form.component-CXVB9G-f.mjs').then((m) => m.FileManagerFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-file-manager-form.component-DhqZmpuX.mjs').then((m) => m.FileManagerFormComponent),
                     },
                 ],
             },
@@ -424,17 +757,17 @@ const STORAGE_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-storage-folder-list.component-B8GoIh6Z.mjs').then((m) => m.FolderListComponent),
+                        loadComponent: () => import('./flusys-ng-storage-folder-list.component-fuJMWYWZ.mjs').then((m) => m.FolderListComponent),
                     },
                     {
                         path: 'new',
                         canActivate: [permissionGuard(FOLDER_PERMISSIONS.CREATE)],
-                        loadComponent: () => import('./flusys-ng-storage-folder-form.component-BTQGEqNu.mjs').then((m) => m.FolderFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-folder-form.component-Bru9NQyr.mjs').then((m) => m.FolderFormComponent),
                     },
                     {
                         path: ':id',
                         canActivate: [permissionGuard(FOLDER_PERMISSIONS.UPDATE)],
-                        loadComponent: () => import('./flusys-ng-storage-folder-form.component-BTQGEqNu.mjs').then((m) => m.FolderFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-folder-form.component-Bru9NQyr.mjs').then((m) => m.FolderFormComponent),
                     },
                 ],
             },
@@ -445,17 +778,17 @@ const STORAGE_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-storage-storage-config-list.component-YXzz3Tvo.mjs').then((m) => m.StorageConfigListComponent),
+                        loadComponent: () => import('./flusys-ng-storage-storage-config-list.component-D59X4sae.mjs').then((m) => m.StorageConfigListComponent),
                     },
                     {
                         path: 'new',
                         canActivate: [permissionGuard(STORAGE_CONFIG_PERMISSIONS.CREATE)],
-                        loadComponent: () => import('./flusys-ng-storage-storage-config-form.component-CorNWrmF.mjs').then((m) => m.StorageConfigFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-storage-config-form.component-Da-pWR7d.mjs').then((m) => m.StorageConfigFormComponent),
                     },
                     {
                         path: ':id',
                         canActivate: [permissionGuard(STORAGE_CONFIG_PERMISSIONS.UPDATE)],
-                        loadComponent: () => import('./flusys-ng-storage-storage-config-form.component-CorNWrmF.mjs').then((m) => m.StorageConfigFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-storage-config-form.component-Da-pWR7d.mjs').then((m) => m.StorageConfigFormComponent),
                     },
                 ],
             },
@@ -474,89 +807,73 @@ const STORAGE_ROUTES = [
  */
 class StorageContainerComponent {
     permissionValidator = inject(PermissionValidatorService);
+    translateService = inject(TranslateService);
     /** All available tabs with required permissions */
     allTabs = [
         {
             id: 'files',
-            label: 'Files',
-            icon: 'pi pi-file',
+            labelKey: 'storage.file.title',
+            icon: 'file',
             route: 'files',
             permission: FILE_PERMISSIONS.READ,
         },
         {
             id: 'folders',
-            label: 'Folders',
-            icon: 'pi pi-folder',
+            labelKey: 'storage.folder.title',
+            icon: 'folder',
             route: 'folders',
             permission: FOLDER_PERMISSIONS.READ,
         },
         {
             id: 'configs',
-            label: 'Configurations',
-            icon: 'pi pi-cog',
+            labelKey: 'storage.config.title',
+            icon: 'cog',
             route: 'configs',
             permission: STORAGE_CONFIG_PERMISSIONS.READ,
         },
     ];
     /** Visible tabs based on user permissions */
-    visibleTabs = computed(() => this.allTabs.filter((tab) => this.permissionValidator.hasPermission(tab.permission)), ...(ngDevMode ? [{ debugName: "visibleTabs" }] : []));
-    /** Dynamic subtitle based on visible tabs */
-    subtitle = computed(() => {
-        const tabs = this.visibleTabs();
-        if (tabs.length === 0)
-            return 'No permissions available';
-        return `Manage ${tabs.map((t) => t.label.toLowerCase()).join(', ')}`;
-    }, ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: StorageContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: StorageContainerComponent, isStandalone: true, selector: "lib-storage-container", ngImport: i0, template: `
+    visibleTabs = computed(() => this.allTabs
+        .filter((tab) => this.permissionValidator.hasPermission(tab.permission))
+        .map((tab) => ({
+        id: tab.id,
+        label: this.translateService.translate(tab.labelKey),
+        icon: tab.icon,
+        route: tab.route,
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleTabs" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StorageContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: StorageContainerComponent, isStandalone: true, selector: "lib-storage-container", ngImport: i0, template: `
     <div class="p-2 sm:p-4">
       <div class="mb-4">
-        <h1 class="text-xl sm:text-2xl font-bold m-0">Storage</h1>
-        <p class="text-muted-color mt-1 text-sm sm:text-base">{{ subtitle() }}</p>
+        <h1 class="text-xl sm:text-2xl font-bold m-0">{{ 'storage.title' | translate }}</h1>
+        <p class="text-muted-color mt-1 text-sm sm:text-base">{{ 'storage.subtitle' | translate }}</p>
       </div>
 
-      <div class="scrollbar-hide flex gap-1 mb-4 border-b border-surface overflow-x-auto flex-nowrap">
-        @for (tab of visibleTabs(); track tab.id) {
-          <a
-            [routerLink]="tab.route"
-            routerLinkActive="tab-active"
-            class="flex items-center gap-2 px-4 py-2 rounded-t-lg cursor-pointer transition-colors text-muted-color no-underline border-b-2 border-transparent -mb-px hover:bg-surface-hover [&.tab-active]:text-primary [&.tab-active]:border-primary [&.tab-active]:bg-surface-ground whitespace-nowrap shrink-0"
-          >
-            <i [class]="tab.icon"></i>
-            <span>{{ tab.label }}</span>
-          </a>
-        }
-      </div>
+      <lib-router-tabs [tabs]="visibleTabs()" class="mb-4" />
 
       <router-outlet />
     </div>
-  `, isInline: true, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: RouterTabsComponent, selector: "lib-router-tabs", inputs: ["tabs"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: StorageContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StorageContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-storage-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive], template: `
+            args: [{
+                    selector: 'lib-storage-container',
+                    imports: [RouterOutlet, TranslatePipe, RouterTabsComponent],
+                    template: `
     <div class="p-2 sm:p-4">
       <div class="mb-4">
-        <h1 class="text-xl sm:text-2xl font-bold m-0">Storage</h1>
-        <p class="text-muted-color mt-1 text-sm sm:text-base">{{ subtitle() }}</p>
+        <h1 class="text-xl sm:text-2xl font-bold m-0">{{ 'storage.title' | translate }}</h1>
+        <p class="text-muted-color mt-1 text-sm sm:text-base">{{ 'storage.subtitle' | translate }}</p>
       </div>
 
-      <div class="scrollbar-hide flex gap-1 mb-4 border-b border-surface overflow-x-auto flex-nowrap">
-        @for (tab of visibleTabs(); track tab.id) {
-          <a
-            [routerLink]="tab.route"
-            routerLinkActive="tab-active"
-            class="flex items-center gap-2 px-4 py-2 rounded-t-lg cursor-pointer transition-colors text-muted-color no-underline border-b-2 border-transparent -mb-px hover:bg-surface-hover [&.tab-active]:text-primary [&.tab-active]:border-primary [&.tab-active]:bg-surface-ground whitespace-nowrap shrink-0"
-          >
-            <i [class]="tab.icon"></i>
-            <span>{{ tab.label }}</span>
-          </a>
-        }
-      </div>
+      <lib-router-tabs [tabs]="visibleTabs()" class="mb-4" />
 
       <router-outlet />
     </div>
-  `, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"] }]
+  `,
+                }]
         }] });
 
 var storageContainer_component = /*#__PURE__*/Object.freeze({
@@ -567,11 +884,11 @@ var storageContainer_component = /*#__PURE__*/Object.freeze({
 // =============================================================================
 // @flusys/ng-storage - Storage Package
 // =============================================================================
-// Enums
+// Constants
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BaseStorageListPage, BaseStoragePage, FileLocationEnum, FileManagerApiService, FolderApiService, ImageFormat, ProfileUploadProviderAdapter, STORAGE_PROVIDERS, STORAGE_ROUTES, StorageConfigApiService, StorageContainerComponent, UploadService, formatFileSize, getFileIcon, getProviderIcon, getProviderLabel, getProviderSeverity, provideStorageProviders };
+export { BaseStorageListPage, BaseStoragePage, FILE_SIZE_UNIT_KEYS, FileLocationEnum, FileManagerApiService, FileProviderAdapter, FolderApiService, ImageFormat, PROVIDER_LABEL_KEYS, STORAGE_MESSAGES, STORAGE_PROVIDER_OPTIONS, STORAGE_ROUTES, StorageConfigApiService, StorageContainerComponent, UploadService, formatFileSize, formatFileSizeWithKey, getFileIcon, getProviderIcon, getProviderLabelKey, getProviderSeverity, provideStorageProviders };
 //# sourceMappingURL=flusys-ng-storage.mjs.map