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

package/dist/cjs/bcm-file-upload.cjs.entry.js

@@ -0,0 +1,578 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-c591ecec.js');
+const generate = require('./generate-9d1bf6b3.js');
+const index = require('./index-5279dea2.js');
+const captionTemplate = require('./caption-template-f8a78504.js');
+require('./package-6de220be.js');
+require('./colors-250d0982.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./index-95ae50d0.js');
+
+const zoneDefaultSurface = 'tw-border-dashed tw-border-color tw-bg-color-default';
+const zoneHoverSurface = '!tw-border-solid !tw-border-color-primaryInfo';
+const zoneDragSurface = '!tw-border-solid !tw-border-color-primaryInfo !tw-bg-primary-50';
+const uploadClasses = index.ce({
+  slots: {
+    container: 'bcm-ui-element tw-flex tw-flex-col tw-w-full',
+    label: 'tw-text-3 tw-font-medium tw-text-color-label tw-leading-5',
+    triggerWrap: 'tw-flex tw-flex-col tw-w-full',
+    zone: [
+      'tw-relative tw-rounded tw-border tw-transition-all tw-duration-200 tw-ease-in-out',
+      'tw-select-none tw-flex tw-items-center tw-justify-center',
+      zoneDefaultSurface,
+    ],
+    iconContainer: 'tw-flex tw-shrink-0 tw-items-center tw-justify-center',
+    iconSizeClass: 'tw-block tw-text-color-default',
+    zoneTextWrapper: 'tw-flex tw-flex-col tw-flex-1 tw-min-w-0',
+    zoneTextMain: 'tw-text-3 tw-font-medium tw-text-color-caption tw-leading-tight',
+    zoneLink: 'tw-text-color-primary tw-font-medium hover:tw-underline tw-cursor-pointer',
+    zoneTextSub: 'tw-text-2 tw-text-color-caption tw-leading-4',
+    list: 'tw-flex tw-flex-col tw-gap-2',
+    fileRow: [
+      'tw-flex tw-flex-col tw-rounded tw-min-w-0',
+      'tw-bg-color-default tw-px-4 tw-py-2',
+    ],
+    fileRowHeader: 'tw-flex tw-items-center tw-gap-2 tw-w-full tw-min-w-0',
+    fileIcon: 'tw-shrink-0 tw-text-color-primary',
+    fileTitle: 'tw-font-medium tw-leading-5 tw-text-color-default tw-truncate tw-flex-1 tw-min-w-0',
+    progressWrapper: 'tw-flex tw-items-center tw-gap-2 tw-w-full',
+    progressTrack: 'tw-flex-1 tw-h-2 tw-bg-color-default-hover tw-rounded-full tw-overflow-hidden',
+    progressBar: 'tw-h-full tw-bg-primary-600 tw-rounded-full tw-transition-all tw-duration-300 tw-ease-out',
+    percent: 'tw-text-3 tw-font-medium tw-leading-5 tw-text-color-default tw-min-w-[3ch] tw-text-right tw-shrink-0',
+    actions: 'tw-flex tw-items-center tw-shrink-0',
+    iconBtn: [
+      'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-cursor-pointer',
+      'tw-appearance-none tw-border-none tw-bg-transparent tw-p-0',
+      'tw-text-color-default hover:tw-text-color-primary',
+    ],
+    errorArea: [
+      'tw-flex tw-items-center tw-gap-3 tw-py-1.5 tw-px-3 tw-rounded',
+      'tw-bg-red-50 tw-text-color-error tw-text-3 tw-font-medium tw-leading-none',
+    ],
+    errorIcon: 'tw-flex tw-items-center tw-justify-center tw-shrink-0',
+    errorClose: 'tw-ml-auto tw-cursor-pointer hover:tw-opacity-80',
+    captionWrap: '[&_.bcm-caption-area]:!tw-mt-0',
+  },
+  variants: {
+    size: {
+      medium: {
+        container: 'tw-gap-1',
+        zone: 'tw-gap-2 tw-px-4 tw-py-4',
+        zoneTextWrapper: 'tw-gap-1',
+        fileRow: 'tw-gap-1 tw-px-4 tw-py-2',
+        fileRowHeader: 'tw-gap-2',
+        fileIcon: 'tw-text-4',
+        fileTitle: 'tw-text-3',
+        iconBtn: 'tw-text-4',
+        progressWrapper: 'tw-gap-2',
+        progressTrack: 'tw-h-2',
+      },
+      small: {
+        container: 'tw-gap-0.5',
+        zone: 'tw-gap-2 tw-px-3 tw-py-3',
+        zoneTextWrapper: 'tw-gap-0.5',
+        fileRow: 'tw-gap-0.5 tw-px-3 tw-py-1',
+        fileRowHeader: 'tw-gap-1',
+        fileTitle: 'tw-text-2',
+        fileIcon: 'tw-text-3',
+        percent: 'tw-text-2',
+        iconBtn: 'tw-text-3',
+        progressWrapper: 'tw-gap-1',
+        progressTrack: 'tw-h-1.5',
+        list: 'tw-gap-1.5',
+      },
+    },
+    position: {
+      vertical: {
+        zone: 'tw-flex-col tw-text-center',
+        zoneTextWrapper: 'tw-items-center',
+        zoneTextSub: 'tw-text-center',
+      },
+      horizontal: {
+        zone: 'tw-flex-row tw-text-left',
+        zoneTextWrapper: 'tw-items-start',
+      },
+      button: {
+        container: 'tw-gap-1',
+      },
+    },
+    disabled: {
+      true: '',
+      false: '',
+    },
+    zoneHovered: {
+      true: '',
+      false: '',
+    },
+    dragActive: {
+      true: '',
+      false: '',
+    },
+    zoneError: {
+      true: '',
+      false: '',
+    },
+    fullWidth: {
+      true: {
+        container: 'tw-max-w-full',
+      },
+      false: {
+        container: 'tw-max-w-64',
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      position: ['vertical', 'horizontal'],
+      size: 'medium',
+      class: {
+        iconContainer: 'tw-h-10',
+        iconSizeClass: 'tw-text-[40px] tw-leading-none',
+      },
+    },
+    {
+      position: 'vertical',
+      size: 'small',
+      class: {
+        iconContainer: 'tw-size-8',
+        iconSizeClass: 'tw-text-[32px] tw-leading-none',
+      },
+    },
+    {
+      position: 'horizontal',
+      size: 'small',
+      class: {
+        iconContainer: 'tw-h-8 tw-max-h-8 tw-max-w-9',
+        iconSizeClass: '!tw-text-[28px] !tw-leading-none',
+      },
+    },
+    {
+      position: ['vertical', 'horizontal'],
+      disabled: false,
+      class: {
+        zone: 'tw-cursor-pointer',
+      },
+    },
+    {
+      position: ['vertical', 'horizontal'],
+      disabled: false,
+      zoneError: false,
+      zoneHovered: true,
+      dragActive: false,
+      class: {
+        zone: zoneHoverSurface,
+      },
+    },
+    {
+      position: ['vertical', 'horizontal'],
+      disabled: false,
+      zoneError: false,
+      dragActive: true,
+      class: {
+        zone: zoneDragSurface,
+      },
+    },
+    {
+      position: ['vertical', 'horizontal'],
+      zoneError: true,
+      disabled: false,
+      class: {
+        zone: '!tw-border-solid tw-border-color-error !tw-bg-red-50',
+      },
+    },
+    {
+      disabled: true,
+      class: {
+        zone: [
+          'tw-cursor-not-allowed',
+          'tw-border-dashed tw-border-color-disabled tw-bg-color-disabled',
+        ],
+        zoneTextMain: 'tw-text-color-disabled',
+        zoneTextSub: 'tw-text-color-disabled',
+        zoneLink: 'tw-text-color-disabled tw-cursor-not-allowed tw-no-underline hover:tw-no-underline',
+        iconSizeClass: '!tw-text-color-disabled',
+      },
+    },
+  ],
+  defaultVariants: {
+    size: 'medium',
+    position: 'vertical',
+    disabled: false,
+    zoneHovered: false,
+    dragActive: false,
+    zoneError: false,
+    fullWidth: false,
+  },
+});
+
+const BcmFileUpload = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.bcmFileChange = index$1.createEvent(this, "bcm-file-change", 1);
+    this.bcmChange = index$1.createEvent(this, "bcm-change", 7);
+    this.bcmFileRemoved = index$1.createEvent(this, "bcm-file-removed", 1);
+    this.bcmUploadCanceled = index$1.createEvent(this, "bcm-upload-canceled", 1);
+    this.bcmFocus = index$1.createEvent(this, "bcm-focus", 1);
+    this.bcmBlur = index$1.createEvent(this, "bcm-blur", 1);
+    this.inputId = generate.Generate.UID();
+    this.labelId = generate.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.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.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 (index$1.h("div", { class: "tw-w-full tw-space-y-2" }, this.maxSizeError && (index$1.h("div", { class: errorArea() }, index$1.h("div", { class: errorIcon() }, index$1.h("i", { class: "fa-solid fa-circle-exclamation" })), index$1.h("span", { class: "tw-flex-1" }, maxSizeMsg), index$1.h("div", { class: errorClose(), onClick: () => (this.maxSizeError = false) }, index$1.h("i", { class: "fa-solid fa-xmark" })))), this.typeError && (index$1.h("div", { class: errorArea() }, index$1.h("div", { class: errorIcon() }, index$1.h("i", { class: "fa-solid fa-circle-exclamation" })), index$1.h("span", { class: "tw-flex-1" }, typeMsg), index$1.h("div", { class: errorClose(), onClick: () => (this.typeError = false) }, index$1.h("i", { class: "fa-solid fa-xmark" })))), this.maxFileCountError && (index$1.h("div", { class: errorArea() }, index$1.h("div", { class: errorIcon() }, index$1.h("i", { class: "fa-solid fa-circle-exclamation" })), index$1.h("span", { class: "tw-flex-1" }, maxFileCountMsg), index$1.h("div", { class: errorClose(), onClick: () => (this.maxFileCountError = false) }, index$1.h("i", { class: "fa-solid fa-xmark" }))))));
+  }
+  renderUploadZone() {
+    const { zone, iconContainer, iconSizeClass, zoneTextWrapper, zoneTextMain, zoneTextSub, zoneLink, } = uploadClasses(this.getStyleProps());
+    return (index$1.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) }, index$1.h("div", { class: iconContainer() }, index$1.h("i", { class: `fa-solid fa-cloud-arrow-up ${iconSizeClass()}`, "aria-hidden": "true" })), index$1.h("div", { class: zoneTextWrapper() }, index$1.h("div", { class: zoneTextMain() }, "Drag and drop your file here ", index$1.h("span", { class: "tw-inline-block" }, "or", ' ', index$1.h("span", { class: zoneLink(), role: "button", tabindex: -1, "aria-label": "Choose file", onClick: e => this.openFileDialog(e) }, "Browse files"))), index$1.h("div", { class: zoneTextSub() }, this.getMaxSizeLabel()))));
+  }
+  renderUploadButton() {
+    const { triggerWrap } = uploadClasses(this.getStyleProps());
+    const label = this.buttonLabel || 'Upload';
+    return (index$1.h("div", { class: triggerWrap(), part: "upload-trigger" }, index$1.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 (index$1.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 (index$1.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 }, index$1.h("div", { class: fileRowHeader() }, index$1.h("i", { class: `fa-regular fa-file ${fileIcon()}` }), index$1.h("span", { class: fileTitle() }, (_b = item === null || item === void 0 ? void 0 : item.file) === null || _b === void 0 ? void 0 : _b.name), index$1.h("button", { type: "button", part: isUploading ? 'cancel-btn' : 'remove-btn', class: iconBtn(), onClick: () => isUploading ? this.cancelUpload(item) : this.removeFile(item), title: isUploading ? 'Cancel' : 'Remove' }, index$1.h("i", { class: "fa-regular fa-trash" }))), this.showFileList && isUploading && (index$1.h("div", { class: progressWrapper() }, index$1.h("div", { class: progressTrack() }, index$1.h("div", { class: progressBar(), style: { width: `${item.progress || 0}%` } })), index$1.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 (index$1.h(index$1.Host, { tabindex: "-1" }, index$1.h("div", { class: container() }, this.label && (index$1.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 && (index$1.h("div", { class: captionWrap(), part: "caption" }, index$1.h(captionTemplate.CaptionTemplate, { noCaption: false, captionType: this.captionType, captionError: this.captionError, caption: this.caption, size: this.size === 'small' ? 'medium' : 'large' }))), this.showFileList && this.files.length > 0 && (index$1.h("div", { part: "file-list", class: list() }, this.files.map(item => this.renderFileRow(item)))))));
+  }
+  get host() { return index$1.getElement(this); }
+  static get watchers() { return {
+    "maxSize": ["handleMaxSizeChange"]
+  }; }
+};
+
+exports.bcm_file_upload = BcmFileUpload;

package/dist/cjs/bcm-form-2.cjs.entry.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 const isLoadDecorator = require('./is-load-decorator-15036f37.js');
-const generate = require('./generate-554f54dc.js');
+const generate = require('./generate-9d1bf6b3.js');
 const stringHelper = require('./string-helper-9cdfb273.js');
 const bcm = require('./bcm-1d1fcf21.js');
-require('./package-8445ccd4.js');
+require('./package-6de220be.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 
@@ -36,6 +36,7 @@ const BcmFormComponents = [
   'BCM-CHIP-GROUP',
   'BCM-INPUT-DROPDOWN',
   'BCM-NUMBER-INPUT',
+  'BCM-FILE-UPLOAD',
   //... to be added to v3
 ];
 

package/dist/cjs/bcm-input-2.cjs.entry.js

@@ -9,12 +9,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
 const isLoadDecorator = require('./is-load-decorator-15036f37.js');
-const generate = require('./generate-554f54dc.js');
+const generate = require('./generate-9d1bf6b3.js');
 const bcm = require('./bcm-1d1fcf21.js');
 const captionTemplate = require('./caption-template-f8a78504.js');
 const input_style = require('./input.style-bee84fb0.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-8445ccd4.js');
+require('./package-6de220be.js');
 require('./colors-250d0982.js');
 require('./index-5279dea2.js');
 

package/dist/cjs/bcm-input-custom.cjs.entry.js

@@ -7,9 +7,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
-const generate = require('./generate-554f54dc.js');
+const generate = require('./generate-9d1bf6b3.js');
 const index$1 = require('./index-95ae50d0.js');
-require('./package-8445ccd4.js');
+require('./package-6de220be.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 

package/dist/cjs/bcm-input-dropdown.cjs.entry.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index$1 = require('./index-c591ecec.js');
 require('./color-helper-dc98a2ca.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-554f54dc.js');
-require('./number-helper-677e9c02.js');
+const generate = require('./generate-9d1bf6b3.js');
+require('./number-helper-ae28b255.js');
 require('./string-helper-9cdfb273.js');
-require('./validators-92f2f1ef.js');
+require('./validators-3381bee2.js');
 require('./element-dragger-a8562f82.js');
 const bcm = require('./bcm-1d1fcf21.js');
 const captionTemplate = require('./caption-template-f8a78504.js');
@@ -24,7 +24,7 @@ require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-8445ccd4.js');
+require('./package-6de220be.js');
 
 const inputDropdownStyle = index.ce({
   slots: {

package/dist/cjs/bcm-modal-2-footer.cjs.entry.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c591ecec.js');
 require('./color-helper-dc98a2ca.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-554f54dc.js');
-require('./number-helper-677e9c02.js');
+const generate = require('./generate-9d1bf6b3.js');
+require('./number-helper-ae28b255.js');
 require('./string-helper-9cdfb273.js');
-require('./validators-92f2f1ef.js');
+require('./validators-3381bee2.js');
 require('./element-dragger-a8562f82.js');
 require('./bcm-1d1fcf21.js');
 const index$1 = require('./index-95ae50d0.js');
@@ -20,7 +20,7 @@ require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-8445ccd4.js');
+require('./package-6de220be.js');
 
 const BcmModal2Footer = class {
   constructor(hostRef) {