bromcom-ui 3.0.0-alpha.3 → 3.0.0-alpha.5

package/dist/types/components/molecules/upload/file-upload.component.d.ts

@@ -0,0 +1,233 @@
+import { EventEmitter, ComponentInterface } from '../../../stencil-public-runtime';
+export type BcmUploadStatus = 'uploading' | 'uploaded' | 'error';
+export type BcmUploadPosition = 'vertical' | 'horizontal' | 'button';
+export interface BcmUploadItem {
+  id: string;
+  file: File;
+  status: BcmUploadStatus;
+  progress?: number;
+}
+export interface BcmUploadErrorMessages {
+  /**
+   * Error message shown when a file exceeds the maxSize limit.
+   */
+  maxSize?: string;
+  /**
+   * Error message shown when file type is not allowed by `accept`.
+   */
+  type?: string;
+  /**
+   * Error message shown when `maxFileCount` is exceeded.
+   */
+  maxFileCount?: string;
+}
+/**
+ * @component BcmFileUpload
+ * @description A fully featured drag-and-drop file uploader component.
+ * Supports form-associated behavior, validation, custom size limits,
+ * accepted file type filtering, multiple file selection, progress tracking,
+ * upload canceling, file removal, and accessibility events (focus/blur).
+ *
+ * Upload progress is currently simulated locally. The `uploadUrl` prop
+ * is reserved for future real HTTP upload integration and has no effect yet.
+ *
+ * @example Basic usage
+ * <bcm-file-upload name="report" label="Upload Report"></bcm-file-upload>
+ *
+ * @example Multiple files
+ * <bcm-file-upload name="attachments" multiple></bcm-file-upload>
+ *
+ * @example Custom max size and accepted formats
+ * <bcm-file-upload
+ *   name="medicalFiles"
+ *   accept=".pdf,.jpg"
+ *   maxSize={5}
+ * ></bcm-file-upload>
+ *
+ * @prop {string} name
+ * The name of the form field used when the component is inside a `<form>`.
+ * Supports automatic FormData generation including:
+ *  - single upload: name="file"
+ *  - multiple upload: name="file[0], file[1], ..."
+ *
+ * @prop {string} label
+ * Optional label shown above the upload zone.
+ *
+ * @prop {string} caption
+ * Optional helper text rendered below the file list. Example: “Max size 5MB”.
+ *
+ * @prop {boolean} multiple
+ * Allows selecting and uploading multiple files at once.
+ *
+ * @prop {string} accept
+ * Comma-separated list of allowed file extensions.
+ * Example: ".pdf,.xls,.png".
+ *
+ * @prop {number} maxSize
+ * Maximum allowed size per file (in MB). If exceeded, an error alert appears.
+ *
+ * @prop {boolean} required
+ * Enables form validation — at least one file must be uploaded.
+ * Validation is applied by the surrounding `bcm-form-2` / `bcm-form`
+ * component, which reads `required` and `value` and sets the caption error.
+ *
+ * @prop {boolean} disabled
+ * Makes the uploader non-interactive: no clicking, no drag-and-drop.
+ *
+ * @prop {"medium" | "small"} size
+ * Controls spacing, typography, and visual density of the upload zone.
+ *
+ * @prop {string} uploadUrl
+ * Reserved for future backend upload integration.
+ * Currently has no effect and does not trigger any HTTP requests.
+ *
+ * @prop {number} maxFileCount
+ * Optional limit for how many files can be selected in total.
+ * Only applied when `multiple` is true.
+ * If exceeded, new files are ignored and a max-file-count error is shown.
+ *
+ * @prop {BcmUploadErrorMessages} customErrorMessages
+ * Optional override for all error messages:
+ *  - maxSize:      file too large
+ *  - type:         unsupported file type
+ *  - maxFileCount: too many files selected
+ *
+ *
+ * @event {EventEmitter<File[]>} bcm-file-change
+ * Fired whenever the component's internal file list changes.
+ * Emits an array of the current File objects.
+ *
+ * @event {EventEmitter<BcmUploadItem>} bcm-file-removed
+ * Fired when the user removes a file from the list.
+ *
+ * @event {EventEmitter<BcmUploadItem>} bcm-upload-canceled
+ * Fired when an upload is canceled before completion.
+ *
+ * @event {EventEmitter<FocusEvent>} bcm-focus
+ * Fired when upload zone receives keyboard or mouse focus.
+ *
+ * @event {EventEmitter<FocusEvent>} bcm-blur
+ * Fired when upload zone loses focus.
+ *
+ *
+ * @csspart upload-zone
+ * The root clickable drop area for file selection or drag-and-drop.
+ *
+ * @csspart file-list
+ * The container wrapping rendered file rows.
+ *
+ * @csspart file-row
+ * A single file entry including its name, actions, and progress bar.
+ *
+ * @csspart remove-btn
+ * The remove action button inside uploaded file rows.
+ *
+ * @csspart cancel-btn
+ * The cancel upload button during uploading progress.
+ *
+ * @csspart download-btn
+ * The download button for already uploaded files.
+ *
+ * @csspart label
+ * The external label text displayed above the component.
+ *
+ * @csspart caption
+ * Helper or informative caption displayed below the uploaded list.
+ */
+export declare class BcmFileUpload implements ComponentInterface {
+  host: HTMLElement;
+  private inputId;
+  private labelId;
+  private fileInput?;
+  private uploadTimer?;
+  private uploadZoneRef?;
+  private uploadButtonRef?;
+  name: string;
+  label: string;
+  caption?: string;
+  noCaption: boolean;
+  multiple: boolean;
+  accept: string;
+  maxSize: number;
+  required: boolean;
+  disabled: boolean;
+  size: 'medium' | 'small';
+  position: BcmUploadPosition;
+  buttonLabel?: string;
+  showFileList: boolean;
+  fullWidth: boolean;
+  /**
+   * Reserved for future backend upload integration.
+   * Currently does not affect component behavior.
+   */
+  uploadUrl?: string;
+  /**
+   * Maximum number of files allowed in total.
+   * Only applied when `multiple` is true.
+   */
+  maxFileCount?: number;
+  /**
+   * Allows consumers to override default error messages.
+   */
+  customErrorMessages?: BcmUploadErrorMessages;
+  value: any;
+  captionError?: string;
+  captionType?: string;
+  private files;
+  private dragActive;
+  private zoneHovered;
+  private maxSizeError;
+  private typeError;
+  private maxFileCountError;
+  bcmFileChange: EventEmitter<File[]>;
+  bcmChange: EventEmitter<any>;
+  bcmFileRemoved: EventEmitter<BcmUploadItem>;
+  bcmUploadCanceled: EventEmitter<BcmUploadItem>;
+  bcmFocus: EventEmitter<FocusEvent>;
+  bcmBlur: EventEmitter<FocusEvent>;
+  private internalMaxSizeInBytes;
+  componentWillLoad(): void;
+  private get isButtonMode();
+  private get zoneError();
+  private getStyleProps;
+  disconnectedCallback(): void;
+  handleMaxSizeChange(): void;
+  /**
+   * Normalize and check a file against the `accept` attribute.
+   */
+  private isFileAccepted;
+  private emitChange;
+  private normalizeSetDataToItems;
+  get(): Promise<any>;
+  set(data: any): Promise<void>;
+  setClear(): Promise<unknown>;
+  resetCaption(): Promise<unknown>;
+  /**
+   * Simulate upload progress. Replace with real upload logic if needed.
+   */
+  private startFakeUpload;
+  /**
+   * Add files from input or drop.
+   */
+  private addFiles;
+  private removeFile;
+  private cancelUpload;
+  private onFileInputChange;
+  private handleDrop;
+  private handleDragOver;
+  private handleDragLeave;
+  private openFileDialog;
+  setFocus(options?: FocusOptions): Promise<void>;
+  private handleZoneMouseEnter;
+  private handleZoneMouseLeave;
+  private handleZoneKeyDown;
+  private getMaxSizeLabel;
+  private handleFocus;
+  private handleBlur;
+  private renderErrors;
+  private renderUploadZone;
+  private renderUploadButton;
+  private renderHiddenInput;
+  private renderFileRow;
+  render(): any;
+}