@flusys/ng-storage 4.1.1 → 5.0.0

package/fesm2022/flusys-ng-storage-storage-config-form.component-CMeTif8p.mjs

@@ -0,0 +1,880 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, effect, Component } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { form, required, FormField } from '@angular/forms/signals';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateService } from '@flusys/ng-localization';
+import { AngularModule, PrimeModule, TranslatePipe } from '@flusys/ng-shared';
+import { FileLocationEnum, BaseStoragePage, StorageConfigApiService, STORAGE_PROVIDER_OPTIONS } 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';
+
+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);
+    configService = inject(StorageConfigApiService);
+    translateService = inject(TranslateService);
+    routeParams = toSignal(this.route.paramMap);
+    initialized = false;
+    fileLocationEnum = FileLocationEnum;
+    storageProviderOptions = STORAGE_PROVIDER_OPTIONS;
+    existingConfig = signal(null, ...(ngDevMode ? [{ debugName: "existingConfig" }] : []));
+    isEditMode = computed(() => !!this.existingConfig(), ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    formModel = signal({
+        ...DEFAULT_FORM_MODEL,
+    }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
+    configForm = form(this.formModel, (f) => {
+        required(f.name, {
+            message: this.translateService.translate('storage.validation.config.name.required'),
+        });
+    });
+    selectedProvider = computed(() => this.formModel().storage, ...(ngDevMode ? [{ debugName: "selectedProvider" }] : []));
+    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);
+        try {
+            const response = await this.configService.findById(id);
+            if (response.success && response.data) {
+                const config = response.data;
+                this.existingConfig.set(config);
+                this.formModel.update((m) => ({
+                    ...m,
+                    id: config.id,
+                    name: config.name,
+                    storage: config.storage,
+                    isActive: config.isActive ?? true,
+                    isDefault: config.isDefault ?? false,
+                    ...this.extractProviderConfig(config),
+                }));
+            }
+        }
+        catch {
+            this.navigateTo(['/storage/configs']);
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    async onSubmit() {
+        if (!this.isFormValid())
+            return;
+        this.isLoading.set(true);
+        try {
+            const formValue = this.formModel();
+            const config = this.buildProviderConfig(formValue);
+            const response = this.isEditMode()
+                ? await this.configService.update({
+                    id: formValue.id,
+                    name: formValue.name,
+                    storage: formValue.storage,
+                    config,
+                    isActive: formValue.isActive,
+                    isDefault: formValue.isDefault,
+                })
+                : await this.configService.insert({
+                    name: formValue.name,
+                    storage: formValue.storage,
+                    config,
+                    isActive: formValue.isActive,
+                    isDefault: formValue.isDefault,
+                });
+            this.showSuccess(response.messageKey
+                ? this.translateService.translate(response.messageKey, response.messageVariables)
+                : (response.message ?? ''));
+            this.navigateTo(['/storage/configs']);
+        }
+        catch {
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    onCancel() {
+        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.5", ngImport: i0, type: StorageConfigFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: StorageConfigFormComponent, isStandalone: true, selector: "lib-storage-config-form", usesInheritance: true, ngImport: i0, template: `
+    <div class="card">
+      <h3 class="text-lg sm:text-xl font-semibold mb-4">
+        {{
+          (isEditMode()
+            ? 'storage.config.edit.config'
+            : 'storage.config.new.config'
+          ) | translate
+        }}
+      </h3>
+      @if (showCompanyInfo()) {
+        <p class="text-sm text-muted-color mb-4">
+          {{ 'shared.company' | translate }}: {{ currentCompanyName() }}
+        </p>
+      }
+
+      <form (ngSubmit)="onSubmit()">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="field">
+            <label
+              for="name"
+              class="block font-medium mb-2 text-sm sm:text-base"
+              >{{ 'storage.config.config.name.required' | translate }}</label
+            >
+            <input
+              pInputText
+              id="name"
+              [formField]="configForm.name"
+              [placeholder]="
+                'storage.config.config.name.placeholder' | translate
+              "
+              class="w-full"
+            />
+          </div>
+
+          <div class="field">
+            <label
+              for="storage"
+              class="block font-medium mb-2 text-sm sm:text-base"
+              >{{ 'storage.config.provider.required' | translate }}</label
+            >
+            <select
+              id="storage"
+              class="p-select-native w-full"
+              [formField]="configForm.storage"
+            >
+              @for (provider of storageProviderOptions; track provider.value) {
+                <option [value]="provider.value">
+                  {{ provider.labelKey | translate }}
+                </option>
+              }
+            </select>
+          </div>
+
+          <div class="field flex items-center gap-2">
+            <p-toggleswitch [formField]="configForm.isActive" />
+            <label class="text-sm sm:text-base">{{
+              'shared.active' | translate
+            }}</label>
+          </div>
+
+          <div class="field flex items-center gap-2">
+            <p-toggleswitch [formField]="configForm.isDefault" />
+            <label class="text-sm sm:text-base">{{
+              'storage.set.as.default' | translate
+            }}</label>
+          </div>
+        </div>
+
+        @if (selectedProvider() === fileLocationEnum.AWS) {
+          <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"
+                >{{ 'storage.aws.title' | translate }}</span
+              >
+            </div>
+            <div class="field">
+              <label
+                for="awsRegion"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.config.region.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="awsRegion"
+                [formField]="configForm.awsRegion"
+                [placeholder]="'storage.aws.region.placeholder' | translate"
+                class="w-full"
+              />
+            </div>
+            <div class="field">
+              <label
+                for="awsBucket"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.config.bucket.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="awsBucket"
+                [formField]="configForm.awsBucket"
+                [placeholder]="'storage.aws.bucket.placeholder' | translate"
+                class="w-full"
+              />
+            </div>
+            <div class="field">
+              <label
+                for="awsAccessKeyId"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.config.access.key.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="awsAccessKeyId"
+                [formField]="configForm.awsAccessKeyId"
+                class="w-full"
+              />
+            </div>
+            <div class="field">
+              <label
+                for="awsSecretAccessKey"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.config.secret.key.required' | translate }}</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 text-sm sm:text-base"
+                >{{ 'storage.config.endpoint.optional' | translate }}</label
+              >
+              <input
+                pInputText
+                id="awsEndpoint"
+                [formField]="configForm.awsEndpoint"
+                [placeholder]="
+                  'storage.config.endpoint.placeholder' | translate
+                "
+                class="w-full"
+              />
+            </div>
+          </div>
+        }
+
+        @if (selectedProvider() === fileLocationEnum.AZURE) {
+          <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"
+                >{{ 'storage.azure.title' | translate }}</span
+              >
+            </div>
+            <div class="field">
+              <label
+                for="azureAccountName"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.azure.account.name.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="azureAccountName"
+                [formField]="configForm.azureAccountName"
+                class="w-full"
+              />
+            </div>
+            <div class="field">
+              <label
+                for="azureContainerName"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{
+                  'storage.azure.container.name.required' | translate
+                }}</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 text-sm sm:text-base"
+                >{{ 'storage.azure.account.key.required' | translate }}</label
+              >
+              <input
+                type="password"
+                pInputText
+                id="azureAccountKey"
+                [formField]="configForm.azureAccountKey"
+                class="w-full"
+              />
+            </div>
+          </div>
+        }
+
+        @if (selectedProvider() === fileLocationEnum.SFTP) {
+          <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"
+                >{{ 'storage.sftp.title' | translate }}</span
+              >
+            </div>
+            <div class="field">
+              <label
+                for="sftpHost"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.sftp.host.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="sftpHost"
+                [formField]="configForm.sftpHost"
+                [placeholder]="'storage.sftp.host.placeholder' | translate"
+                class="w-full"
+              />
+            </div>
+            <div class="field">
+              <label
+                for="sftpPort"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.sftp.port.required' | translate }}</label
+              >
+              <input
+                type="number"
+                pInputText
+                id="sftpPort"
+                [formField]="configForm.sftpPort"
+                [placeholder]="'storage.sftp.port.placeholder' | translate"
+                class="w-full"
+              />
+            </div>
+            <div class="field">
+              <label
+                for="sftpUsername"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.sftp.username.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="sftpUsername"
+                [formField]="configForm.sftpUsername"
+                class="w-full"
+              />
+            </div>
+            <div class="field">
+              <label
+                for="sftpPassword"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.sftp.password.required' | translate }}</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 text-sm sm:text-base"
+                >{{ 'storage.sftp.base.path.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="sftpBasePath"
+                [formField]="configForm.sftpBasePath"
+                [placeholder]="'storage.sftp.base.path.placeholder' | translate"
+                class="w-full"
+              />
+            </div>
+          </div>
+        }
+
+        @if (selectedProvider() === fileLocationEnum.LOCAL) {
+          <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"
+                >{{ 'storage.local.title' | translate }}</span
+              >
+            </div>
+            <div class="field">
+              <label
+                for="localBasePath"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.local.base.path.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="localBasePath"
+                [formField]="configForm.localBasePath"
+                [placeholder]="
+                  'storage.local.base.path.placeholder' | translate
+                "
+                class="w-full"
+              />
+            </div>
+          </div>
+        }
+
+        <div class="flex justify-end gap-2 mt-4">
+          <p-button
+            [label]="'shared.cancel' | translate"
+            severity="secondary"
+            [outlined]="true"
+            (onClick)="onCancel()"
+          />
+          <p-button
+            type="submit"
+            [label]="
+              (isEditMode() ? 'shared.update' : 'shared.create') | translate
+            "
+            [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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: StorageConfigFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-storage-config-form',
+                    imports: [AngularModule, PrimeModule, FormField, TranslatePipe],
+                    template: `
+    <div class="card">
+      <h3 class="text-lg sm:text-xl font-semibold mb-4">
+        {{
+          (isEditMode()
+            ? 'storage.config.edit.config'
+            : 'storage.config.new.config'
+          ) | translate
+        }}
+      </h3>
+      @if (showCompanyInfo()) {
+        <p class="text-sm text-muted-color mb-4">
+          {{ 'shared.company' | translate }}: {{ currentCompanyName() }}
+        </p>
+      }
+
+      <form (ngSubmit)="onSubmit()">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="field">
+            <label
+              for="name"
+              class="block font-medium mb-2 text-sm sm:text-base"
+              >{{ 'storage.config.config.name.required' | translate }}</label
+            >
+            <input
+              pInputText
+              id="name"
+              [formField]="configForm.name"
+              [placeholder]="
+                'storage.config.config.name.placeholder' | translate
+              "
+              class="w-full"
+            />
+          </div>
+
+          <div class="field">
+            <label
+              for="storage"
+              class="block font-medium mb-2 text-sm sm:text-base"
+              >{{ 'storage.config.provider.required' | translate }}</label
+            >
+            <select
+              id="storage"
+              class="p-select-native w-full"
+              [formField]="configForm.storage"
+            >
+              @for (provider of storageProviderOptions; track provider.value) {
+                <option [value]="provider.value">
+                  {{ provider.labelKey | translate }}
+                </option>
+              }
+            </select>
+          </div>
+
+          <div class="field flex items-center gap-2">
+            <p-toggleswitch [formField]="configForm.isActive" />
+            <label class="text-sm sm:text-base">{{
+              'shared.active' | translate
+            }}</label>
+          </div>
+
+          <div class="field flex items-center gap-2">
+            <p-toggleswitch [formField]="configForm.isDefault" />
+            <label class="text-sm sm:text-base">{{
+              'storage.set.as.default' | translate
+            }}</label>
+          </div>
+        </div>
+
+        @if (selectedProvider() === fileLocationEnum.AWS) {
+          <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"
+                >{{ 'storage.aws.title' | translate }}</span
+              >
+            </div>
+            <div class="field">
+              <label
+                for="awsRegion"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.config.region.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="awsRegion"
+                [formField]="configForm.awsRegion"
+                [placeholder]="'storage.aws.region.placeholder' | translate"
+                class="w-full"
+              />
+            </div>
+            <div class="field">
+              <label
+                for="awsBucket"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.config.bucket.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="awsBucket"
+                [formField]="configForm.awsBucket"
+                [placeholder]="'storage.aws.bucket.placeholder' | translate"
+                class="w-full"
+              />
+            </div>
+            <div class="field">
+              <label
+                for="awsAccessKeyId"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.config.access.key.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="awsAccessKeyId"
+                [formField]="configForm.awsAccessKeyId"
+                class="w-full"
+              />
+            </div>
+            <div class="field">
+              <label
+                for="awsSecretAccessKey"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.config.secret.key.required' | translate }}</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 text-sm sm:text-base"
+                >{{ 'storage.config.endpoint.optional' | translate }}</label
+              >
+              <input
+                pInputText
+                id="awsEndpoint"
+                [formField]="configForm.awsEndpoint"
+                [placeholder]="
+                  'storage.config.endpoint.placeholder' | translate
+                "
+                class="w-full"
+              />
+            </div>
+          </div>
+        }
+
+        @if (selectedProvider() === fileLocationEnum.AZURE) {
+          <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"
+                >{{ 'storage.azure.title' | translate }}</span
+              >
+            </div>
+            <div class="field">
+              <label
+                for="azureAccountName"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.azure.account.name.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="azureAccountName"
+                [formField]="configForm.azureAccountName"
+                class="w-full"
+              />
+            </div>
+            <div class="field">
+              <label
+                for="azureContainerName"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{
+                  'storage.azure.container.name.required' | translate
+                }}</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 text-sm sm:text-base"
+                >{{ 'storage.azure.account.key.required' | translate }}</label
+              >
+              <input
+                type="password"
+                pInputText
+                id="azureAccountKey"
+                [formField]="configForm.azureAccountKey"
+                class="w-full"
+              />
+            </div>
+          </div>
+        }
+
+        @if (selectedProvider() === fileLocationEnum.SFTP) {
+          <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"
+                >{{ 'storage.sftp.title' | translate }}</span
+              >
+            </div>
+            <div class="field">
+              <label
+                for="sftpHost"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.sftp.host.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="sftpHost"
+                [formField]="configForm.sftpHost"
+                [placeholder]="'storage.sftp.host.placeholder' | translate"
+                class="w-full"
+              />
+            </div>
+            <div class="field">
+              <label
+                for="sftpPort"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.sftp.port.required' | translate }}</label
+              >
+              <input
+                type="number"
+                pInputText
+                id="sftpPort"
+                [formField]="configForm.sftpPort"
+                [placeholder]="'storage.sftp.port.placeholder' | translate"
+                class="w-full"
+              />
+            </div>
+            <div class="field">
+              <label
+                for="sftpUsername"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.sftp.username.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="sftpUsername"
+                [formField]="configForm.sftpUsername"
+                class="w-full"
+              />
+            </div>
+            <div class="field">
+              <label
+                for="sftpPassword"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.sftp.password.required' | translate }}</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 text-sm sm:text-base"
+                >{{ 'storage.sftp.base.path.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="sftpBasePath"
+                [formField]="configForm.sftpBasePath"
+                [placeholder]="'storage.sftp.base.path.placeholder' | translate"
+                class="w-full"
+              />
+            </div>
+          </div>
+        }
+
+        @if (selectedProvider() === fileLocationEnum.LOCAL) {
+          <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"
+                >{{ 'storage.local.title' | translate }}</span
+              >
+            </div>
+            <div class="field">
+              <label
+                for="localBasePath"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.local.base.path.required' | translate }}</label
+              >
+              <input
+                pInputText
+                id="localBasePath"
+                [formField]="configForm.localBasePath"
+                [placeholder]="
+                  'storage.local.base.path.placeholder' | translate
+                "
+                class="w-full"
+              />
+            </div>
+          </div>
+        }
+
+        <div class="flex justify-end gap-2 mt-4">
+          <p-button
+            [label]="'shared.cancel' | translate"
+            severity="secondary"
+            [outlined]="true"
+            (onClick)="onCancel()"
+          />
+          <p-button
+            type="submit"
+            [label]="
+              (isEditMode() ? 'shared.update' : 'shared.create') | translate
+            "
+            [loading]="isLoading()"
+            [disabled]="!isFormValid() || isLoading()"
+          />
+        </div>
+      </form>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+export { StorageConfigFormComponent };
+//# sourceMappingURL=flusys-ng-storage-storage-config-form.component-CMeTif8p.mjs.map