@flusys/ng-storage 0.1.0-beta.3 → 1.0.0-rc

package/fesm2022/flusys-ng-storage.mjs

@@ -1,10 +1,14 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Component } from '@angular/core';
+import { inject, signal, computed, Directive, Injectable, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Router, RouterOutlet, RouterLink, RouterLinkActive } 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 } 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 { ApiResourceService } from '@flusys/ng-shared';
-import { BaseApiService } from '@flusys/ng-core';
 import { CommonModule } from '@angular/common';
-import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
 
 /**
  * File Location Enum
@@ -29,6 +33,166 @@ var ImageFormat;
     ImageFormat["WEBP"] = "webp";
 })(ImageFormat || (ImageFormat = {}));
 
+/**
+ * Provider configurations for all storage types
+ */
+const PROVIDER_CONFIGS = {
+    [FileLocationEnum.LOCAL]: {
+        label: 'Local',
+        icon: 'pi pi-folder',
+        severity: 'secondary',
+    },
+    [FileLocationEnum.AWS]: {
+        label: 'AWS S3',
+        icon: 'pi pi-cloud',
+        severity: 'warn',
+    },
+    [FileLocationEnum.AZURE]: {
+        label: 'Azure Blob',
+        icon: 'pi pi-cloud',
+        severity: 'info',
+    },
+    [FileLocationEnum.SFTP]: {
+        label: 'SFTP',
+        icon: 'pi pi-server',
+        severity: 'contrast',
+    },
+};
+/**
+ * Get provider label for display
+ */
+function getProviderLabel(storage) {
+    const enumValue = storage;
+    return PROVIDER_CONFIGS[enumValue]?.label ?? storage;
+}
+/**
+ * Get provider icon class
+ */
+function getProviderIcon(storage) {
+    const enumValue = storage;
+    return PROVIDER_CONFIGS[enumValue]?.icon ?? 'pi pi-database';
+}
+/**
+ * Get provider severity for p-tag
+ */
+function getProviderSeverity(storage) {
+    const enumValue = storage;
+    return PROVIDER_CONFIGS[enumValue]?.severity ?? 'secondary';
+}
+/**
+ * Get file icon based on content type
+ */
+function getFileIcon(contentType) {
+    if (contentType.startsWith('image/'))
+        return 'pi pi-image';
+    if (contentType.startsWith('video/'))
+        return 'pi pi-video';
+    if (contentType.startsWith('audio/'))
+        return 'pi pi-volume-up';
+    if (contentType.includes('pdf'))
+        return 'pi pi-file-pdf';
+    if (contentType.includes('word') || contentType.includes('document'))
+        return 'pi pi-file-word';
+    if (contentType.includes('excel') || contentType.includes('spreadsheet'))
+        return 'pi pi-file-excel';
+    return 'pi pi-file';
+}
+/**
+ * Format file size from bytes to human readable string
+ */
+function formatFileSize(bytes) {
+    if (bytes <= 0)
+        return '0 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];
+}
+/**
+ * Storage provider options for dropdown selects
+ */
+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 },
+];
+
+/**
+ * Base Storage Page
+ *
+ * Provides common signals, computed values, and utilities for storage pages.
+ * Used by form components that need company context and message utilities.
+ */
+class BaseStoragePage {
+    router = inject(Router);
+    messageService = inject(MessageService);
+    appConfig = inject(APP_CONFIG);
+    companyContext = inject(LAYOUT_AUTH_STATE);
+    /** Loading state */
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    /** Show company info if company feature enabled */
+    showCompanyInfo = computed(() => this.appConfig.enableCompanyFeature, ...(ngDevMode ? [{ debugName: "showCompanyInfo" }] : []));
+    /** Current company name */
+    currentCompanyName = computed(() => this.companyContext.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME, ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
+    /** Show success message */
+    showSuccess(detail, summary = 'Success') {
+        this.messageService.add({ severity: 'success', summary, detail });
+    }
+    /** Show error message */
+    showError(detail, summary = 'Error') {
+        this.messageService.add({ severity: 'error', summary, detail });
+    }
+    /** Navigate to a route */
+    navigateTo(path) {
+        this.router.navigate(path);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BaseStoragePage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: BaseStoragePage, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BaseStoragePage, decorators: [{
+            type: Directive
+        }] });
+/**
+ * Base Storage List Page
+ *
+ * Extends the shared BaseListPage with storage-specific functionality:
+ * - Company context integration via LAYOUT_AUTH_STATE
+ * - Current company name computed signal
+ * - Storage-specific defaults (pageSize: 50)
+ *
+ * Usage:
+ * ```typescript
+ * @Component({ ... })
+ * export class FolderListComponent extends BaseStorageListPage<IFolder> {
+ *   getResourceRoute(): string { return '/storage/folders'; }
+ *   getDeleteConfirmMessage(folder: IFolder): string { return `Delete "${folder.name}"?`; }
+ *   async loadData(): Promise<void> { ... }
+ * }
+ * ```
+ */
+class BaseStorageListPage extends BaseListPage {
+    companyContext = inject(LAYOUT_AUTH_STATE);
+    /** Override default page size for storage pages */
+    pageSize = signal(50, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    /** Total records alias for backward compatibility */
+    totalRecords = this.total;
+    /** Current company name */
+    currentCompanyName = computed(() => this.companyContext.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME, ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
+    /**
+     * Default implementation - subclasses should override if needed
+     */
+    getDeleteConfirmMessage(item) {
+        const name = item.name ?? 'this item';
+        return `Are you sure you want to delete "${name}"?`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BaseStorageListPage, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: BaseStorageListPage, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BaseStorageListPage, decorators: [{
+            type: Directive
+        }] });
+
 /**
  * File Manager API Service
  * Handles file metadata CRUD operations
@@ -53,7 +217,7 @@ class FileManagerApiService extends ApiResourceService {
     /**
      * Get files by folder
      * POST /storage/file-manager/get-all
-     * Filtered by folder ID and company (if enabled)
+     * Filtered by folder ID (UUID) and company (if enabled)
      */
     getFilesByFolder(folderId, page = 1, limit = 50) {
         return this.getAll('', {
@@ -76,54 +240,25 @@ class FileManagerApiService extends ApiResourceService {
             sort: {},
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FileManagerApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FileManagerApiService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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() {
-        const http = inject(HttpClient);
-        super('storage/folder', http);
+    /**
+     * Create a new file record
+     * POST /storage/file-manager/insert
+     * Uses ICreateFileManagerDto which has different required fields than update
+     */
+    createFile(dto) {
+        return this.http.post(`${this.baseUrl}/insert`, dto);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FolderApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FolderApiService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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() {
-        const http = inject(HttpClient);
-        super('storage/storage-config', http);
+    /**
+     * Create a new file record (async/await version)
+     * POST /storage/file-manager/insert
+     */
+    async createFileAsync(dto) {
+        return firstValueFrom(this.createFile(dto));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StorageConfigApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StorageConfigApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileManagerApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileManagerApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StorageConfigApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileManagerApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -140,11 +275,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * - Image compression
  * - Multiple storage providers
  * - File validation (size, type)
+ * - Default storage config from environment (services.storage.defaultStorageConfigId)
  */
 class UploadService extends BaseApiService {
+    fileManagerApi = inject(FileManagerApiService);
     constructor() {
         super('storage');
     }
+    /**
+     * Get default storage config ID from app config
+     * Used when no storageConfigId is provided in upload options
+     */
+    getDefaultConfigId() {
+        return getDefaultStorageConfigId(this.appConfig);
+    }
     /**
      * Upload single file
      * POST /storage/upload/single-file?storageConfigId=x&folderPath=y
@@ -179,24 +323,25 @@ class UploadService extends BaseApiService {
     }
     /**
      * Build query string from upload options
+     * Uses default storageConfigId from app config if not provided in options
      */
     buildQueryParams(options) {
-        if (!options)
-            return '';
         const params = new URLSearchParams();
-        if (options.storageConfigId)
-            params.append('storageConfigId', options.storageConfigId);
-        if (options.folderPath)
+        // Use provided storageConfigId or fall back to default from config
+        const storageConfigId = options?.storageConfigId ?? this.getDefaultConfigId();
+        if (storageConfigId)
+            params.append('storageConfigId', storageConfigId);
+        if (options?.folderPath)
             params.append('folderPath', options.folderPath);
-        if (options.maxWidth)
+        if (options?.maxWidth)
             params.append('maxWidth', options.maxWidth.toString());
-        if (options.maxHeight)
+        if (options?.maxHeight)
             params.append('maxHeight', options.maxHeight.toString());
-        if (options.quality)
+        if (options?.quality)
             params.append('quality', options.quality.toString());
-        if (options.format)
+        if (options?.format)
             params.append('format', options.format);
-        if (options.compress !== undefined)
+        if (options?.compress !== undefined)
             params.append('compress', options.compress.toString());
         return params.toString();
     }
@@ -205,20 +350,22 @@ class UploadService extends BaseApiService {
      * POST /storage/upload/delete-single-file
      *
      * @param key - File key/path to delete
-     * @param storageConfigId - Optional storage config ID (uses default if not provided)
+     * @param storageConfigId - Optional storage config ID (uses default from config if not provided)
      */
     deleteSingleFile(key, storageConfigId) {
-        return this.http.post(this.getUrl('upload/delete-single-file'), { key, ...(storageConfigId && { storageConfigId }) });
+        const configId = storageConfigId ?? this.getDefaultConfigId();
+        return this.http.post(this.getUrl('upload/delete-single-file'), { key, ...(configId && { storageConfigId: configId }) });
     }
     /**
      * Delete multiple files
      * POST /storage/upload/delete-multiple-file
      *
      * @param keys - Array of file keys/paths to delete
-     * @param storageConfigId - Optional storage config ID (uses default if not provided)
+     * @param storageConfigId - Optional storage config ID (uses default from config if not provided)
      */
     deleteMultipleFiles(keys, storageConfigId) {
-        return this.http.post(this.getUrl('upload/delete-multiple-file'), { keys, ...(storageConfigId && { storageConfigId }) });
+        const configId = storageConfigId ?? this.getDefaultConfigId();
+        return this.http.post(this.getUrl('upload/delete-multiple-file'), { keys, ...(configId && { storageConfigId: configId }) });
     }
     /**
      * Get file download URL
@@ -230,10 +377,153 @@ class UploadService extends BaseApiService {
     getFileUrl(key) {
         return this.getUrl(`upload/file/${key}`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UploadService, providedIn: 'root' });
+    /**
+     * Upload file and register in file manager
+     * Returns file manager ID (UUID) for storing in references like profilePictureId
+     *
+     * @param file - File to upload
+     * @param options - Upload options (storage config, compression, etc.)
+     * @returns Observable with file manager record (id is the UUID to store)
+     */
+    uploadAndRegister(file, options) {
+        return this.uploadSingleFile(file, options).pipe(switchMap((uploadResponse) => {
+            if (!uploadResponse.success || !uploadResponse.data) {
+                throw new Error(uploadResponse.message || 'Upload failed');
+            }
+            const uploadedFile = uploadResponse.data;
+            const storageConfigId = options?.storageConfigId ?? this.getDefaultConfigId();
+            // Create file manager record using proper DTO
+            return this.fileManagerApi.createFile({
+                name: uploadedFile.name,
+                key: uploadedFile.key,
+                size: String(uploadedFile.size),
+                contentType: uploadedFile.contentType,
+                isPrivate: options?.isPrivate ?? false,
+                folderId: options?.folderId,
+                storageConfigId,
+            });
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UploadService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", 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 {
+    uploadService = inject(UploadService);
+    /**
+     * Upload profile picture and register in file manager
+     * Returns file manager ID (UUID) for storing in user.profilePictureId
+     */
+    uploadProfilePicture(file, 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,
+        })));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ProfileUploadProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ProfileUploadProviderAdapter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ProfileUploadProviderAdapter, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Provide Storage Providers
+ *
+ * Registers storage-related provider implementations.
+ * Call this in app.config.ts to enable storage features in other packages.
+ *
+ * @example
+ * // In app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     ...provideStorageProviders(),
+ *   ],
+ * };
+ *
+ * @returns Array of providers for storage functionality
+ */
+function provideStorageProviders() {
+    return [
+        {
+            provide: PROFILE_UPLOAD_PROVIDER,
+            useClass: ProfileUploadProviderAdapter,
+        },
+    ];
+}
+
+/**
+ * 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() {
+        const http = inject(HttpClient);
+        super('storage/folder', http);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FolderApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FolderApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", 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() {
+        const http = inject(HttpClient);
+        super('storage/storage-config', http);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: StorageConfigApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: StorageConfigApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UploadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: StorageConfigApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -257,15 +547,15 @@ const STORAGE_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-storage-file-manager-list.component-5gqfPzR3.mjs').then((m) => m.FileManagerListComponent),
+                        loadComponent: () => import('./flusys-ng-storage-file-manager-list.component-DDOFAPRD.mjs').then((m) => m.FileManagerListComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-storage-file-manager-form.component-BI0hgXeI.mjs').then((m) => m.FileManagerFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-file-manager-form.component-CMS_ddbs.mjs').then((m) => m.FileManagerFormComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-storage-file-manager-form.component-BI0hgXeI.mjs').then((m) => m.FileManagerFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-file-manager-form.component-CMS_ddbs.mjs').then((m) => m.FileManagerFormComponent),
                     },
                 ],
             },
@@ -275,15 +565,15 @@ const STORAGE_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-storage-folder-list.component-CN_mTtS5.mjs').then((m) => m.FolderListComponent),
+                        loadComponent: () => import('./flusys-ng-storage-folder-list.component-CzONANHt.mjs').then((m) => m.FolderListComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-storage-folder-form.component-Cw2aLZkb.mjs').then((m) => m.FolderFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-folder-form.component-ClYATZkh.mjs').then((m) => m.FolderFormComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-storage-folder-form.component-Cw2aLZkb.mjs').then((m) => m.FolderFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-folder-form.component-ClYATZkh.mjs').then((m) => m.FolderFormComponent),
                     },
                 ],
             },
@@ -293,15 +583,15 @@ const STORAGE_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-storage-storage-config-list.component-tmiE2CpM.mjs').then((m) => m.StorageConfigListComponent),
+                        loadComponent: () => import('./flusys-ng-storage-storage-config-list.component-BbBx0iSL.mjs').then((m) => m.StorageConfigListComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-storage-storage-config-form.component-DHzsQ2Mc.mjs').then((m) => m.StorageConfigFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-storage-config-form.component-CODLLCtg.mjs').then((m) => m.StorageConfigFormComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-storage-storage-config-form.component-DHzsQ2Mc.mjs').then((m) => m.StorageConfigFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-storage-config-form.component-CODLLCtg.mjs').then((m) => m.StorageConfigFormComponent),
                     },
                 ],
             },
@@ -343,58 +633,56 @@ class StorageContainerComponent {
             route: 'configs',
         },
     ];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StorageContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: StorageContainerComponent, isStandalone: true, selector: "lib-storage-container", ngImport: i0, template: `
-    <div class="storage-page p-4">
-      <div class="storage-header mb-4">
-        <h1 class="text-2xl font-bold m-0">Storage</h1>
-        <p class="text-gray-500 mt-1">Manage files, folders, and storage configurations</p>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: StorageContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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">Manage files, folders, and storage configurations</p>
       </div>
 
-      <div class="storage-tabs flex gap-1 mb-4 border-b border-gray-200">
+      <div class="scrollbar-hide flex gap-1 mb-4 border-b border-surface overflow-x-auto flex-nowrap">
         @for (tab of tabs; track tab.id) {
           <a
             [routerLink]="tab.route"
-            routerLinkActive="active"
-            class="tab-link flex items-center gap-2 px-4 py-2 rounded-t-lg cursor-pointer transition-colors">
+            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>
 
-      <div class="storage-content">
-        <router-outlet />
-      </div>
+      <router-outlet />
     </div>
-  `, isInline: true, styles: [".tab-link{color:var(--text-color-secondary, #6b7280);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}.tab-link.active{color:var(--primary-color, #3b82f6);border-bottom-color:var(--primary-color, #3b82f6);background-color:var(--surface-ground, #f9fafb)}.tab-link:hover:not(.active){background-color:var(--surface-hover, #f3f4f6)}\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"] }] });
+  `, 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StorageContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: StorageContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-storage-container', standalone: true, imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive], template: `
-    <div class="storage-page p-4">
-      <div class="storage-header mb-4">
-        <h1 class="text-2xl font-bold m-0">Storage</h1>
-        <p class="text-gray-500 mt-1">Manage files, folders, and storage configurations</p>
+            args: [{ selector: 'lib-storage-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive], 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">Manage files, folders, and storage configurations</p>
       </div>
 
-      <div class="storage-tabs flex gap-1 mb-4 border-b border-gray-200">
+      <div class="scrollbar-hide flex gap-1 mb-4 border-b border-surface overflow-x-auto flex-nowrap">
         @for (tab of tabs; track tab.id) {
           <a
             [routerLink]="tab.route"
-            routerLinkActive="active"
-            class="tab-link flex items-center gap-2 px-4 py-2 rounded-t-lg cursor-pointer transition-colors">
+            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>
 
-      <div class="storage-content">
-        <router-outlet />
-      </div>
+      <router-outlet />
     </div>
-  `, styles: [".tab-link{color:var(--text-color-secondary, #6b7280);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}.tab-link.active{color:var(--primary-color, #3b82f6);border-bottom-color:var(--primary-color, #3b82f6);background-color:var(--surface-ground, #f9fafb)}.tab-link:hover:not(.active){background-color:var(--surface-hover, #f3f4f6)}\n"] }]
+  `, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"] }]
         }] });
 
 var storageContainer_component = /*#__PURE__*/Object.freeze({
@@ -411,5 +699,5 @@ var storageContainer_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { FileLocationEnum, FileManagerApiService, FolderApiService, ImageFormat, STORAGE_ROUTES, StorageConfigApiService, StorageContainerComponent, UploadService };
+export { BaseStorageListPage, BaseStoragePage, FileLocationEnum, FileManagerApiService, FolderApiService, ImageFormat, ProfileUploadProviderAdapter, STORAGE_PROVIDERS, STORAGE_ROUTES, StorageConfigApiService, StorageContainerComponent, UploadService, formatFileSize, getFileIcon, getProviderIcon, getProviderLabel, getProviderSeverity, provideStorageProviders };
 //# sourceMappingURL=flusys-ng-storage.mjs.map