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

package/dist/components/bcm-file-upload.js

@@ -0,0 +1,625 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { G as Generate } from './generate.js';
+import { c as ce } from './index4.js';
+import { C as CaptionTemplate } from './caption-template.js';
+import { d as defineCustomElement$2 } from './button.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 = 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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.bcmFileChange = createEvent(this, "bcm-file-change", 1);
+    this.bcmChange = createEvent(this, "bcm-change", 7);
+    this.bcmFileRemoved = createEvent(this, "bcm-file-removed", 1);
+    this.bcmUploadCanceled = createEvent(this, "bcm-upload-canceled", 1);
+    this.bcmFocus = createEvent(this, "bcm-focus", 1);
+    this.bcmBlur = createEvent(this, "bcm-blur", 1);
+    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)))))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "maxSize": ["handleMaxSizeChange"]
+  }; }
+}, [0, "bcm-file-upload", {
+    "name": [1],
+    "label": [1],
+    "caption": [1025],
+    "noCaption": [1028, "no-caption"],
+    "multiple": [4],
+    "accept": [1],
+    "maxSize": [1026, "max-size"],
+    "required": [4],
+    "disabled": [4],
+    "size": [1],
+    "position": [1],
+    "buttonLabel": [1, "button-label"],
+    "showFileList": [4, "show-file-list"],
+    "fullWidth": [4, "full-width"],
+    "uploadUrl": [1, "upload-url"],
+    "maxFileCount": [2, "max-file-count"],
+    "customErrorMessages": [16],
+    "value": [1032],
+    "captionError": [1025, "caption-error"],
+    "captionType": [1025, "caption-type"],
+    "files": [32],
+    "dragActive": [32],
+    "zoneHovered": [32],
+    "maxSizeError": [32],
+    "typeError": [32],
+    "maxFileCountError": [32],
+    "get": [64],
+    "set": [64],
+    "setClear": [64],
+    "resetCaption": [64],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-file-upload", "bcm-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-file-upload":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmFileUpload$1);
+      }
+      break;
+    case "bcm-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const BcmFileUpload = BcmFileUpload$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmFileUpload, defineCustomElement };

package/dist/components/bcm-form-2.js

@@ -29,6 +29,7 @@ const BcmFormComponents = [
   'BCM-CHIP-GROUP',
   'BCM-INPUT-DROPDOWN',
   'BCM-NUMBER-INPUT',
+  'BCM-FILE-UPLOAD',
   //... to be added to v3
 ];
 

package/dist/components/bcm-number-input.js

@@ -39,10 +39,13 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.input.emit(e);
       });
     };
+    this.emitChange = () => {
+      this.change.emit(this.value);
+    };
     this.onChange = () => {
       var _a;
-      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("change", (e) => {
-        this.change.emit(e);
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("change", () => {
+        this.emitChange();
       });
     };
     this.onFocus = () => {
@@ -136,6 +139,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.value = this.max;
       }
     }
+    this.emitChange();
   }
   down() {
     if (this.disabled)
@@ -148,6 +152,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.value = this.min;
       }
     }
+    this.emitChange();
   }
   handleClear(e) {
     if (this.disabled)
@@ -157,6 +162,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return;
     this.value = "";
     this.clear.emit(e);
+    this.emitChange();
   }
   checkLength() {
     const { min, max, value } = this;

package/dist/components/button.js

@@ -148,6 +148,12 @@ const variantOptions = {
     icon: 'far fa-download',
     iconPosition: 'prefix',
   },
+  upload: {
+    text: 'Upload',
+    color: 'blue',
+    icon: 'far fa-cloud-arrow-up',
+    iconPosition: 'prefix',
+  },
 };
 var VariantProps;
 (function (VariantProps) {
@@ -174,6 +180,7 @@ var VariantProps;
   VariantProps["update"] = "update";
   VariantProps["reset"] = "Reset";
   VariantProps["download"] = "download";
+  VariantProps["upload"] = "upload";
 })(VariantProps || (VariantProps = {}));
 
 const { state } = createStore({