@flusys/ng-storage 1.1.1-beta → 3.0.0-rc

package/fesm2022/{flusys-ng-storage-file-manager-form.component-H3OZS0SW.mjs → flusys-ng-storage-file-manager-form.component-Bv8ER8J0.mjs}

@@ -1,13 +1,11 @@
 import * as i0 from '@angular/core';
-import { inject, signal, computed, Component } from '@angular/core';
+import { inject, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { form, required, FormField } from '@angular/forms/signals';
-import { Router, ActivatedRoute } from '@angular/router';
-import { APP_CONFIG, DEFAULT_APP_NAME } from '@flusys/ng-core';
-import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
+import { ActivatedRoute } from '@angular/router';
 import { AngularModule, PrimeModule } from '@flusys/ng-shared';
-import { MessageService } from 'primeng/api';
 import { firstValueFrom } from 'rxjs';
-import { FileManagerApiService, UploadService, StorageConfigApiService, FolderApiService } from './flusys-ng-storage.mjs';
+import { BaseStoragePage, FileManagerApiService, UploadService, StorageConfigApiService, FolderApiService, formatFileSize, getProviderLabel } from './flusys-ng-storage.mjs';
 import * as i1 from '@angular/forms';
 import * as i1$1 from 'primeng/button';
 import * as i3 from 'primeng/fileupload';
@@ -17,17 +15,14 @@ import * as i3$1 from 'primeng/inputtext';
  * File Manager Form Component
  * Upload and edit file metadata
  */
-class FileManagerFormComponent {
-    router = inject(Router);
+class FileManagerFormComponent extends BaseStoragePage {
     route = inject(ActivatedRoute);
-    messageService = inject(MessageService);
     fileService = inject(FileManagerApiService);
     uploadService = inject(UploadService);
     configService = inject(StorageConfigApiService);
     folderService = inject(FolderApiService);
-    appConfig = inject(APP_CONFIG);
-    companyContext = inject(LAYOUT_AUTH_STATE);
-    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    routeParams = toSignal(this.route.paramMap);
+    initialized = false;
     isLoadingConfigs = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingConfigs" }] : []));
     isLoadingFolders = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingFolders" }] : []));
     existingFile = signal(null, ...(ngDevMode ? [{ debugName: "existingFile" }] : []));
@@ -35,11 +30,9 @@ class FileManagerFormComponent {
     selectedFile = signal(null, ...(ngDevMode ? [{ debugName: "selectedFile" }] : []));
     availableConfigs = signal([], ...(ngDevMode ? [{ debugName: "availableConfigs" }] : []));
     availableFolders = signal([], ...(ngDevMode ? [{ debugName: "availableFolders" }] : []));
-    showCompanyInfo = computed(() => this.appConfig.enableCompanyFeature, ...(ngDevMode ? [{ debugName: "showCompanyInfo" }] : []));
-    currentCompanyName = computed(() => this.companyContext.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME, ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
-    // ============================================
-    // Form (Signal Forms)
-    // ============================================
+    /** Utility functions exposed to template */
+    formatFileSize = formatFileSize;
+    getProviderLabel = getProviderLabel;
     /** Form model */
     formModel = signal({
         id: '',
@@ -48,28 +41,28 @@ class FileManagerFormComponent {
         folderId: '',
         storageConfigId: '',
     }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
-    /** Form with validation schema */
+    /** Form with validation */
     fileForm = form(this.formModel, (f) => {
         required(f.name, { message: 'File name is required' });
-        // storageConfigId validation will be done manually in onSubmit
-        // as it's only required for new uploads, not edits
     });
     /** Check if form is valid */
-    isFormValid = computed(() => {
-        const model = this.formModel();
-        return model.name.trim().length > 0;
-    }, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
-    ngOnInit() {
-        const fileId = this.route.snapshot.paramMap.get('id');
-        if (fileId) {
-            this.loadFile(fileId);
-        }
-        else {
-            // Load storage configurations for new upload
-            this.loadStorageConfigs();
-        }
-        // Load folders for both create and edit modes
-        this.loadFolders();
+    isFormValid = computed(() => this.formModel().name.trim().length > 0, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
+    constructor() {
+        super();
+        effect(() => {
+            const params = this.routeParams();
+            if (!params || this.initialized)
+                return;
+            this.initialized = true;
+            const fileId = params.get('id');
+            if (fileId) {
+                this.loadFile(fileId);
+            }
+            else {
+                this.loadStorageConfigs();
+            }
+            this.loadFolders();
+        });
     }
     async loadStorageConfigs() {
         this.isLoadingConfigs.set(true);
@@ -82,21 +75,13 @@ class FileManagerFormComponent {
             }));
             if (response.success && response.data) {
                 this.availableConfigs.set(response.data);
-                // Auto-select first config if only one available
                 if (response.data.length === 1) {
-                    this.formModel.update((m) => ({
-                        ...m,
-                        storageConfigId: response.data[0].id,
-                    }));
+                    this.formModel.update((m) => ({ ...m, storageConfigId: response.data[0].id }));
                 }
             }
         }
-        catch (error) {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load storage configurations.',
-            });
+        catch {
+            this.showError('Failed to load storage configurations.');
         }
         finally {
             this.isLoadingConfigs.set(false);
@@ -138,13 +123,9 @@ class FileManagerFormComponent {
                 });
             }
         }
-        catch (error) {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load file.',
-            });
-            this.router.navigate(['/storage/files']);
+        catch {
+            this.showError('Failed to load file.');
+            this.navigateTo(['/storage/files']);
         }
         finally {
             this.isLoading.set(false);
@@ -154,7 +135,6 @@ class FileManagerFormComponent {
         const file = event.files?.[0] || event.currentFiles?.[0];
         if (file) {
             this.selectedFile.set(file);
-            // Auto-fill file name
             this.formModel.update((m) => ({ ...m, name: file.name }));
         }
     }
@@ -165,40 +145,24 @@ class FileManagerFormComponent {
         try {
             const formValue = this.formModel();
             if (this.isEditMode()) {
-                // Update existing file metadata only
                 await this.fileService.updateAsync({
                     id: formValue.id,
                     name: formValue.name,
                     isPrivate: formValue.isPrivate,
                     folderId: formValue.folderId || null,
                 });
-                this.messageService.add({
-                    severity: 'success',
-                    summary: 'Success',
-                    detail: 'File updated successfully.',
-                });
+                this.showSuccess('File updated successfully.');
             }
             else {
-                // Upload new file
                 const file = this.selectedFile();
                 if (!file) {
-                    this.messageService.add({
-                        severity: 'error',
-                        summary: 'Error',
-                        detail: 'Please select a file to upload.',
-                    });
+                    this.showError('Please select a file to upload.');
                     return;
                 }
-                // Validate storage config selection
                 if (!formValue.storageConfigId) {
-                    this.messageService.add({
-                        severity: 'error',
-                        summary: 'Error',
-                        detail: 'Please select a storage configuration.',
-                    });
+                    this.showError('Please select a storage configuration.');
                     return;
                 }
-                // Upload file first
                 const uploadResponse = await firstValueFrom(this.uploadService.uploadSingleFile(file, {
                     compress: true,
                     quality: 85,
@@ -206,102 +170,52 @@ class FileManagerFormComponent {
                 }));
                 if (uploadResponse.success && uploadResponse.data) {
                     const uploadedFileInfo = uploadResponse.data;
-                    // Save file metadata
-                    await this.fileService.insertAsync({
+                    await this.fileService.createFileAsync({
                         name: formValue.name,
                         key: uploadedFileInfo.key,
                         contentType: file.type || 'application/octet-stream',
                         size: Math.round(file.size / 1024).toString(),
                         isPrivate: formValue.isPrivate,
                         folderId: formValue.folderId || undefined,
-                        storageConfigId: formValue.storageConfigId, // ✅ Include storage config ID
-                    });
-                    this.messageService.add({
-                        severity: 'success',
-                        summary: 'Success',
-                        detail: 'File uploaded successfully.',
+                        storageConfigId: formValue.storageConfigId,
                     });
+                    this.showSuccess('File uploaded successfully.');
                 }
                 else {
                     throw new Error('Upload failed');
                 }
             }
-            this.router.navigate(['/storage/files']);
+            this.navigateTo(['/storage/files']);
         }
         catch (error) {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: error?.message ||
-                    `Failed to ${this.isEditMode() ? 'update' : 'upload'} file.`,
-            });
+            this.showError(error?.message || `Failed to ${this.isEditMode() ? 'update' : 'upload'} file.`);
         }
         finally {
             this.isLoading.set(false);
         }
     }
     onCancel() {
-        this.router.navigate(['/storage/files']);
-    }
-    formatFileSize(bytes) {
-        if (bytes === 0)
-            return '0 Bytes';
-        const k = 1024;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
-    }
-    getProviderLabel(storage) {
-        const labels = {
-            AWS: 'AWS S3',
-            AZURE: 'Azure Blob',
-            SFTP: 'SFTP',
-            LOCAL: 'Local',
-        };
-        return labels[storage] || storage;
+        this.navigateTo(['/storage/files']);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileManagerFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FileManagerFormComponent, isStandalone: true, selector: "lib-file-manager-form", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FileManagerFormComponent, isStandalone: true, selector: "lib-file-manager-form", usesInheritance: true, ngImport: i0, template: `
     <div class="card">
-      <div class="flex justify-between items-center mb-4">
-        <div>
-          <h3 class="text-xl font-semibold">
-            {{ isEditMode() ? 'Edit File' : 'Upload File' }}
-          </h3>
-          @if (showCompanyInfo()) {
-            <p class="text-sm text-muted-color mt-1">
-              Company: {{ currentCompanyName() }}
-            </p>
-          }
-        </div>
-        <p-button
-          label="Back"
-          icon="pi pi-arrow-left"
-          severity="secondary"
-          [text]="true"
-          (onClick)="onCancel()"
-        />
+      <div class="mb-4">
+        <h3 class="text-lg sm:text-xl font-semibold">{{ isEditMode() ? 'Edit File' : 'Upload File' }}</h3>
+        @if (showCompanyInfo()) {
+          <p class="text-sm text-muted-color mt-1">Company: {{ currentCompanyName() }}</p>
+        }
       </div>
 
       <form (ngSubmit)="onSubmit()">
-        <!-- Storage Configuration & Folder Selection (only for new files) -->
         @if (!isEditMode()) {
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-            <!-- Storage Configuration -->
             <div class="field">
-              <label for="storageConfig" class="block font-medium mb-2"
-                >Storage Configuration *</label
-              >
-              <select
-                id="storageConfig"
-                class="p-select-native"
-                [formField]="fileForm.storageConfigId"
-              >
+              <label for="storageConfig" class="block font-medium mb-2 text-sm sm:text-base">Storage Configuration *</label>
+              <select id="storageConfig" class="p-select-native w-full" [formField]="fileForm.storageConfigId">
                 <option value="">Select storage configuration...</option>
                 @for (config of availableConfigs(); track config.id) {
-                  <option [value]="config.id">
-                    {{ config.name }} ({{ getProviderLabel(config.storage) }})
-                  </option>
+                  <option [value]="config.id">{{ config.name }} ({{ getProviderLabel(config.storage) }})</option>
                 }
               </select>
               @if (availableConfigs().length === 0 && !isLoadingConfigs()) {
@@ -312,16 +226,9 @@ class FileManagerFormComponent {
               }
             </div>
 
-            <!-- Folder Selection -->
             <div class="field">
-              <label for="folder" class="block font-medium mb-2"
-                >Folder (Optional)</label
-              >
-              <select
-                id="folder"
-                class="p-select-native"
-                [formField]="fileForm.folderId"
-              >
+              <label for="folder" class="block font-medium mb-2 text-sm sm:text-base">Folder (Optional)</label>
+              <select id="folder" class="p-select-native w-full" [formField]="fileForm.folderId">
                 <option value="">No folder (root level)</option>
                 @for (folder of availableFolders(); track folder.id) {
                   <option [value]="folder.id">{{ folder.name }}</option>
@@ -336,16 +243,9 @@ class FileManagerFormComponent {
             </div>
           </div>
         } @else {
-          <!-- Folder Selection for Edit Mode -->
           <div class="field mb-4">
-            <label for="folder" class="block font-medium mb-2"
-              >Folder (Optional)</label
-            >
-            <select
-              id="folder"
-              class="p-select-native"
-              [formField]="fileForm.folderId"
-            >
+            <label for="folder" class="block font-medium mb-2 text-sm sm:text-base">Folder (Optional)</label>
+            <select id="folder" class="p-select-native w-full" [formField]="fileForm.folderId">
               <option value="">No folder (root level)</option>
               @for (folder of availableFolders(); track folder.id) {
                 <option [value]="folder.id">{{ folder.name }}</option>
@@ -360,10 +260,9 @@ class FileManagerFormComponent {
           </div>
         }
 
-        <!-- File Upload (only for new files) -->
         @if (!isEditMode()) {
           <div class="field mb-4">
-            <label class="block font-medium mb-2">Select File *</label>
+            <label class="block font-medium mb-2 text-sm sm:text-base">Select File *</label>
             <p-fileupload
               #fileUpload
               [customUpload]="true"
@@ -381,154 +280,85 @@ class FileManagerFormComponent {
                 @if (files && files.length > 0) {
                   <div class="flex flex-col gap-2">
                     @for (file of files; track file.name) {
-                      <div class="flex items-center gap-3 p-3 border rounded">
-                        <i class="pi pi-file text-2xl"></i>
-                        <div class="flex-1">
-                          <div class="font-medium">{{ file.name }}</div>
-                          <div class="text-sm text-muted-color">
-                            {{ formatFileSize(file.size) }}
-                          </div>
+                      <div class="flex items-center gap-3 p-3 border border-surface rounded-lg bg-surface-ground">
+                        <i class="pi pi-file text-xl sm:text-2xl text-primary"></i>
+                        <div class="flex-1 min-w-0">
+                          <div class="font-medium truncate">{{ file.name }}</div>
+                          <div class="text-sm text-muted-color">{{ formatFileSize(file.size) }}</div>
                         </div>
-                        <p-button
-                          icon="pi pi-times"
-                          [text]="true"
-                          severity="danger"
-                          size="small"
-                          (onClick)="fileUpload.clear()"
-                        />
+                        <p-button icon="pi pi-times" [text]="true" severity="danger" size="small" (onClick)="fileUpload.clear()" />
                       </div>
                     }
                   </div>
                 } @else {
-                  <div
-                    class="flex items-center justify-center flex-col p-8 border-2 border-dashed border-surface-300 rounded"
-                  >
-                    <i
-                      class="pi pi-cloud-upload text-4xl text-muted-color mb-3"
-                    ></i>
-                    <p class="text-muted-color">
-                      Drag and drop file here or click to browse
-                    </p>
-                    <p class="text-sm text-muted-color mt-2">
-                      Maximum file size: 50MB
-                    </p>
+                  <div class="flex items-center justify-center flex-col p-6 sm:p-8 border-2 border-dashed border-surface rounded-lg">
+                    <i class="pi pi-cloud-upload text-3xl sm:text-4xl text-muted-color mb-3"></i>
+                    <p class="text-muted-color text-center text-sm sm:text-base">Drag and drop file here or click to browse</p>
+                    <p class="text-xs sm:text-sm text-muted-color mt-2">Maximum file size: 50MB</p>
                   </div>
                 }
               </ng-template>
             </p-fileupload>
             @if (!selectedFile() && !isEditMode()) {
-              <small class="text-muted-color"
-                >Please select a file to upload</small
-              >
+              <small class="text-muted-color">Please select a file to upload</small>
             }
           </div>
         }
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <!-- File Name (read-only for uploads, editable for existing) -->
           <div class="field md:col-span-2">
-            <label for="name" class="block font-medium mb-2">File Name *</label>
-            <input
-              pInputText
-              id="name"
-              [formField]="fileForm.name"
-              [placeholder]="
-                isEditMode()
-                  ? 'Enter file name'
-                  : 'Will be auto-filled from selected file'
-              "
-              class="w-full"
-            />
+            <label for="name" class="block font-medium mb-2 text-sm sm:text-base">File Name *</label>
+            <input pInputText id="name" [formField]="fileForm.name" [placeholder]="isEditMode() ? 'Enter file name' : 'Will be auto-filled from selected file'" class="w-full" />
           </div>
 
-          <!-- Privacy Toggle -->
           <div class="field">
-            <label class="p-checkbox-native">
+            <label class="p-checkbox-native flex items-center gap-2">
               <input type="checkbox" [formField]="fileForm.isPrivate" />
               <span>Private File</span>
             </label>
             <small class="text-muted-color block mt-2">
-              {{
-                formModel().isPrivate
-                  ? 'Only users with permission can access'
-                  : 'File is publicly accessible'
-              }}
+              {{ formModel().isPrivate ? 'Only users with permission can access' : 'File is publicly accessible' }}
             </small>
           </div>
         </div>
 
-        <div class="flex gap-2 mt-4">
+        <div class="flex justify-end gap-2 mt-4">
+          <p-button label="Cancel" severity="secondary" [outlined]="true" (onClick)="onCancel()" />
           <p-button
             type="submit"
             [label]="isEditMode() ? 'Update' : 'Upload'"
-            [icon]="isEditMode() ? 'pi pi-check' : 'pi pi-cloud-upload'"
             [loading]="isLoading()"
-            [disabled]="
-              !isFormValid() ||
-              (!isEditMode() && !selectedFile()) ||
-              isLoading()
-            "
-          />
-          <p-button
-            type="button"
-            label="Cancel"
-            severity="secondary"
-            icon="pi pi-times"
-            [text]="true"
-            (onClick)="onCancel()"
+            [disabled]="!isFormValid() || (!isEditMode() && !selectedFile()) || isLoading()"
           />
         </div>
       </form>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileManagerFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-file-manager-form',
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AngularModule, PrimeModule, FormField],
                     template: `
     <div class="card">
-      <div class="flex justify-between items-center mb-4">
-        <div>
-          <h3 class="text-xl font-semibold">
-            {{ isEditMode() ? 'Edit File' : 'Upload File' }}
-          </h3>
-          @if (showCompanyInfo()) {
-            <p class="text-sm text-muted-color mt-1">
-              Company: {{ currentCompanyName() }}
-            </p>
-          }
-        </div>
-        <p-button
-          label="Back"
-          icon="pi pi-arrow-left"
-          severity="secondary"
-          [text]="true"
-          (onClick)="onCancel()"
-        />
+      <div class="mb-4">
+        <h3 class="text-lg sm:text-xl font-semibold">{{ isEditMode() ? 'Edit File' : 'Upload File' }}</h3>
+        @if (showCompanyInfo()) {
+          <p class="text-sm text-muted-color mt-1">Company: {{ currentCompanyName() }}</p>
+        }
       </div>
 
       <form (ngSubmit)="onSubmit()">
-        <!-- Storage Configuration & Folder Selection (only for new files) -->
         @if (!isEditMode()) {
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-            <!-- Storage Configuration -->
             <div class="field">
-              <label for="storageConfig" class="block font-medium mb-2"
-                >Storage Configuration *</label
-              >
-              <select
-                id="storageConfig"
-                class="p-select-native"
-                [formField]="fileForm.storageConfigId"
-              >
+              <label for="storageConfig" class="block font-medium mb-2 text-sm sm:text-base">Storage Configuration *</label>
+              <select id="storageConfig" class="p-select-native w-full" [formField]="fileForm.storageConfigId">
                 <option value="">Select storage configuration...</option>
                 @for (config of availableConfigs(); track config.id) {
-                  <option [value]="config.id">
-                    {{ config.name }} ({{ getProviderLabel(config.storage) }})
-                  </option>
+                  <option [value]="config.id">{{ config.name }} ({{ getProviderLabel(config.storage) }})</option>
                 }
               </select>
               @if (availableConfigs().length === 0 && !isLoadingConfigs()) {
@@ -539,16 +369,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               }
             </div>
 
-            <!-- Folder Selection -->
             <div class="field">
-              <label for="folder" class="block font-medium mb-2"
-                >Folder (Optional)</label
-              >
-              <select
-                id="folder"
-                class="p-select-native"
-                [formField]="fileForm.folderId"
-              >
+              <label for="folder" class="block font-medium mb-2 text-sm sm:text-base">Folder (Optional)</label>
+              <select id="folder" class="p-select-native w-full" [formField]="fileForm.folderId">
                 <option value="">No folder (root level)</option>
                 @for (folder of availableFolders(); track folder.id) {
                   <option [value]="folder.id">{{ folder.name }}</option>
@@ -563,16 +386,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             </div>
           </div>
         } @else {
-          <!-- Folder Selection for Edit Mode -->
           <div class="field mb-4">
-            <label for="folder" class="block font-medium mb-2"
-              >Folder (Optional)</label
-            >
-            <select
-              id="folder"
-              class="p-select-native"
-              [formField]="fileForm.folderId"
-            >
+            <label for="folder" class="block font-medium mb-2 text-sm sm:text-base">Folder (Optional)</label>
+            <select id="folder" class="p-select-native w-full" [formField]="fileForm.folderId">
               <option value="">No folder (root level)</option>
               @for (folder of availableFolders(); track folder.id) {
                 <option [value]="folder.id">{{ folder.name }}</option>
@@ -587,10 +403,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
           </div>
         }
 
-        <!-- File Upload (only for new files) -->
         @if (!isEditMode()) {
           <div class="field mb-4">
-            <label class="block font-medium mb-2">Select File *</label>
+            <label class="block font-medium mb-2 text-sm sm:text-base">Select File *</label>
             <p-fileupload
               #fileUpload
               [customUpload]="true"
@@ -608,108 +423,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 @if (files && files.length > 0) {
                   <div class="flex flex-col gap-2">
                     @for (file of files; track file.name) {
-                      <div class="flex items-center gap-3 p-3 border rounded">
-                        <i class="pi pi-file text-2xl"></i>
-                        <div class="flex-1">
-                          <div class="font-medium">{{ file.name }}</div>
-                          <div class="text-sm text-muted-color">
-                            {{ formatFileSize(file.size) }}
-                          </div>
+                      <div class="flex items-center gap-3 p-3 border border-surface rounded-lg bg-surface-ground">
+                        <i class="pi pi-file text-xl sm:text-2xl text-primary"></i>
+                        <div class="flex-1 min-w-0">
+                          <div class="font-medium truncate">{{ file.name }}</div>
+                          <div class="text-sm text-muted-color">{{ formatFileSize(file.size) }}</div>
                         </div>
-                        <p-button
-                          icon="pi pi-times"
-                          [text]="true"
-                          severity="danger"
-                          size="small"
-                          (onClick)="fileUpload.clear()"
-                        />
+                        <p-button icon="pi pi-times" [text]="true" severity="danger" size="small" (onClick)="fileUpload.clear()" />
                       </div>
                     }
                   </div>
                 } @else {
-                  <div
-                    class="flex items-center justify-center flex-col p-8 border-2 border-dashed border-surface-300 rounded"
-                  >
-                    <i
-                      class="pi pi-cloud-upload text-4xl text-muted-color mb-3"
-                    ></i>
-                    <p class="text-muted-color">
-                      Drag and drop file here or click to browse
-                    </p>
-                    <p class="text-sm text-muted-color mt-2">
-                      Maximum file size: 50MB
-                    </p>
+                  <div class="flex items-center justify-center flex-col p-6 sm:p-8 border-2 border-dashed border-surface rounded-lg">
+                    <i class="pi pi-cloud-upload text-3xl sm:text-4xl text-muted-color mb-3"></i>
+                    <p class="text-muted-color text-center text-sm sm:text-base">Drag and drop file here or click to browse</p>
+                    <p class="text-xs sm:text-sm text-muted-color mt-2">Maximum file size: 50MB</p>
                   </div>
                 }
               </ng-template>
             </p-fileupload>
             @if (!selectedFile() && !isEditMode()) {
-              <small class="text-muted-color"
-                >Please select a file to upload</small
-              >
+              <small class="text-muted-color">Please select a file to upload</small>
             }
           </div>
         }
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <!-- File Name (read-only for uploads, editable for existing) -->
           <div class="field md:col-span-2">
-            <label for="name" class="block font-medium mb-2">File Name *</label>
-            <input
-              pInputText
-              id="name"
-              [formField]="fileForm.name"
-              [placeholder]="
-                isEditMode()
-                  ? 'Enter file name'
-                  : 'Will be auto-filled from selected file'
-              "
-              class="w-full"
-            />
+            <label for="name" class="block font-medium mb-2 text-sm sm:text-base">File Name *</label>
+            <input pInputText id="name" [formField]="fileForm.name" [placeholder]="isEditMode() ? 'Enter file name' : 'Will be auto-filled from selected file'" class="w-full" />
           </div>
 
-          <!-- Privacy Toggle -->
           <div class="field">
-            <label class="p-checkbox-native">
+            <label class="p-checkbox-native flex items-center gap-2">
               <input type="checkbox" [formField]="fileForm.isPrivate" />
               <span>Private File</span>
             </label>
             <small class="text-muted-color block mt-2">
-              {{
-                formModel().isPrivate
-                  ? 'Only users with permission can access'
-                  : 'File is publicly accessible'
-              }}
+              {{ formModel().isPrivate ? 'Only users with permission can access' : 'File is publicly accessible' }}
             </small>
           </div>
         </div>
 
-        <div class="flex gap-2 mt-4">
+        <div class="flex justify-end gap-2 mt-4">
+          <p-button label="Cancel" severity="secondary" [outlined]="true" (onClick)="onCancel()" />
           <p-button
             type="submit"
             [label]="isEditMode() ? 'Update' : 'Upload'"
-            [icon]="isEditMode() ? 'pi pi-check' : 'pi pi-cloud-upload'"
             [loading]="isLoading()"
-            [disabled]="
-              !isFormValid() ||
-              (!isEditMode() && !selectedFile()) ||
-              isLoading()
-            "
-          />
-          <p-button
-            type="button"
-            label="Cancel"
-            severity="secondary"
-            icon="pi pi-times"
-            [text]="true"
-            (onClick)="onCancel()"
+            [disabled]="!isFormValid() || (!isEditMode() && !selectedFile()) || isLoading()"
           />
         </div>
       </form>
     </div>
   `,
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 export { FileManagerFormComponent };
-//# sourceMappingURL=flusys-ng-storage-file-manager-form.component-H3OZS0SW.mjs.map
+//# sourceMappingURL=flusys-ng-storage-file-manager-form.component-Bv8ER8J0.mjs.map