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

package/dist/collection/components/molecules/upload/file-upload.component.js

@@ -0,0 +1,1060 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { h, Host, } from '@stencil/core';
+import { Generate } from '../../../helper/generate';
+import { uploadClasses } from './file-upload.style';
+import { CaptionTemplate } from '../../../templates/caption-template';
+/**
+ * @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 class BcmFileUpload {
+  constructor() {
+    this.inputId = Generate.UID();
+    this.labelId = Generate.UID();
+    this.internalMaxSizeInBytes = this.maxSize * 1024 * 1024;
+    this.onFileInputChange = (event) => {
+      const input = event.target;
+      this.addFiles(input.files);
+      // Reset input so the same file can be selected again
+      input.value = '';
+    };
+    this.openFileDialog = (ev) => {
+      var _a;
+      ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+      ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+      if (this.disabled)
+        return;
+      (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    this.handleZoneMouseEnter = () => {
+      if (!this.disabled)
+        this.zoneHovered = true;
+    };
+    this.handleZoneMouseLeave = () => {
+      this.zoneHovered = false;
+    };
+    this.handleZoneKeyDown = (event) => {
+      if (this.disabled)
+        return;
+      if (event.key === ' ' || event.key === 'Enter') {
+        event.preventDefault();
+        this.openFileDialog();
+      }
+    };
+    this.handleFocus = (event) => {
+      this.bcmFocus.emit(event);
+    };
+    this.handleBlur = (event) => {
+      this.bcmBlur.emit(event);
+    };
+    this.name = 'file';
+    this.label = '';
+    this.caption = '';
+    this.noCaption = false;
+    this.multiple = false;
+    this.accept = '';
+    this.maxSize = 2;
+    this.required = false;
+    this.disabled = false;
+    this.size = 'medium';
+    this.position = 'vertical';
+    this.buttonLabel = undefined;
+    this.showFileList = true;
+    this.fullWidth = false;
+    this.uploadUrl = undefined;
+    this.maxFileCount = undefined;
+    this.customErrorMessages = undefined;
+    this.value = null;
+    this.captionError = undefined;
+    this.captionType = undefined;
+    this.files = [];
+    this.dragActive = false;
+    this.zoneHovered = false;
+    this.maxSizeError = false;
+    this.typeError = false;
+    this.maxFileCountError = false;
+  }
+  componentWillLoad() {
+    this.internalMaxSizeInBytes = this.maxSize * 1024 * 1024;
+    if (!this.host.hasAttribute('position') && this.size === 'small') {
+      this.position = 'horizontal';
+    }
+  }
+  get isButtonMode() {
+    return this.position === 'button';
+  }
+  get zoneError() {
+    return this.captionType === 'error' && !!this.captionError;
+  }
+  getStyleProps() {
+    return {
+      size: this.size,
+      position: this.position,
+      disabled: this.disabled,
+      zoneHovered: this.zoneHovered,
+      dragActive: this.dragActive,
+      zoneError: this.zoneError,
+      fullWidth: this.fullWidth,
+    };
+  }
+  disconnectedCallback() {
+    // Clear interval when component is removed from the DOM
+    if (this.uploadTimer) {
+      window.clearInterval(this.uploadTimer);
+      this.uploadTimer = undefined;
+    }
+  }
+  handleMaxSizeChange() {
+    this.internalMaxSizeInBytes = this.maxSize * 1024 * 1024;
+  }
+  /**
+   * Normalize and check a file against the `accept` attribute.
+   */
+  isFileAccepted(file) {
+    if (!this.accept)
+      return true;
+    const extension = '.' + (file.name.split('.').pop() || '').toLowerCase();
+    const accepted = this.accept
+      .toLowerCase()
+      .split(',')
+      .map(x => x.trim())
+      .filter(Boolean); // e.g. ['.pdf', '.jpg', '.png']
+    return accepted.includes(extension);
+  }
+  emitChange() {
+    const fileObjects = this.files.map(f => f.file);
+    this.value = fileObjects.length > 0 ? fileObjects : null;
+    this.bcmFileChange.emit(fileObjects);
+    this.bcmChange.emit(this.value);
+  }
+  normalizeSetDataToItems(data) {
+    const input = Array.isArray(data) ? data : [data];
+    return input
+      .filter(item => item instanceof File)
+      .map((file) => ({
+      id: Generate.UID(),
+      file,
+      status: this.showFileList ? 'uploading' : 'uploaded',
+      progress: this.showFileList ? 0 : undefined,
+    }));
+  }
+  async get() {
+    return this.value;
+  }
+  async set(data) {
+    if (this.uploadTimer) {
+      window.clearInterval(this.uploadTimer);
+      this.uploadTimer = undefined;
+    }
+    const items = this.normalizeSetDataToItems(data);
+    if (items.length > 0) {
+      this.files = this.multiple ? items : [items[0]];
+      this.maxSizeError = false;
+      this.typeError = false;
+      this.maxFileCountError = false;
+      this.emitChange();
+      if (this.showFileList) {
+        this.startFakeUpload();
+      }
+      return;
+    }
+    // Backward-compatible fallback for non-File payloads
+    this.value = data;
+    this.bcmChange.emit(this.value);
+  }
+  async setClear() {
+    this.files = [];
+    this.maxSizeError = false;
+    this.typeError = false;
+    this.maxFileCountError = false;
+    this.emitChange();
+    return new Promise(resolve => setTimeout(() => {
+      this.resetCaption();
+      resolve(undefined);
+    }, 10));
+  }
+  async resetCaption() {
+    return new Promise(resolve => setTimeout(() => {
+      this.captionError = null;
+      this.captionType = null;
+      this.maxSizeError = false;
+      this.typeError = false;
+      this.maxFileCountError = false;
+      resolve(undefined);
+    }, 10));
+  }
+  /**
+   * Simulate upload progress. Replace with real upload logic if needed.
+   */
+  startFakeUpload() {
+    if (this.uploadTimer) {
+      window.clearInterval(this.uploadTimer);
+    }
+    this.uploadTimer = window.setInterval(() => {
+      let anyUploading = false;
+      this.files = this.files.map(item => {
+        var _a;
+        if (item.status !== 'uploading')
+          return item;
+        anyUploading = true;
+        const current = (_a = item.progress) !== null && _a !== void 0 ? _a : 0;
+        const next = Math.min(current + 15, 100);
+        if (next >= 100) {
+          return Object.assign(Object.assign({}, item), { status: 'uploaded', progress: undefined });
+        }
+        return Object.assign(Object.assign({}, item), { progress: next });
+      });
+      if (!anyUploading && this.uploadTimer) {
+        window.clearInterval(this.uploadTimer);
+        this.uploadTimer = undefined;
+        this.emitChange();
+      }
+    }, 300);
+  }
+  /**
+   * Add files from input or drop.
+   */
+  addFiles(fileList) {
+    if (!fileList || this.disabled)
+      return;
+    const newItems = [];
+    let hasSizeError = false;
+    let hasTypeError = false;
+    Array.from(fileList).forEach(file => {
+      if (!this.isFileAccepted(file)) {
+        hasTypeError = true;
+        return;
+      }
+      if (file.size > this.internalMaxSizeInBytes) {
+        hasSizeError = true;
+        return;
+      }
+      newItems.push({
+        id: Generate.UID(),
+        file,
+        status: this.showFileList ? 'uploading' : 'uploaded',
+        progress: this.showFileList ? 0 : undefined,
+      });
+    });
+    this.maxSizeError = hasSizeError;
+    this.typeError = hasTypeError;
+    this.maxFileCountError = false;
+    // If there are no valid files, just update validity and exit.
+    if (!newItems.length) {
+      this.emitChange();
+      return;
+    }
+    let merged;
+    if (this.multiple) {
+      if (typeof this.maxFileCount === 'number') {
+        const remaining = this.maxFileCount - this.files.length;
+        if (remaining <= 0) {
+          this.maxFileCountError = true;
+          this.emitChange();
+          return;
+        }
+        const acceptedNew = newItems.slice(0, Math.max(0, remaining));
+        if (acceptedNew.length < newItems.length) {
+          this.maxFileCountError = true;
+        }
+        merged = [...this.files, ...acceptedNew];
+      }
+      else {
+        merged = [...this.files, ...newItems];
+      }
+    }
+    else {
+      // single file mode → only take first new item
+      merged = [newItems[0]];
+    }
+    this.files = merged;
+    this.emitChange();
+    // Only fake upload for now (skip when file list UI is hidden).
+    if (this.showFileList) {
+      this.startFakeUpload();
+    }
+  }
+  removeFile(item) {
+    this.files = this.files.filter(f => f.id !== item.id);
+    this.bcmFileRemoved.emit(item);
+    this.emitChange();
+  }
+  cancelUpload(item) {
+    this.files = this.files.filter(f => f.id !== item.id);
+    this.bcmUploadCanceled.emit(item);
+    this.emitChange();
+  }
+  handleDrop(ev) {
+    var _a;
+    ev.preventDefault();
+    this.dragActive = false;
+    if (this.disabled || this.isButtonMode)
+      return;
+    const files = ((_a = ev.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) || null;
+    if (!files || files.length === 0)
+      return;
+    const first = files.item(0);
+    if (!first || !this.isFileAccepted(first)) {
+      this.typeError = true;
+      return;
+    }
+    this.addFiles(files);
+  }
+  handleDragOver(ev) {
+    ev.preventDefault();
+    if (this.disabled || this.isButtonMode)
+      return;
+    this.dragActive = true;
+  }
+  handleDragLeave(ev) {
+    ev.preventDefault();
+    this.dragActive = false;
+  }
+  async setFocus(options) {
+    var _a, _b;
+    if (this.isButtonMode) {
+      (_a = this.uploadButtonRef) === null || _a === void 0 ? void 0 : _a.focus(options);
+      return;
+    }
+    (_b = this.uploadZoneRef) === null || _b === void 0 ? void 0 : _b.focus(options);
+  }
+  getMaxSizeLabel() {
+    const maxMb = Math.round(this.internalMaxSizeInBytes / (1024 * 1024));
+    return `Maximum size ${maxMb}MB`;
+  }
+  renderErrors() {
+    var _a, _b, _c;
+    const { errorArea, errorIcon, errorClose } = uploadClasses(this.getStyleProps());
+    const maxSizeMsg = ((_a = this.customErrorMessages) === null || _a === void 0 ? void 0 : _a.maxSize) ||
+      `The file size exceeds the limit of ${Math.round(this.internalMaxSizeInBytes / (1024 * 1024))} MB.`;
+    const typeMsg = ((_b = this.customErrorMessages) === null || _b === void 0 ? void 0 : _b.type) ||
+      'This file type is not supported.';
+    const maxFileCountMsg = ((_c = this.customErrorMessages) === null || _c === void 0 ? void 0 : _c.maxFileCount) ||
+      'You have reached the maximum number of files.';
+    return (h("div", { class: "tw-w-full tw-space-y-2" }, this.maxSizeError && (h("div", { class: errorArea() }, h("div", { class: errorIcon() }, h("i", { class: "fa-solid fa-circle-exclamation" })), h("span", { class: "tw-flex-1" }, maxSizeMsg), h("div", { class: errorClose(), onClick: () => (this.maxSizeError = false) }, h("i", { class: "fa-solid fa-xmark" })))), this.typeError && (h("div", { class: errorArea() }, h("div", { class: errorIcon() }, h("i", { class: "fa-solid fa-circle-exclamation" })), h("span", { class: "tw-flex-1" }, typeMsg), h("div", { class: errorClose(), onClick: () => (this.typeError = false) }, h("i", { class: "fa-solid fa-xmark" })))), this.maxFileCountError && (h("div", { class: errorArea() }, h("div", { class: errorIcon() }, h("i", { class: "fa-solid fa-circle-exclamation" })), h("span", { class: "tw-flex-1" }, maxFileCountMsg), h("div", { class: errorClose(), onClick: () => (this.maxFileCountError = false) }, h("i", { class: "fa-solid fa-xmark" }))))));
+  }
+  renderUploadZone() {
+    const { zone, iconContainer, iconSizeClass, zoneTextWrapper, zoneTextMain, zoneTextSub, zoneLink, } = uploadClasses(this.getStyleProps());
+    return (h("div", { ref: el => (this.uploadZoneRef = el), tabindex: this.disabled ? undefined : 0, part: "upload-zone", class: zone(), role: "button", "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": this.label ? this.labelId : undefined, "aria-label": this.label || 'File upload', onClick: this.openFileDialog, onKeyDown: this.handleZoneKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleZoneMouseEnter, onMouseLeave: this.handleZoneMouseLeave, onDragOver: ev => this.handleDragOver(ev), onDragLeave: ev => this.handleDragLeave(ev), onDrop: ev => this.handleDrop(ev) }, h("div", { class: iconContainer() }, h("i", { class: `fa-solid fa-cloud-arrow-up ${iconSizeClass()}`, "aria-hidden": "true" })), h("div", { class: zoneTextWrapper() }, h("div", { class: zoneTextMain() }, "Drag and drop your file here ", h("span", { class: "tw-inline-block" }, "or", ' ', h("span", { class: zoneLink(), role: "button", tabindex: -1, "aria-label": "Choose file", onClick: e => this.openFileDialog(e) }, "Browse files"))), h("div", { class: zoneTextSub() }, this.getMaxSizeLabel()))));
+  }
+  renderUploadButton() {
+    const { triggerWrap } = uploadClasses(this.getStyleProps());
+    const label = this.buttonLabel || 'Upload';
+    return (h("div", { class: triggerWrap(), part: "upload-trigger" }, h("bcm-button", { ref: el => (this.uploadButtonRef = el), variant: "upload", size: this.size, disabled: this.disabled, onFocus: this.handleFocus, onBlur: this.handleBlur, "onBcm-click": (e) => this.openFileDialog(e) }, label)));
+  }
+  renderHiddenInput() {
+    return (h("input", { ref: el => (this.fileInput = el), id: this.inputId, type: "file", hidden: true, accept: this.accept, multiple: this.multiple, disabled: this.disabled, onChange: this.onFileInputChange }));
+  }
+  renderFileRow(item) {
+    var _a, _b;
+    const { percent, iconBtn, fileRow, fileRowHeader, fileIcon, fileTitle, progressWrapper, progressTrack, progressBar, } = uploadClasses(this.getStyleProps());
+    const isUploading = (item === null || item === void 0 ? void 0 : item.status) === 'uploading';
+    return (h("div", { part: "file-row", class: fileRow(), title: (_a = item === null || item === void 0 ? void 0 : item.file) === null || _a === void 0 ? void 0 : _a.name }, h("div", { class: fileRowHeader() }, h("i", { class: `fa-regular fa-file ${fileIcon()}` }), h("span", { class: fileTitle() }, (_b = item === null || item === void 0 ? void 0 : item.file) === null || _b === void 0 ? void 0 : _b.name), h("button", { type: "button", part: isUploading ? 'cancel-btn' : 'remove-btn', class: iconBtn(), onClick: () => isUploading ? this.cancelUpload(item) : this.removeFile(item), title: isUploading ? 'Cancel' : 'Remove' }, h("i", { class: "fa-regular fa-trash" }))), this.showFileList && isUploading && (h("div", { class: progressWrapper() }, h("div", { class: progressTrack() }, h("div", { class: progressBar(), style: { width: `${item.progress || 0}%` } })), h("span", { class: percent() }, item.progress || 0, "%")))));
+  }
+  render() {
+    const { container, label, list, captionWrap } = uploadClasses(this.getStyleProps());
+    const hasCaptionText = typeof this.caption === 'string' ? this.caption.trim().length > 0 : !!this.caption;
+    const shouldShowCaption = !this.noCaption && (hasCaptionText || !!this.captionError);
+    return (h(Host, { tabindex: "-1" }, h("div", { class: container() }, this.label && (h("label", { id: this.labelId, htmlFor: this.inputId, part: "label", class: label() }, this.label)), this.isButtonMode ? this.renderUploadButton() : this.renderUploadZone(), this.renderHiddenInput(), this.renderErrors(), shouldShowCaption && (h("div", { class: captionWrap(), part: "caption" }, h(CaptionTemplate, { noCaption: false, captionType: this.captionType, captionError: this.captionError, caption: this.caption, size: this.size === 'small' ? 'medium' : 'large' }))), this.showFileList && this.files.length > 0 && (h("div", { part: "file-list", class: list() }, this.files.map(item => this.renderFileRow(item)))))));
+  }
+  static get is() { return "bcm-file-upload"; }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "'file'"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "caption": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "noCaption": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-caption",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multiple",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "accept": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "accept",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "maxSize": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-size",
+        "reflect": false,
+        "defaultValue": "2"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'medium' | 'small'",
+          "resolved": "\"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'medium'"
+      },
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "BcmUploadPosition",
+          "resolved": "\"button\" | \"horizontal\" | \"vertical\"",
+          "references": {
+            "BcmUploadPosition": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "position",
+        "reflect": false,
+        "defaultValue": "'vertical'"
+      },
+      "buttonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-label",
+        "reflect": false
+      },
+      "showFileList": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-file-list",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "full-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "uploadUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Reserved for future backend upload integration.\nCurrently does not affect component behavior."
+        },
+        "attribute": "upload-url",
+        "reflect": false
+      },
+      "maxFileCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Maximum number of files allowed in total.\nOnly applied when `multiple` is true."
+        },
+        "attribute": "max-file-count",
+        "reflect": false
+      },
+      "customErrorMessages": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "BcmUploadErrorMessages",
+          "resolved": "BcmUploadErrorMessages",
+          "references": {
+            "BcmUploadErrorMessages": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Allows consumers to override default error messages."
+        }
+      },
+      "value": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "captionError": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption-error",
+        "reflect": false
+      },
+      "captionType": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption-type",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "files": {},
+      "dragActive": {},
+      "zoneHovered": {},
+      "maxSizeError": {},
+      "typeError": {},
+      "maxFileCountError": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "bcmFileChange",
+        "name": "bcm-file-change",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "File[]",
+          "resolved": "File[]",
+          "references": {
+            "File": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "bcmChange",
+        "name": "bcm-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "bcmFileRemoved",
+        "name": "bcm-file-removed",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "BcmUploadItem",
+          "resolved": "BcmUploadItem",
+          "references": {
+            "BcmUploadItem": {
+              "location": "local"
+            }
+          }
+        }
+      }, {
+        "method": "bcmUploadCanceled",
+        "name": "bcm-upload-canceled",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "BcmUploadItem",
+          "resolved": "BcmUploadItem",
+          "references": {
+            "BcmUploadItem": {
+              "location": "local"
+            }
+          }
+        }
+      }, {
+        "method": "bcmFocus",
+        "name": "bcm-focus",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "bcmBlur",
+        "name": "bcm-blur",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "get": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "set": {
+        "complexType": {
+          "signature": "(data: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "setClear": {
+        "complexType": {
+          "signature": "() => Promise<unknown>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<unknown>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "resetCaption": {
+        "complexType": {
+          "signature": "() => Promise<unknown>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<unknown>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "maxSize",
+        "methodName": "handleMaxSizeChange"
+      }];
+  }
+}