@flusys/ng-storage 1.1.1-beta → 1.2.0-rc.1

package/fesm2022/flusys-ng-storage-file-manager-form.component-DhqZmpuX.mjs

@@ -0,0 +1,671 @@
+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, AngularModule, TranslatePipe } from '@flusys/ng-shared';
+import { firstValueFrom } from 'rxjs';
+import { BaseStoragePage, FileManagerApiService, UploadService, StorageConfigApiService, FolderApiService, formatFileSize, getProviderLabelKey } from './flusys-ng-storage.mjs';
+import * as i1$1 from '@flusys/ng-ui';
+import { UiModule } from '@flusys/ng-ui';
+import * as i1 from '@angular/forms';
+
+class FileManagerFormComponent extends BaseStoragePage {
+    route = inject(ActivatedRoute);
+    fileService = inject(FileManagerApiService);
+    uploadService = inject(UploadService);
+    configService = inject(StorageConfigApiService);
+    folderService = inject(FolderApiService);
+    translateService = inject(TranslateService);
+    routeParams = toSignal(this.route.paramMap);
+    initialized = false;
+    isLoadingConfigs = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoadingConfigs" }] : /* istanbul ignore next */ []));
+    isLoadingFolders = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoadingFolders" }] : /* istanbul ignore next */ []));
+    existingFile = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "existingFile" }] : /* istanbul ignore next */ []));
+    isEditMode = computed(() => !!this.existingFile(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
+    selectedFile = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedFile" }] : /* istanbul ignore next */ []));
+    availableConfigs = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "availableConfigs" }] : /* istanbul ignore next */ []));
+    availableFolders = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "availableFolders" }] : /* istanbul ignore next */ []));
+    formatFileSize = formatFileSize;
+    getProviderLabelKey = getProviderLabelKey;
+    formModel = signal({
+        id: '',
+        name: '',
+        isPrivate: false,
+        folderId: '',
+        storageConfigId: '',
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formModel" }] : /* istanbul ignore next */ []));
+    fileForm = form(this.formModel, (f) => {
+        required(f.name, {
+            message: this.translateService.translate('storage.validation.file.name.required'),
+        });
+    });
+    isFormValid = computed(() => this.formModel().name.trim().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => {
+            const params = this.routeParams();
+            if (!params || this.initialized)
+                return;
+            this.initialized = true;
+            const fileId = params.get('id');
+            if (fileId) {
+                this.loadFile(fileId);
+            }
+            else {
+                this.loadStorageConfigs();
+            }
+            this.loadFolders();
+        });
+    }
+    async loadStorageConfigs() {
+        this.isLoadingConfigs.set(true);
+        try {
+            const response = await this.configService.getAll({
+                pagination: { currentPage: 0, pageSize: 100 },
+                filter: {},
+                select: [],
+                sort: {},
+            });
+            if (response.success && response.data) {
+                this.availableConfigs.set(response.data);
+                if (response.data.length === 1) {
+                    this.formModel.update((m) => ({
+                        ...m,
+                        storageConfigId: response.data[0].id,
+                    }));
+                }
+            }
+        }
+        finally {
+            this.isLoadingConfigs.set(false);
+        }
+    }
+    async loadFolders() {
+        this.isLoadingFolders.set(true);
+        try {
+            const response = await this.folderService.getAll({
+                pagination: { currentPage: 0, pageSize: 100 },
+                filter: {},
+                select: [],
+                sort: {},
+            });
+            if (response.success && response.data) {
+                this.availableFolders.set(response.data);
+            }
+        }
+        catch {
+            // Silently fail - folders are optional
+        }
+        finally {
+            this.isLoadingFolders.set(false);
+        }
+    }
+    async loadFile(id) {
+        this.isLoading.set(true);
+        try {
+            const response = await this.fileService.findById(id);
+            if (response.success && response.data) {
+                const file = response.data;
+                this.existingFile.set(file);
+                this.formModel.set({
+                    id: file.id,
+                    name: file.name,
+                    isPrivate: file.isPrivate ?? false,
+                    folderId: file.folderId ?? '',
+                    storageConfigId: '',
+                });
+            }
+        }
+        catch {
+            this.navigateTo(['/storage/files']);
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    onFileSelect(event) {
+        const file = event.files?.[0] || event.currentFiles?.[0];
+        if (file) {
+            this.selectedFile.set(file);
+            this.formModel.update((m) => ({ ...m, name: file.name }));
+        }
+    }
+    async onSubmit() {
+        if (!this.isFormValid())
+            return;
+        this.isLoading.set(true);
+        try {
+            const formValue = this.formModel();
+            if (this.isEditMode()) {
+                const response = await this.fileService.update({
+                    id: formValue.id,
+                    name: formValue.name,
+                    isPrivate: formValue.isPrivate,
+                    folderId: formValue.folderId || null,
+                });
+                this.showSuccess(response.messageKey
+                    ? this.translateService.translate(response.messageKey, response.messageVariables)
+                    : (response.message ?? ''));
+            }
+            else {
+                const file = this.selectedFile();
+                if (!file) {
+                    this.showError(this.translateService.translate('storage.error.no.file'));
+                    return;
+                }
+                if (!formValue.storageConfigId) {
+                    this.showError(this.translateService.translate('storage.error.no.config'));
+                    return;
+                }
+                const uploadResponse = await firstValueFrom(this.uploadService.uploadSingleFile(file, {
+                    compress: true,
+                    quality: 85,
+                    storageConfigId: formValue.storageConfigId,
+                }));
+                if (uploadResponse.success && uploadResponse.data) {
+                    const uploadedFileInfo = uploadResponse.data;
+                    const createResponse = await firstValueFrom(this.fileService.createFile({
+                        name: formValue.name,
+                        key: uploadedFileInfo.key,
+                        contentType: file.type || 'application/octet-stream',
+                        size: Math.round(file.size / 1024).toString(),
+                        isPrivate: formValue.isPrivate,
+                        folderId: formValue.folderId || undefined,
+                        storageConfigId: formValue.storageConfigId,
+                    }));
+                    this.showSuccess(createResponse?.messageKey
+                        ? this.translateService.translate(createResponse.messageKey, createResponse.messageVariables)
+                        : (createResponse?.message ?? ''));
+                }
+                else {
+                    throw new Error(this.translateService.translate('storage.upload.failed'));
+                }
+            }
+            this.navigateTo(['/storage/files']);
+        }
+        catch {
+            this.showError(this.translateService.translate('storage.upload.failed'));
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    onCancel() {
+        this.navigateTo(['/storage/files']);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileManagerFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FileManagerFormComponent, isStandalone: true, selector: "lib-file-manager-form", usesInheritance: true, ngImport: i0, template: `
+    <div class="card">
+      <div class="mb-4">
+        <h3 class="text-lg sm:text-xl font-semibold">
+          {{
+            (isEditMode()
+              ? 'storage.file.manager.edit.file'
+              : 'storage.file.manager.upload.file'
+            ) | translate
+          }}
+        </h3>
+        @if (showCompanyInfo()) {
+          <p class="text-sm text-muted-color mt-1">
+            {{ 'shared.company' | translate }}: {{ currentCompanyName() }}
+          </p>
+        }
+      </div>
+
+      <form (ngSubmit)="onSubmit()">
+        @if (!isEditMode()) {
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <div class="field">
+              <label
+                for="storageConfig"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.config.provider.required' | translate }}</label
+              >
+              <f-select
+                inputId="storageConfig"
+                [options]="availableConfigs()"
+                optionValue="id"
+                [formField]="fileForm.storageConfigId"
+                [placeholder]="'storage.config.select.config' | translate"
+              >
+                <ng-template #item let-config>{{ config.name }} ({{ getProviderLabelKey(config.storage) | translate }})</ng-template>
+                <ng-template #selectedItem let-config>{{ config.name }} ({{ getProviderLabelKey(config.storage) | translate }})</ng-template>
+              </f-select>
+              @if (availableConfigs().length === 0 && !isLoadingConfigs()) {
+                <small class="text-warn block mt-2">
+                  <ui-icon name="exclamation-triangle" class="mr-1"></ui-icon>
+                  {{ 'storage.config.no.configs' | translate }}
+                </small>
+              }
+            </div>
+
+            <div class="field">
+              <label
+                for="folder"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.folder.optional' | translate }}</label
+              >
+              <f-select
+                inputId="folder"
+                [options]="availableFolders()"
+                optionLabel="name"
+                optionValue="id"
+                [formField]="fileForm.folderId"
+                [placeholder]="'storage.folder.no.folder' | translate"
+              />
+              @if (availableFolders().length === 0 && !isLoadingFolders()) {
+                <small class="text-muted-color block mt-2">
+                  <ui-icon name="info-circle" class="mr-1"></ui-icon>
+                  {{ 'storage.folder.no.folders.available' | translate }}
+                </small>
+              }
+            </div>
+          </div>
+        } @else {
+          <div class="field mb-4">
+            <label
+              for="folder"
+              class="block font-medium mb-2 text-sm sm:text-base"
+              >{{ 'storage.folder.optional' | translate }}</label
+            >
+            <f-select
+              inputId="folder"
+              [options]="availableFolders()"
+              optionLabel="name"
+              optionValue="id"
+              [formField]="fileForm.folderId"
+              [placeholder]="'storage.folder.no.folder' | translate"
+            />
+            @if (availableFolders().length === 0 && !isLoadingFolders()) {
+              <small class="text-muted-color block mt-2">
+                <ui-icon name="info-circle" class="mr-1"></ui-icon>
+                {{ 'storage.folder.no.folders.edit' | translate }}
+              </small>
+            }
+          </div>
+        }
+
+        @if (!isEditMode()) {
+          <div class="field mb-4">
+            <label class="block font-medium mb-2 text-sm sm:text-base">{{
+              'storage.file.select.required' | translate
+            }}</label>
+            <f-fileupload
+              #fileUpload
+              [customUpload]="true"
+              (onSelect)="onFileSelect($event)"
+              [multiple]="false"
+              [maxFileSize]="50000000"
+              [showUploadButton]="false"
+              [showCancelButton]="false"
+              [chooseLabel]="'storage.button.choose.file' | translate"
+              chooseIcon="upload"
+              accept="*/*"
+              class="w-full"
+            >
+              <ng-template #content let-files>
+                @if (files && files.length > 0) {
+                  <div class="flex flex-col gap-2">
+                    @for (file of files; track file.name) {
+                      <div
+                        class="flex items-center gap-3 p-3 border border-surface rounded-lg bg-surface-ground"
+                      >
+                        <ui-icon name="file" class="text-xl sm:text-2xl text-primary"></ui-icon>
+                        <div class="flex-1 min-w-0">
+                          <div class="font-medium truncate">
+                            {{ file.name }}
+                          </div>
+                          <div class="text-sm text-muted-color">
+                            {{ formatFileSize(file.size) }}
+                          </div>
+                        </div>
+                        <button
+                          fButton
+                          [text]="true"
+                          severity="danger"
+                          size="small"
+                          (click)="fileUpload.clear()"
+                        >
+                          <ui-icon pButtonIcon name="times"></ui-icon>
+                        </button>
+                      </div>
+                    }
+                  </div>
+                } @else {
+                  <div
+                    class="flex items-center justify-center flex-col p-6 sm:p-8 border-2 border-dashed border-surface rounded-lg"
+                  >
+                    <ui-icon name="cloud-upload" class="text-3xl sm:text-4xl text-muted-color mb-3"></ui-icon>
+                    <p
+                      class="text-muted-color text-center text-sm sm:text-base"
+                    >
+                      {{ 'storage.upload.drag.drop' | translate }}
+                    </p>
+                    <p class="text-xs sm:text-sm text-muted-color mt-2">
+                      {{
+                        'storage.upload.max.size' | translate: { size: '50MB' }
+                      }}
+                    </p>
+                  </div>
+                }
+              </ng-template>
+            </f-fileupload>
+            @if (!selectedFile() && !isEditMode()) {
+              <small class="text-muted-color">{{
+                'storage.upload.please.select' | translate
+              }}</small>
+            }
+          </div>
+        }
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="field md:col-span-2">
+            <label
+              for="name"
+              class="block font-medium mb-2 text-sm sm:text-base"
+              >{{ 'storage.file.name.required' | translate }}</label
+            >
+            <input
+              fInputText
+              id="name"
+              [formField]="fileForm.name"
+              [placeholder]="
+                (isEditMode()
+                  ? 'storage.file.placeholder.edit'
+                  : 'storage.file.placeholder'
+                ) | translate
+              "
+              class="w-full"
+            />
+          </div>
+
+          <div class="field">
+            <f-checkbox [formField]="fileForm.isPrivate" [label]="'storage.file.private' | translate" />
+            <small class="text-muted-color block mt-2">
+              {{
+                (formModel().isPrivate
+                  ? 'storage.file.private.hint'
+                  : 'storage.file.public.hint'
+                ) | translate
+              }}
+            </small>
+          </div>
+        </div>
+
+        <div class="flex justify-end gap-2 mt-4">
+          <button
+            fButton
+            severity="secondary"
+            [outlined]="true"
+            (click)="onCancel()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            type="submit"
+            [disabled]="
+              !isFormValid() ||
+              (!isEditMode() && !selectedFile()) ||
+              isLoading()
+            "
+          >
+            @if (isLoading()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 
+              (isEditMode() ? 'shared.update' : 'shared.upload') | translate
+             }}</span>
+          </button>
+        </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.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: UiModule }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1$1.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "readonly", "inputId", "invalid", "indeterminate", "variant", "size", "touched", "styleClass", "style", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: i1$1.FileUploadComponent, selector: "f-fileupload", inputs: ["name", "accept", "multiple", "auto", "maxFileSize", "fileLimit", "disabled", "url", "headers", "customUpload", "showUploadButton", "showCancelButton", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "previewWidth", "styleClass", "style", "mode"], outputs: ["onSelect", "onRemove", "onClear", "onError", "onUpload", "onProgress", "uploadHandler"] }, { kind: "directive", type: i1$1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1$1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "component", type: i1$1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileManagerFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-file-manager-form',
+                    imports: [AngularModule, UiModule, FormField, TranslatePipe],
+                    template: `
+    <div class="card">
+      <div class="mb-4">
+        <h3 class="text-lg sm:text-xl font-semibold">
+          {{
+            (isEditMode()
+              ? 'storage.file.manager.edit.file'
+              : 'storage.file.manager.upload.file'
+            ) | translate
+          }}
+        </h3>
+        @if (showCompanyInfo()) {
+          <p class="text-sm text-muted-color mt-1">
+            {{ 'shared.company' | translate }}: {{ currentCompanyName() }}
+          </p>
+        }
+      </div>
+
+      <form (ngSubmit)="onSubmit()">
+        @if (!isEditMode()) {
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <div class="field">
+              <label
+                for="storageConfig"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.config.provider.required' | translate }}</label
+              >
+              <f-select
+                inputId="storageConfig"
+                [options]="availableConfigs()"
+                optionValue="id"
+                [formField]="fileForm.storageConfigId"
+                [placeholder]="'storage.config.select.config' | translate"
+              >
+                <ng-template #item let-config>{{ config.name }} ({{ getProviderLabelKey(config.storage) | translate }})</ng-template>
+                <ng-template #selectedItem let-config>{{ config.name }} ({{ getProviderLabelKey(config.storage) | translate }})</ng-template>
+              </f-select>
+              @if (availableConfigs().length === 0 && !isLoadingConfigs()) {
+                <small class="text-warn block mt-2">
+                  <ui-icon name="exclamation-triangle" class="mr-1"></ui-icon>
+                  {{ 'storage.config.no.configs' | translate }}
+                </small>
+              }
+            </div>
+
+            <div class="field">
+              <label
+                for="folder"
+                class="block font-medium mb-2 text-sm sm:text-base"
+                >{{ 'storage.folder.optional' | translate }}</label
+              >
+              <f-select
+                inputId="folder"
+                [options]="availableFolders()"
+                optionLabel="name"
+                optionValue="id"
+                [formField]="fileForm.folderId"
+                [placeholder]="'storage.folder.no.folder' | translate"
+              />
+              @if (availableFolders().length === 0 && !isLoadingFolders()) {
+                <small class="text-muted-color block mt-2">
+                  <ui-icon name="info-circle" class="mr-1"></ui-icon>
+                  {{ 'storage.folder.no.folders.available' | translate }}
+                </small>
+              }
+            </div>
+          </div>
+        } @else {
+          <div class="field mb-4">
+            <label
+              for="folder"
+              class="block font-medium mb-2 text-sm sm:text-base"
+              >{{ 'storage.folder.optional' | translate }}</label
+            >
+            <f-select
+              inputId="folder"
+              [options]="availableFolders()"
+              optionLabel="name"
+              optionValue="id"
+              [formField]="fileForm.folderId"
+              [placeholder]="'storage.folder.no.folder' | translate"
+            />
+            @if (availableFolders().length === 0 && !isLoadingFolders()) {
+              <small class="text-muted-color block mt-2">
+                <ui-icon name="info-circle" class="mr-1"></ui-icon>
+                {{ 'storage.folder.no.folders.edit' | translate }}
+              </small>
+            }
+          </div>
+        }
+
+        @if (!isEditMode()) {
+          <div class="field mb-4">
+            <label class="block font-medium mb-2 text-sm sm:text-base">{{
+              'storage.file.select.required' | translate
+            }}</label>
+            <f-fileupload
+              #fileUpload
+              [customUpload]="true"
+              (onSelect)="onFileSelect($event)"
+              [multiple]="false"
+              [maxFileSize]="50000000"
+              [showUploadButton]="false"
+              [showCancelButton]="false"
+              [chooseLabel]="'storage.button.choose.file' | translate"
+              chooseIcon="upload"
+              accept="*/*"
+              class="w-full"
+            >
+              <ng-template #content let-files>
+                @if (files && files.length > 0) {
+                  <div class="flex flex-col gap-2">
+                    @for (file of files; track file.name) {
+                      <div
+                        class="flex items-center gap-3 p-3 border border-surface rounded-lg bg-surface-ground"
+                      >
+                        <ui-icon name="file" class="text-xl sm:text-2xl text-primary"></ui-icon>
+                        <div class="flex-1 min-w-0">
+                          <div class="font-medium truncate">
+                            {{ file.name }}
+                          </div>
+                          <div class="text-sm text-muted-color">
+                            {{ formatFileSize(file.size) }}
+                          </div>
+                        </div>
+                        <button
+                          fButton
+                          [text]="true"
+                          severity="danger"
+                          size="small"
+                          (click)="fileUpload.clear()"
+                        >
+                          <ui-icon pButtonIcon name="times"></ui-icon>
+                        </button>
+                      </div>
+                    }
+                  </div>
+                } @else {
+                  <div
+                    class="flex items-center justify-center flex-col p-6 sm:p-8 border-2 border-dashed border-surface rounded-lg"
+                  >
+                    <ui-icon name="cloud-upload" class="text-3xl sm:text-4xl text-muted-color mb-3"></ui-icon>
+                    <p
+                      class="text-muted-color text-center text-sm sm:text-base"
+                    >
+                      {{ 'storage.upload.drag.drop' | translate }}
+                    </p>
+                    <p class="text-xs sm:text-sm text-muted-color mt-2">
+                      {{
+                        'storage.upload.max.size' | translate: { size: '50MB' }
+                      }}
+                    </p>
+                  </div>
+                }
+              </ng-template>
+            </f-fileupload>
+            @if (!selectedFile() && !isEditMode()) {
+              <small class="text-muted-color">{{
+                'storage.upload.please.select' | translate
+              }}</small>
+            }
+          </div>
+        }
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="field md:col-span-2">
+            <label
+              for="name"
+              class="block font-medium mb-2 text-sm sm:text-base"
+              >{{ 'storage.file.name.required' | translate }}</label
+            >
+            <input
+              fInputText
+              id="name"
+              [formField]="fileForm.name"
+              [placeholder]="
+                (isEditMode()
+                  ? 'storage.file.placeholder.edit'
+                  : 'storage.file.placeholder'
+                ) | translate
+              "
+              class="w-full"
+            />
+          </div>
+
+          <div class="field">
+            <f-checkbox [formField]="fileForm.isPrivate" [label]="'storage.file.private' | translate" />
+            <small class="text-muted-color block mt-2">
+              {{
+                (formModel().isPrivate
+                  ? 'storage.file.private.hint'
+                  : 'storage.file.public.hint'
+                ) | translate
+              }}
+            </small>
+          </div>
+        </div>
+
+        <div class="flex justify-end gap-2 mt-4">
+          <button
+            fButton
+            severity="secondary"
+            [outlined]="true"
+            (click)="onCancel()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            type="submit"
+            [disabled]="
+              !isFormValid() ||
+              (!isEditMode() && !selectedFile()) ||
+              isLoading()
+            "
+          >
+            @if (isLoading()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 
+              (isEditMode() ? 'shared.update' : 'shared.upload') | translate
+             }}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+export { FileManagerFormComponent };
+//# sourceMappingURL=flusys-ng-storage-file-manager-form.component-DhqZmpuX.mjs.map