@flusys/ng-storage 1.0.0-beta → 1.0.0-rc

package/fesm2022/{flusys-ng-storage-storage-config-form.component-Bc95TVD0.mjs → flusys-ng-storage-storage-config-form.component-CODLLCtg.mjs}

@@ -1,80 +1,70 @@
 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 { BaseStoragePage, StorageConfigApiService, FileLocationEnum, STORAGE_PROVIDERS } from './flusys-ng-storage.mjs';
 import * as i1 from '@angular/forms';
-import * as i2 from 'primeng/inputtext';
-import * as i3 from 'primeng/button';
+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);
+class StorageConfigFormComponent extends BaseStoragePage {
     route = inject(ActivatedRoute);
-    messageService = inject(MessageService);
     configService = inject(StorageConfigApiService);
-    appConfig = inject(APP_CONFIG);
+    // Route params as signal
+    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,
-        // AWS S3
+        isActive: true,
+        isDefault: false,
         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 */
+    /** Form with validation */
     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 to handle route-based initialization
+        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);
@@ -83,13 +73,13 @@ class StorageConfigFormComponent {
             if (response.success && response.data) {
                 const config = response.data;
                 this.existingConfig.set(config);
-                // Base form values
                 const formData = {
                     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'] || '';
@@ -115,13 +105,9 @@ class StorageConfigFormComponent {
                 this.formModel.update((m) => ({ ...m, ...formData }));
             }
         }
-        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);
@@ -133,381 +119,368 @@ 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,
                     name: formValue.name,
                     storage: formValue.storage,
                     config,
+                    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({
+                const createDto = {
                     name: formValue.name,
                     storage: formValue.storage,
                     config,
-                });
-                this.messageService.add({
-                    severity: 'success',
-                    summary: 'Success',
-                    detail: 'Storage configuration created successfully.',
-                });
+                    isActive: formValue.isActive,
+                    isDefault: formValue.isDefault,
+                };
+                await this.configService.insertAsync(createDto);
+                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']);
+    }
+    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-gray-600 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>
+
+          <div class="field flex items-center gap-2">
+            <p-toggleswitch [formField]="configForm.isActive" />
+            <label class="text-sm sm:text-base">Active</label>
+          </div>
+
+          <div class="field flex items-center gap-2">
+            <p-toggleswitch [formField]="configForm.isDefault" />
+            <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">
+        <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'"
-            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()" />
+            [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: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3.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: 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-gray-600 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>
+
+          <div class="field flex items-center gap-2">
+            <p-toggleswitch [formField]="configForm.isActive" />
+            <label class="text-sm sm:text-base">Active</label>
+          </div>
+
+          <div class="field flex items-center gap-2">
+            <p-toggleswitch [formField]="configForm.isDefault" />
+            <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">
+        <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'"
-            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()" />
+            [disabled]="!isFormValid() || isLoading()"
+          />
         </div>
       </form>
     </div>
   `,
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 export { StorageConfigFormComponent };
-//# sourceMappingURL=flusys-ng-storage-storage-config-form.component-Bc95TVD0.mjs.map
+//# sourceMappingURL=flusys-ng-storage-storage-config-form.component-CODLLCtg.mjs.map