@flusys/ng-storage 1.1.1-beta → 2.0.0-rc.0

package/fesm2022/{flusys-ng-storage-storage-config-form.component-CjIAxfHC.mjs → flusys-ng-storage-storage-config-form.component-DEMexjmg.mjs}

@@ -1,83 +1,63 @@
 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 { ActivatedRoute } from '@angular/router';
 import { AngularModule, PrimeModule } from '@flusys/ng-shared';
-import { APP_CONFIG } from '@flusys/ng-core';
-import { MessageService } from 'primeng/api';
-import { StorageConfigApiService, FileLocationEnum } from './flusys-ng-storage.mjs';
+import { FileLocationEnum, BaseStoragePage, StorageConfigApiService, STORAGE_PROVIDERS } from './flusys-ng-storage.mjs';
 import * as i1 from '@angular/forms';
 import * as i1$1 from 'primeng/button';
 import * as i3 from 'primeng/inputtext';
 import * as i4 from 'primeng/toggleswitch';
 
-/**
- * Storage Config Form Component
- * Create and edit storage configurations
- */
-class StorageConfigFormComponent {
-    router = inject(Router);
+const DEFAULT_FORM_MODEL = {
+    id: '',
+    name: '',
+    storage: FileLocationEnum.AWS,
+    isActive: true,
+    isDefault: false,
+    awsRegion: '',
+    awsBucket: '',
+    awsAccessKeyId: '',
+    awsSecretAccessKey: '',
+    awsEndpoint: '',
+    azureAccountName: '',
+    azureAccountKey: '',
+    azureContainerName: '',
+    sftpHost: '',
+    sftpPort: '22',
+    sftpUsername: '',
+    sftpPassword: '',
+    sftpBasePath: '',
+    localBasePath: '',
+};
+class StorageConfigFormComponent extends BaseStoragePage {
     route = inject(ActivatedRoute);
-    messageService = inject(MessageService);
     configService = inject(StorageConfigApiService);
-    appConfig = inject(APP_CONFIG);
+    routeParams = toSignal(this.route.paramMap);
+    initialized = false;
     fileLocationEnum = FileLocationEnum;
-    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    storageProviders = STORAGE_PROVIDERS;
     existingConfig = signal(null, ...(ngDevMode ? [{ debugName: "existingConfig" }] : []));
     isEditMode = computed(() => !!this.existingConfig(), ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
-    showCompanyInfo = computed(() => this.appConfig.enableCompanyFeature, ...(ngDevMode ? [{ debugName: "showCompanyInfo" }] : []));
-    currentCompanyName = computed(() => 'Current Company', ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
-    storageProviders = [
-        { label: 'AWS S3', value: FileLocationEnum.AWS },
-        { label: 'Azure Blob Storage', value: FileLocationEnum.AZURE },
-        { label: 'SFTP', value: FileLocationEnum.SFTP },
-        { label: 'Local Storage', value: FileLocationEnum.LOCAL },
-    ];
-    // ============================================
-    // Form (Signal Forms)
-    // ============================================
-    /** Form model */
-    formModel = signal({
-        id: '',
-        name: '',
-        storage: FileLocationEnum.AWS,
-        isActive: true,
-        isDefault: false,
-        // AWS S3
-        awsRegion: '',
-        awsBucket: '',
-        awsAccessKeyId: '',
-        awsSecretAccessKey: '',
-        awsEndpoint: '',
-        // Azure
-        azureAccountName: '',
-        azureAccountKey: '',
-        azureContainerName: '',
-        // SFTP
-        sftpHost: '',
-        sftpPort: '22',
-        sftpUsername: '',
-        sftpPassword: '',
-        sftpBasePath: '',
-        // Local
-        localBasePath: '',
-    }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
-    /** Form with validation schema */
+    formModel = signal({ ...DEFAULT_FORM_MODEL }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
     configForm = form(this.formModel, (f) => {
         required(f.name, { message: 'Configuration name is required' });
     });
-    /** Selected provider */
     selectedProvider = computed(() => this.formModel().storage, ...(ngDevMode ? [{ debugName: "selectedProvider" }] : []));
-    /** Check if form is valid */
-    isFormValid = computed(() => {
-        const model = this.formModel();
-        return model.name.trim().length > 0;
-    }, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
-    ngOnInit() {
-        const configId = this.route.snapshot.paramMap.get('id');
-        if (configId) {
-            this.loadConfig(configId);
-        }
+    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 configId = params.get('id');
+            if (configId && configId !== 'new') {
+                this.loadConfig(configId);
+            }
+        });
     }
     async loadConfig(id) {
         this.isLoading.set(true);
@@ -86,47 +66,20 @@ class StorageConfigFormComponent {
             if (response.success && response.data) {
                 const config = response.data;
                 this.existingConfig.set(config);
-                // Base form values
-                const formData = {
+                this.formModel.update((m) => ({
+                    ...m,
                     id: config.id,
                     name: config.name,
                     storage: config.storage,
                     isActive: config.isActive ?? true,
                     isDefault: config.isDefault ?? false,
-                };
-                // Load provider-specific config
-                if (config.storage === FileLocationEnum.AWS && config.config) {
-                    formData.awsRegion = config.config['region'] || '';
-                    formData.awsBucket = config.config['bucket'] || '';
-                    formData.awsAccessKeyId = config.config['accessKeyId'] || '';
-                    formData.awsSecretAccessKey = config.config['secretAccessKey'] || '';
-                    formData.awsEndpoint = config.config['endpoint'] || '';
-                }
-                else if (config.storage === FileLocationEnum.AZURE && config.config) {
-                    formData.azureAccountName = config.config['accountName'] || '';
-                    formData.azureAccountKey = config.config['accountKey'] || '';
-                    formData.azureContainerName = config.config['containerName'] || '';
-                }
-                else if (config.storage === FileLocationEnum.SFTP && config.config) {
-                    formData.sftpHost = config.config['host'] || '';
-                    formData.sftpPort = (config.config['port'] || 22).toString();
-                    formData.sftpUsername = config.config['username'] || '';
-                    formData.sftpPassword = config.config['password'] || '';
-                    formData.sftpBasePath = config.config['basePath'] || '';
-                }
-                else if (config.storage === FileLocationEnum.LOCAL && config.config) {
-                    formData.localBasePath = config.config['basePath'] || '';
-                }
-                this.formModel.update((m) => ({ ...m, ...formData }));
+                    ...this.extractProviderConfig(config),
+                }));
             }
         }
-        catch (error) {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load storage configuration.',
-            });
-            this.router.navigate(['/storage/configs']);
+        catch {
+            this.showError('Failed to load storage configuration.');
+            this.navigateTo(['/storage/configs']);
         }
         finally {
             this.isLoading.set(false);
@@ -138,38 +91,7 @@ class StorageConfigFormComponent {
         this.isLoading.set(true);
         try {
             const formValue = this.formModel();
-            let config = {};
-            // Build provider-specific config
-            if (formValue.storage === FileLocationEnum.AWS) {
-                config = {
-                    region: formValue.awsRegion,
-                    bucket: formValue.awsBucket,
-                    accessKeyId: formValue.awsAccessKeyId,
-                    secretAccessKey: formValue.awsSecretAccessKey,
-                    ...(formValue.awsEndpoint && { endpoint: formValue.awsEndpoint }),
-                };
-            }
-            else if (formValue.storage === FileLocationEnum.AZURE) {
-                config = {
-                    accountName: formValue.azureAccountName,
-                    accountKey: formValue.azureAccountKey,
-                    containerName: formValue.azureContainerName,
-                };
-            }
-            else if (formValue.storage === FileLocationEnum.SFTP) {
-                config = {
-                    host: formValue.sftpHost,
-                    port: formValue.sftpPort ? parseInt(formValue.sftpPort, 10) : 22,
-                    username: formValue.sftpUsername,
-                    password: formValue.sftpPassword,
-                    basePath: formValue.sftpBasePath,
-                };
-            }
-            else if (formValue.storage === FileLocationEnum.LOCAL) {
-                config = {
-                    basePath: formValue.localBasePath,
-                };
-            }
+            const config = this.buildProviderConfig(formValue);
             if (this.isEditMode()) {
                 await this.configService.updateAsync({
                     id: formValue.id,
@@ -179,11 +101,7 @@ class StorageConfigFormComponent {
                     isActive: formValue.isActive,
                     isDefault: formValue.isDefault,
                 });
-                this.messageService.add({
-                    severity: 'success',
-                    summary: 'Success',
-                    detail: 'Storage configuration updated successfully.',
-                });
+                this.showSuccess('Storage configuration updated successfully.');
             }
             else {
                 await this.configService.insertAsync({
@@ -193,354 +111,353 @@ class StorageConfigFormComponent {
                     isActive: formValue.isActive,
                     isDefault: formValue.isDefault,
                 });
-                this.messageService.add({
-                    severity: 'success',
-                    summary: 'Success',
-                    detail: 'Storage configuration created successfully.',
-                });
+                this.showSuccess('Storage configuration created successfully.');
             }
-            this.router.navigate(['/storage/configs']);
+            this.navigateTo(['/storage/configs']);
         }
-        catch (error) {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: `Failed to ${this.isEditMode() ? 'update' : 'create'} storage configuration.`,
-            });
+        catch {
+            this.showError(`Failed to ${this.isEditMode() ? 'update' : 'create'} storage configuration.`);
         }
         finally {
             this.isLoading.set(false);
         }
     }
     onCancel() {
-        this.router.navigate(['/storage/configs']);
+        this.navigateTo(['/storage/configs']);
+    }
+    extractProviderConfig(config) {
+        const c = config.config ?? {};
+        switch (config.storage) {
+            case FileLocationEnum.AWS:
+                return {
+                    awsRegion: c['region'] || '',
+                    awsBucket: c['bucket'] || '',
+                    awsAccessKeyId: c['accessKeyId'] || '',
+                    awsSecretAccessKey: c['secretAccessKey'] || '',
+                    awsEndpoint: c['endpoint'] || '',
+                };
+            case FileLocationEnum.AZURE:
+                return {
+                    azureAccountName: c['accountName'] || '',
+                    azureAccountKey: c['accountKey'] || '',
+                    azureContainerName: c['containerName'] || '',
+                };
+            case FileLocationEnum.SFTP:
+                return {
+                    sftpHost: c['host'] || '',
+                    sftpPort: (c['port'] || 22).toString(),
+                    sftpUsername: c['username'] || '',
+                    sftpPassword: c['password'] || '',
+                    sftpBasePath: c['basePath'] || '',
+                };
+            case FileLocationEnum.LOCAL:
+                return { localBasePath: c['basePath'] || '' };
+            default:
+                return {};
+        }
+    }
+    buildProviderConfig(formValue) {
+        switch (formValue.storage) {
+            case FileLocationEnum.AWS:
+                return {
+                    region: formValue.awsRegion,
+                    bucket: formValue.awsBucket,
+                    accessKeyId: formValue.awsAccessKeyId,
+                    secretAccessKey: formValue.awsSecretAccessKey,
+                    ...(formValue.awsEndpoint && { endpoint: formValue.awsEndpoint }),
+                };
+            case FileLocationEnum.AZURE:
+                return {
+                    accountName: formValue.azureAccountName,
+                    accountKey: formValue.azureAccountKey,
+                    containerName: formValue.azureContainerName,
+                };
+            case FileLocationEnum.SFTP:
+                return {
+                    host: formValue.sftpHost,
+                    port: formValue.sftpPort ? parseInt(formValue.sftpPort, 10) : 22,
+                    username: formValue.sftpUsername,
+                    password: formValue.sftpPassword,
+                    basePath: formValue.sftpBasePath,
+                };
+            case FileLocationEnum.LOCAL:
+                return { basePath: formValue.localBasePath };
+            default:
+                return {};
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: StorageConfigFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: StorageConfigFormComponent, isStandalone: true, selector: "lib-storage-config-form", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: StorageConfigFormComponent, isStandalone: true, selector: "lib-storage-config-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 Storage Configuration' : 'New Storage Configuration' }}
-          </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>
+      <h3 class="text-lg sm:text-xl font-semibold mb-4">
+        {{ isEditMode() ? 'Edit Storage Configuration' : 'New Storage Configuration' }}
+      </h3>
+      @if (showCompanyInfo()) {
+        <p class="text-sm text-muted-color mb-4">Company: {{ currentCompanyName() }}</p>
+      }
 
       <form (ngSubmit)="onSubmit()">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <!-- Name -->
-          <div class="field md:col-span-2">
-            <label for="name" class="block font-medium mb-2">Configuration Name *</label>
-            <input
-              pInputText
-              id="name"
-              [formField]="configForm.name"
-              placeholder="e.g., Production AWS S3"
-              class="w-full" />
+          <div class="field">
+            <label for="name" class="block font-medium mb-2 text-sm sm:text-base">Configuration Name *</label>
+            <input pInputText id="name" [formField]="configForm.name" placeholder="e.g., Production AWS S3" class="w-full" />
           </div>
 
-          <!-- Storage Provider -->
-          <div class="field md:col-span-2">
-            <label for="storage" class="block font-medium mb-2">Storage Provider *</label>
-            <select
-              id="storage"
-              class="p-select-native"
-              [formField]="configForm.storage">
+          <div class="field">
+            <label for="storage" class="block font-medium mb-2 text-sm sm:text-base">Storage Provider *</label>
+            <select id="storage" class="p-select-native w-full" [formField]="configForm.storage">
               @for (provider of storageProviders; track provider.value) {
                 <option [value]="provider.value">{{ provider.label }}</option>
               }
             </select>
           </div>
 
-          <!-- Active Toggle -->
           <div class="field flex items-center gap-2">
             <p-toggleswitch [formField]="configForm.isActive" />
-            <label>Active</label>
+            <label class="text-sm sm:text-base">Active</label>
           </div>
 
-          <!-- Default Toggle -->
           <div class="field flex items-center gap-2">
             <p-toggleswitch [formField]="configForm.isDefault" />
-            <label>Set as Default</label>
+            <label class="text-sm sm:text-base">Set as Default</label>
           </div>
         </div>
 
-        <!-- AWS S3 Fields -->
         @if (selectedProvider() === fileLocationEnum.AWS) {
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4 p-4 bg-surface-ground rounded-lg border border-surface">
+            <div class="md:col-span-2 mb-2">
+              <span class="text-sm font-semibold text-muted-color uppercase tracking-wide">AWS S3 Configuration</span>
+            </div>
             <div class="field">
-              <label for="awsRegion" class="block font-medium mb-2">AWS Region *</label>
+              <label for="awsRegion" class="block font-medium mb-2 text-sm sm:text-base">AWS Region *</label>
               <input pInputText id="awsRegion" [formField]="configForm.awsRegion" placeholder="us-east-1" class="w-full" />
             </div>
             <div class="field">
-              <label for="awsBucket" class="block font-medium mb-2">Bucket Name *</label>
+              <label for="awsBucket" class="block font-medium mb-2 text-sm sm:text-base">Bucket Name *</label>
               <input pInputText id="awsBucket" [formField]="configForm.awsBucket" placeholder="my-bucket" class="w-full" />
             </div>
             <div class="field">
-              <label for="awsAccessKeyId" class="block font-medium mb-2">Access Key ID *</label>
+              <label for="awsAccessKeyId" class="block font-medium mb-2 text-sm sm:text-base">Access Key ID *</label>
               <input pInputText id="awsAccessKeyId" [formField]="configForm.awsAccessKeyId" class="w-full" />
             </div>
             <div class="field">
-              <label for="awsSecretAccessKey" class="block font-medium mb-2">Secret Access Key *</label>
+              <label for="awsSecretAccessKey" class="block font-medium mb-2 text-sm sm:text-base">Secret Access Key *</label>
               <input type="password" pInputText id="awsSecretAccessKey" [formField]="configForm.awsSecretAccessKey" class="w-full" />
             </div>
             <div class="field md:col-span-2">
-              <label for="awsEndpoint" class="block font-medium mb-2">Custom Endpoint (Optional)</label>
+              <label for="awsEndpoint" class="block font-medium mb-2 text-sm sm:text-base">Custom Endpoint (Optional)</label>
               <input pInputText id="awsEndpoint" [formField]="configForm.awsEndpoint" placeholder="https://s3.custom-endpoint.com" class="w-full" />
             </div>
           </div>
         }
 
-        <!-- Azure Blob Fields -->
         @if (selectedProvider() === fileLocationEnum.AZURE) {
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4 p-4 bg-surface-ground rounded-lg border border-surface">
+            <div class="md:col-span-2 mb-2">
+              <span class="text-sm font-semibold text-muted-color uppercase tracking-wide">Azure Blob Configuration</span>
+            </div>
             <div class="field">
-              <label for="azureAccountName" class="block font-medium mb-2">Account Name *</label>
+              <label for="azureAccountName" class="block font-medium mb-2 text-sm sm:text-base">Account Name *</label>
               <input pInputText id="azureAccountName" [formField]="configForm.azureAccountName" class="w-full" />
             </div>
             <div class="field">
-              <label for="azureContainerName" class="block font-medium mb-2">Container Name *</label>
+              <label for="azureContainerName" class="block font-medium mb-2 text-sm sm:text-base">Container Name *</label>
               <input pInputText id="azureContainerName" [formField]="configForm.azureContainerName" class="w-full" />
             </div>
             <div class="field md:col-span-2">
-              <label for="azureAccountKey" class="block font-medium mb-2">Account Key *</label>
+              <label for="azureAccountKey" class="block font-medium mb-2 text-sm sm:text-base">Account Key *</label>
               <input type="password" pInputText id="azureAccountKey" [formField]="configForm.azureAccountKey" class="w-full" />
             </div>
           </div>
         }
 
-        <!-- SFTP Fields -->
         @if (selectedProvider() === fileLocationEnum.SFTP) {
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4 p-4 bg-surface-ground rounded-lg border border-surface">
+            <div class="md:col-span-2 mb-2">
+              <span class="text-sm font-semibold text-muted-color uppercase tracking-wide">SFTP Configuration</span>
+            </div>
             <div class="field">
-              <label for="sftpHost" class="block font-medium mb-2">Host *</label>
+              <label for="sftpHost" class="block font-medium mb-2 text-sm sm:text-base">Host *</label>
               <input pInputText id="sftpHost" [formField]="configForm.sftpHost" placeholder="sftp.example.com" class="w-full" />
             </div>
             <div class="field">
-              <label for="sftpPort" class="block font-medium mb-2">Port *</label>
+              <label for="sftpPort" class="block font-medium mb-2 text-sm sm:text-base">Port *</label>
               <input type="number" pInputText id="sftpPort" [formField]="configForm.sftpPort" placeholder="22" class="w-full" />
             </div>
             <div class="field">
-              <label for="sftpUsername" class="block font-medium mb-2">Username *</label>
+              <label for="sftpUsername" class="block font-medium mb-2 text-sm sm:text-base">Username *</label>
               <input pInputText id="sftpUsername" [formField]="configForm.sftpUsername" class="w-full" />
             </div>
             <div class="field">
-              <label for="sftpPassword" class="block font-medium mb-2">Password *</label>
+              <label for="sftpPassword" class="block font-medium mb-2 text-sm sm:text-base">Password *</label>
               <input type="password" pInputText id="sftpPassword" [formField]="configForm.sftpPassword" class="w-full" />
             </div>
             <div class="field md:col-span-2">
-              <label for="sftpBasePath" class="block font-medium mb-2">Base Path *</label>
+              <label for="sftpBasePath" class="block font-medium mb-2 text-sm sm:text-base">Base Path *</label>
               <input pInputText id="sftpBasePath" [formField]="configForm.sftpBasePath" placeholder="/uploads" class="w-full" />
             </div>
           </div>
         }
 
-        <!-- Local Fields -->
         @if (selectedProvider() === fileLocationEnum.LOCAL) {
-          <div class="grid grid-cols-1 gap-4 mt-4">
+          <div class="grid grid-cols-1 gap-4 mt-4 p-4 bg-surface-ground rounded-lg border border-surface">
+            <div class="mb-2">
+              <span class="text-sm font-semibold text-muted-color uppercase tracking-wide">Local Storage Configuration</span>
+            </div>
             <div class="field">
-              <label for="localBasePath" class="block font-medium mb-2">Base Path *</label>
+              <label for="localBasePath" class="block font-medium mb-2 text-sm sm:text-base">Base Path *</label>
               <input pInputText id="localBasePath" [formField]="configForm.localBasePath" placeholder="/var/www/uploads" class="w-full" />
             </div>
           </div>
         }
 
-        <div class="flex gap-2 mt-4">
-          <p-button
-            type="submit"
-            [label]="isEditMode() ? 'Update' : 'Create'"
-            icon="pi pi-check"
-            [loading]="isLoading()"
-            [disabled]="!isFormValid() || isLoading()" />
-          <p-button
-            type="button"
-            label="Cancel"
-            severity="secondary"
-            icon="pi pi-times"
-            [text]="true"
-            (onClick)="onCancel()" />
+        <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' : 'Create'" [loading]="isLoading()" [disabled]="!isFormValid() || 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: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i4.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { 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: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i4.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { 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: StorageConfigFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-storage-config-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 Storage Configuration' : 'New Storage Configuration' }}
-          </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>
+      <h3 class="text-lg sm:text-xl font-semibold mb-4">
+        {{ isEditMode() ? 'Edit Storage Configuration' : 'New Storage Configuration' }}
+      </h3>
+      @if (showCompanyInfo()) {
+        <p class="text-sm text-muted-color mb-4">Company: {{ currentCompanyName() }}</p>
+      }
 
       <form (ngSubmit)="onSubmit()">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <!-- Name -->
-          <div class="field md:col-span-2">
-            <label for="name" class="block font-medium mb-2">Configuration Name *</label>
-            <input
-              pInputText
-              id="name"
-              [formField]="configForm.name"
-              placeholder="e.g., Production AWS S3"
-              class="w-full" />
+          <div class="field">
+            <label for="name" class="block font-medium mb-2 text-sm sm:text-base">Configuration Name *</label>
+            <input pInputText id="name" [formField]="configForm.name" placeholder="e.g., Production AWS S3" class="w-full" />
           </div>
 
-          <!-- Storage Provider -->
-          <div class="field md:col-span-2">
-            <label for="storage" class="block font-medium mb-2">Storage Provider *</label>
-            <select
-              id="storage"
-              class="p-select-native"
-              [formField]="configForm.storage">
+          <div class="field">
+            <label for="storage" class="block font-medium mb-2 text-sm sm:text-base">Storage Provider *</label>
+            <select id="storage" class="p-select-native w-full" [formField]="configForm.storage">
               @for (provider of storageProviders; track provider.value) {
                 <option [value]="provider.value">{{ provider.label }}</option>
               }
             </select>
           </div>
 
-          <!-- Active Toggle -->
           <div class="field flex items-center gap-2">
             <p-toggleswitch [formField]="configForm.isActive" />
-            <label>Active</label>
+            <label class="text-sm sm:text-base">Active</label>
           </div>
 
-          <!-- Default Toggle -->
           <div class="field flex items-center gap-2">
             <p-toggleswitch [formField]="configForm.isDefault" />
-            <label>Set as Default</label>
+            <label class="text-sm sm:text-base">Set as Default</label>
           </div>
         </div>
 
-        <!-- AWS S3 Fields -->
         @if (selectedProvider() === fileLocationEnum.AWS) {
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4 p-4 bg-surface-ground rounded-lg border border-surface">
+            <div class="md:col-span-2 mb-2">
+              <span class="text-sm font-semibold text-muted-color uppercase tracking-wide">AWS S3 Configuration</span>
+            </div>
             <div class="field">
-              <label for="awsRegion" class="block font-medium mb-2">AWS Region *</label>
+              <label for="awsRegion" class="block font-medium mb-2 text-sm sm:text-base">AWS Region *</label>
               <input pInputText id="awsRegion" [formField]="configForm.awsRegion" placeholder="us-east-1" class="w-full" />
             </div>
             <div class="field">
-              <label for="awsBucket" class="block font-medium mb-2">Bucket Name *</label>
+              <label for="awsBucket" class="block font-medium mb-2 text-sm sm:text-base">Bucket Name *</label>
               <input pInputText id="awsBucket" [formField]="configForm.awsBucket" placeholder="my-bucket" class="w-full" />
             </div>
             <div class="field">
-              <label for="awsAccessKeyId" class="block font-medium mb-2">Access Key ID *</label>
+              <label for="awsAccessKeyId" class="block font-medium mb-2 text-sm sm:text-base">Access Key ID *</label>
               <input pInputText id="awsAccessKeyId" [formField]="configForm.awsAccessKeyId" class="w-full" />
             </div>
             <div class="field">
-              <label for="awsSecretAccessKey" class="block font-medium mb-2">Secret Access Key *</label>
+              <label for="awsSecretAccessKey" class="block font-medium mb-2 text-sm sm:text-base">Secret Access Key *</label>
               <input type="password" pInputText id="awsSecretAccessKey" [formField]="configForm.awsSecretAccessKey" class="w-full" />
             </div>
             <div class="field md:col-span-2">
-              <label for="awsEndpoint" class="block font-medium mb-2">Custom Endpoint (Optional)</label>
+              <label for="awsEndpoint" class="block font-medium mb-2 text-sm sm:text-base">Custom Endpoint (Optional)</label>
               <input pInputText id="awsEndpoint" [formField]="configForm.awsEndpoint" placeholder="https://s3.custom-endpoint.com" class="w-full" />
             </div>
           </div>
         }
 
-        <!-- Azure Blob Fields -->
         @if (selectedProvider() === fileLocationEnum.AZURE) {
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4 p-4 bg-surface-ground rounded-lg border border-surface">
+            <div class="md:col-span-2 mb-2">
+              <span class="text-sm font-semibold text-muted-color uppercase tracking-wide">Azure Blob Configuration</span>
+            </div>
             <div class="field">
-              <label for="azureAccountName" class="block font-medium mb-2">Account Name *</label>
+              <label for="azureAccountName" class="block font-medium mb-2 text-sm sm:text-base">Account Name *</label>
               <input pInputText id="azureAccountName" [formField]="configForm.azureAccountName" class="w-full" />
             </div>
             <div class="field">
-              <label for="azureContainerName" class="block font-medium mb-2">Container Name *</label>
+              <label for="azureContainerName" class="block font-medium mb-2 text-sm sm:text-base">Container Name *</label>
               <input pInputText id="azureContainerName" [formField]="configForm.azureContainerName" class="w-full" />
             </div>
             <div class="field md:col-span-2">
-              <label for="azureAccountKey" class="block font-medium mb-2">Account Key *</label>
+              <label for="azureAccountKey" class="block font-medium mb-2 text-sm sm:text-base">Account Key *</label>
               <input type="password" pInputText id="azureAccountKey" [formField]="configForm.azureAccountKey" class="w-full" />
             </div>
           </div>
         }
 
-        <!-- SFTP Fields -->
         @if (selectedProvider() === fileLocationEnum.SFTP) {
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4 p-4 bg-surface-ground rounded-lg border border-surface">
+            <div class="md:col-span-2 mb-2">
+              <span class="text-sm font-semibold text-muted-color uppercase tracking-wide">SFTP Configuration</span>
+            </div>
             <div class="field">
-              <label for="sftpHost" class="block font-medium mb-2">Host *</label>
+              <label for="sftpHost" class="block font-medium mb-2 text-sm sm:text-base">Host *</label>
               <input pInputText id="sftpHost" [formField]="configForm.sftpHost" placeholder="sftp.example.com" class="w-full" />
             </div>
             <div class="field">
-              <label for="sftpPort" class="block font-medium mb-2">Port *</label>
+              <label for="sftpPort" class="block font-medium mb-2 text-sm sm:text-base">Port *</label>
               <input type="number" pInputText id="sftpPort" [formField]="configForm.sftpPort" placeholder="22" class="w-full" />
             </div>
             <div class="field">
-              <label for="sftpUsername" class="block font-medium mb-2">Username *</label>
+              <label for="sftpUsername" class="block font-medium mb-2 text-sm sm:text-base">Username *</label>
               <input pInputText id="sftpUsername" [formField]="configForm.sftpUsername" class="w-full" />
             </div>
             <div class="field">
-              <label for="sftpPassword" class="block font-medium mb-2">Password *</label>
+              <label for="sftpPassword" class="block font-medium mb-2 text-sm sm:text-base">Password *</label>
               <input type="password" pInputText id="sftpPassword" [formField]="configForm.sftpPassword" class="w-full" />
             </div>
             <div class="field md:col-span-2">
-              <label for="sftpBasePath" class="block font-medium mb-2">Base Path *</label>
+              <label for="sftpBasePath" class="block font-medium mb-2 text-sm sm:text-base">Base Path *</label>
               <input pInputText id="sftpBasePath" [formField]="configForm.sftpBasePath" placeholder="/uploads" class="w-full" />
             </div>
           </div>
         }
 
-        <!-- Local Fields -->
         @if (selectedProvider() === fileLocationEnum.LOCAL) {
-          <div class="grid grid-cols-1 gap-4 mt-4">
+          <div class="grid grid-cols-1 gap-4 mt-4 p-4 bg-surface-ground rounded-lg border border-surface">
+            <div class="mb-2">
+              <span class="text-sm font-semibold text-muted-color uppercase tracking-wide">Local Storage Configuration</span>
+            </div>
             <div class="field">
-              <label for="localBasePath" class="block font-medium mb-2">Base Path *</label>
+              <label for="localBasePath" class="block font-medium mb-2 text-sm sm:text-base">Base Path *</label>
               <input pInputText id="localBasePath" [formField]="configForm.localBasePath" placeholder="/var/www/uploads" class="w-full" />
             </div>
           </div>
         }
 
-        <div class="flex gap-2 mt-4">
-          <p-button
-            type="submit"
-            [label]="isEditMode() ? 'Update' : 'Create'"
-            icon="pi pi-check"
-            [loading]="isLoading()"
-            [disabled]="!isFormValid() || isLoading()" />
-          <p-button
-            type="button"
-            label="Cancel"
-            severity="secondary"
-            icon="pi pi-times"
-            [text]="true"
-            (onClick)="onCancel()" />
+        <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' : 'Create'" [loading]="isLoading()" [disabled]="!isFormValid() || isLoading()" />
         </div>
       </form>
     </div>
   `,
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 export { StorageConfigFormComponent };
-//# sourceMappingURL=flusys-ng-storage-storage-config-form.component-CjIAxfHC.mjs.map
+//# sourceMappingURL=flusys-ng-storage-storage-config-form.component-DEMexjmg.mjs.map