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

package/dist/types/components.d.ts

@@ -12,6 +12,7 @@ import { ButtonTypes, ColorPaletteTypes as ColorPaletteTypes1, DirectionTypes, F
 import { VariantProp } from "./components/atoms/button/types";
 import { Type } from "./components/organism/datetime-picker/types";
 import { SizeProp } from "./components/molecules/error-layout/types";
+import { BcmUploadErrorMessages, BcmUploadItem, BcmUploadPosition } from "./components/molecules/upload/file-upload.component";
 import { SizeProp as SizeProp1 } from "./components/other_deprecated/listbox/types";
 import { StatusProp as StatusProp1 } from "./components/molecules/message/types";
 import { TypeProp as TypeProp1 } from "./components/molecules/notification/types";
@@ -562,6 +563,124 @@ export namespace Components {
         "tooltip": any;
         "valid": boolean;
     }
+    /**
+     * @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.
+     */
+    interface BcmFileUpload {
+        "accept": string;
+        "buttonLabel"?: string;
+        "caption"?: string;
+        "captionError"?: string;
+        "captionType"?: string;
+        /**
+          * Allows consumers to override default error messages.
+         */
+        "customErrorMessages"?: BcmUploadErrorMessages;
+        "disabled": boolean;
+        "fullWidth": boolean;
+        "get": () => Promise<any>;
+        "label": string;
+        /**
+          * Maximum number of files allowed in total. Only applied when `multiple` is true.
+         */
+        "maxFileCount"?: number;
+        "maxSize": number;
+        "multiple": boolean;
+        "name": string;
+        "noCaption": boolean;
+        "position": BcmUploadPosition;
+        "required": boolean;
+        "resetCaption": () => Promise<unknown>;
+        "set": (data: any) => Promise<void>;
+        "setClear": () => Promise<unknown>;
+        "setFocus": (options?: FocusOptions) => Promise<void>;
+        "showFileList": boolean;
+        "size": 'medium' | 'small';
+        /**
+          * Reserved for future backend upload integration. Currently does not affect component behavior.
+         */
+        "uploadUrl"?: string;
+        "value": any;
+    }
     interface BcmForm {
         "_id": string;
         "autocomplete": boolean;
@@ -770,6 +889,7 @@ export namespace Components {
         "targetId": string;
         "toggle": (wait?: boolean) => Promise<boolean>;
         "trigger": TrigglerTypes;
+        "updateLayout": () => Promise<void>;
     }
     interface BcmList {
         "_id": string;
@@ -818,7 +938,7 @@ export namespace Components {
         "selected": (id: any) => Promise<any>;
         "set": (data: any, trigger?: boolean) => Promise<void>;
         "setClear": (e?: any) => Promise<void>;
-        "show": () => Promise<void>;
+        "show": (openTriggerElement?: HTMLElement) => Promise<void>;
         "size": SizeTypes;
         "stopDeepClean": boolean;
         "tempId": string;
@@ -1935,6 +2055,10 @@ export interface BcmExpansionPanelCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmExpansionPanelElement;
 }
+export interface BcmFileUploadCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBcmFileUploadElement;
+}
 export interface BcmFormCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmFormElement;
@@ -2340,6 +2464,94 @@ declare global {
         prototype: HTMLBcmExpansionPanelElement;
         new (): HTMLBcmExpansionPanelElement;
     };
+    /**
+     * @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.
+     */
+    interface HTMLBcmFileUploadElement extends Components.BcmFileUpload, HTMLStencilElement {
+    }
+    var HTMLBcmFileUploadElement: {
+        prototype: HTMLBcmFileUploadElement;
+        new (): HTMLBcmFileUploadElement;
+    };
     interface HTMLBcmFormElement extends Components.BcmForm, HTMLStencilElement {
     }
     var HTMLBcmFormElement: {
@@ -2834,6 +3046,7 @@ declare global {
         "bcm-empty": HTMLBcmEmptyElement;
         "bcm-error-layout": HTMLBcmErrorLayoutElement;
         "bcm-expansion-panel": HTMLBcmExpansionPanelElement;
+        "bcm-file-upload": HTMLBcmFileUploadElement;
         "bcm-form": HTMLBcmFormElement;
         "bcm-form-2": HTMLBcmForm2Element;
         "bcm-form-group": HTMLBcmFormGroupElement;
@@ -3389,6 +3602,125 @@ declare namespace LocalJSX {
         "tooltip"?: any;
         "valid"?: boolean;
     }
+    /**
+     * @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.
+     */
+    interface BcmFileUpload {
+        "accept"?: string;
+        "buttonLabel"?: string;
+        "caption"?: string;
+        "captionError"?: string;
+        "captionType"?: string;
+        /**
+          * Allows consumers to override default error messages.
+         */
+        "customErrorMessages"?: BcmUploadErrorMessages;
+        "disabled"?: boolean;
+        "fullWidth"?: boolean;
+        "label"?: string;
+        /**
+          * Maximum number of files allowed in total. Only applied when `multiple` is true.
+         */
+        "maxFileCount"?: number;
+        "maxSize"?: number;
+        "multiple"?: boolean;
+        "name"?: string;
+        "noCaption"?: boolean;
+        "onBcm-blur"?: (event: BcmFileUploadCustomEvent<FocusEvent>) => void;
+        "onBcm-change"?: (event: BcmFileUploadCustomEvent<any>) => void;
+        "onBcm-file-change"?: (event: BcmFileUploadCustomEvent<File[]>) => void;
+        "onBcm-file-removed"?: (event: BcmFileUploadCustomEvent<BcmUploadItem>) => void;
+        "onBcm-focus"?: (event: BcmFileUploadCustomEvent<FocusEvent>) => void;
+        "onBcm-upload-canceled"?: (event: BcmFileUploadCustomEvent<BcmUploadItem>) => void;
+        "position"?: BcmUploadPosition;
+        "required"?: boolean;
+        "showFileList"?: boolean;
+        "size"?: 'medium' | 'small';
+        /**
+          * Reserved for future backend upload integration. Currently does not affect component behavior.
+         */
+        "uploadUrl"?: string;
+        "value"?: any;
+    }
     interface BcmForm {
         "_id"?: string;
         "autocomplete"?: boolean;
@@ -4658,6 +4990,7 @@ declare namespace LocalJSX {
         "bcm-empty": BcmEmpty;
         "bcm-error-layout": BcmErrorLayout;
         "bcm-expansion-panel": BcmExpansionPanel;
+        "bcm-file-upload": BcmFileUpload;
         "bcm-form": BcmForm;
         "bcm-form-2": BcmForm2;
         "bcm-form-group": BcmFormGroup;
@@ -4786,6 +5119,89 @@ declare module "@stencil/core" {
             "bcm-empty": LocalJSX.BcmEmpty & JSXBase.HTMLAttributes<HTMLBcmEmptyElement>;
             "bcm-error-layout": LocalJSX.BcmErrorLayout & JSXBase.HTMLAttributes<HTMLBcmErrorLayoutElement>;
             "bcm-expansion-panel": LocalJSX.BcmExpansionPanel & JSXBase.HTMLAttributes<HTMLBcmExpansionPanelElement>;
+            /**
+             * @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.
+             */
+            "bcm-file-upload": LocalJSX.BcmFileUpload & JSXBase.HTMLAttributes<HTMLBcmFileUploadElement>;
             "bcm-form": LocalJSX.BcmForm & JSXBase.HTMLAttributes<HTMLBcmFormElement>;
             "bcm-form-2": LocalJSX.BcmForm2 & JSXBase.HTMLAttributes<HTMLBcmForm2Element>;
             "bcm-form-group": LocalJSX.BcmFormGroup & JSXBase.HTMLAttributes<HTMLBcmFormGroupElement>;

package/dist/types/templates/list-item-template.d.ts

@@ -8,6 +8,8 @@ interface ListItemTemplateProps extends Bcm.ListItemClickEvent {
   size?: any;
   highlight?: any;
   focusItem?: (event: any) => void;
+  disabled?: boolean;
+  readonly?: boolean;
 }
 export declare const ListItemTemplate: FunctionalComponent<ListItemTemplateProps>;
 export {};

package/dist/types/templates/list-template.d.ts

@@ -28,6 +28,8 @@ interface ListTemplateProps extends Bcm.ListClickEvent {
   emptyIcon?: any;
   focusItem?: (event: any) => void;
   handleTransitionEnd?: (event: any) => void;
+  disabled?: boolean;
+  readonly?: boolean;
 }
 export declare const ListTemplate: FunctionalComponent<ListTemplateProps>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bromcom-ui",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.5",
   "description": "Bromcom UI is a collection of web components built with StencilJS",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",