bromcom-ui-next 0.1.29 → 0.1.31

package/dist/collection/components/modal/modal.component.js

@@ -1,128 +1,223 @@
 import { h } from "@stencil/core";
 import { tv } from "../../utils/tv";
+/**
+ * @component BcmModal
+ * @description A flexible modal dialog component built on the native HTML Dialog API.
+ * Provides a powerful way to display content in a layer above the page with full keyboard and focus management.
+ *
+ * @slot - Main content area of the modal
+ * @slot header - Custom header content (overrides header-text prop)
+ * @slot helper - Custom helper text content (overrides helper-text prop)
+ * @slot footer - Footer content for action buttons
+ *
+ * @part dialog - The native dialog element
+ * @part container - The container wrapper for centering and scrolling
+ * @part modal - The main modal box
+ * @part header - The header section
+ * @part header-content - The content wrapper inside header
+ * @part title - The title heading element
+ * @part helper-text - The helper text paragraph
+ * @part close-button - The close button in header
+ * @part content - The main content area
+ * @part footer - The footer section
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <bcm-modal open header-text="Welcome" helper-text="Please read carefully">
+ *   <p>Modal content goes here</p>
+ *   <div slot="footer">
+ *     <button data-dismiss>Close</button>
+ *   </div>
+ * </bcm-modal>
+ *
+ * <!-- Custom size and placement -->
+ * <bcm-modal size="large" placement="top">
+ *   <div slot="header">Custom Header</div>
+ *   <p>Content here</p>
+ *   <div slot="footer">
+ *     <button>Cancel</button>
+ *     <button>Confirm</button>
+ *   </div>
+ * </bcm-modal>
+ *
+ * <!-- Full screen modal -->
+ * <bcm-modal full-screen no-footer>
+ *   <p>Full screen content</p>
+ * </bcm-modal>
+ *
+ * <!-- Programmatic usage -->
+ * <bcm-modal id="myModal">Content</bcm-modal>
+ * <script>
+ *   document.getElementById('myModal').show();
+ * </script>
+ * ```
+ */
 export class BcmModal {
-    constructor() {
-        this.open = false;
-        this.size = 'medium';
-        this.placement = 'center';
-        this.backdrop = true;
-        this.fullWidth = false;
-        this.fullScreen = false;
-        this.noHeader = false;
-        this.noFooter = false;
-        this.closeOnBackdrop = true;
-        this.closeOnEscape = true;
-        this.isAnimating = false;
-        this.shake = false;
-        this.modalClass = tv({
-            slots: {
-                dialog: 'bcm-ui-element fixed inset-0 m-0 p-0 w-full max-w-full h-full max-h-full border-none bg-transparent backdrop:bg-color-default-dark backdrop:opacity-50 backdrop:transition-opacity backdrop:duration-300',
-                container: 'fixed inset-0 flex items-start justify-center p-4 overflow-y-auto overscroll-contain',
-                modal: 'relative bg-color-basic-base text-color-default rounded-lg shadow-2xl transform transition-all duration-300 ease-in-out flex flex-col',
-                header: 'flex justify-between items-start bg-color-base text-color-default border-color-default border-solid border-0 border-b rounded-t-lg',
-                headerContent: 'flex-1 min-w-0 flex items-center gap-2',
-                title: 'font-semibold m-0 text-size-6 text-color-header',
-                helperText: 'text-size-5 text-color-placeholder m-0',
-                closeButton: 'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 rounded hover:bg-color-default-hover cursor-pointer active:bg-color-active transition-colors flex-shrink-0 outline-none focus-visible:ring ',
-                content: 'flex-grow overflow-y-auto',
-                footer: 'flex items-center justify-end gap-2',
+    host;
+    dialogRef;
+    /**
+     * Controls whether the modal is open or closed
+     */
+    open = false;
+    /**
+     * The size of the modal
+     * - 'small': 400px
+     * - 'medium': 600px
+     * - 'large': 800px
+     * - 'xlarge': 1024px
+     * - 'xxlarge': 1200px
+     * - 'full': 100% width
+     */
+    size = 'medium';
+    /**
+     * The placement of the modal on the screen
+     * - 'center': Centered vertically and horizontally
+     * - 'top': Aligned to the top with 80px padding
+     */
+    placement = 'center';
+    /**
+     * Controls backdrop behavior
+     * - true: Shows backdrop, modal can be closed by clicking outside
+     * - false: No backdrop
+     * - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)
+     */
+    backdrop = true;
+    /**
+     * Makes the modal take full width of the viewport (max-width: 100%)
+     */
+    fullWidth = false;
+    /**
+     * Makes the modal take the full screen (100vw x 100vh, no border radius)
+     */
+    fullScreen = false;
+    /**
+     * Text to display in the modal header
+     */
+    headerText;
+    /**
+     * Helper text to display below the header title
+     */
+    helperText;
+    /**
+     * Hides the header section completely
+     */
+    noHeader = false;
+    /**
+     * Hides the footer section completely
+     */
+    noFooter = false;
+    /**
+     * Allows closing the modal by clicking on the backdrop
+     */
+    closeOnBackdrop = true;
+    /**
+     * Allows closing the modal by pressing the Escape key
+     */
+    closeOnEscape = true;
+    isAnimating = false;
+    shake = false;
+    /**
+     * Emitted after the modal has opened
+     */
+    bcmOpen;
+    /**
+     * Emitted after the modal has closed
+     */
+    bcmClose;
+    /**
+     * Emitted before the modal opens. Can be cancelled by calling event.preventDefault()
+     */
+    bcmBeforeOpen;
+    /**
+     * Emitted before the modal closes. Can be cancelled by calling event.preventDefault()
+     */
+    bcmBeforeClose;
+    modalClass = tv({
+        slots: {
+            dialog: 'bcm-ui-element fixed inset-0 m-0 p-0 w-full max-w-full h-full max-h-full border-none bg-transparent backdrop:bg-color-default-dark backdrop:opacity-50 backdrop:transition-opacity backdrop:duration-300',
+            container: 'fixed inset-0 flex items-start justify-center p-4 overflow-y-auto overscroll-contain',
+            modal: 'relative bg-color-basic-base text-color-default rounded-lg shadow-2xl transform transition-all duration-300 ease-in-out flex flex-col',
+            header: 'flex justify-between items-start bg-color-base text-color-default border-color-default border-solid border-0 border-b rounded-t-lg',
+            headerContent: 'flex-1 min-w-0 flex items-center gap-2',
+            title: 'font-semibold m-0 text-size-6 text-color-header',
+            helperText: 'text-size-5 text-color-placeholder m-0',
+            closeButton: 'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 rounded hover:bg-color-default-hover cursor-pointer active:bg-color-active transition-colors flex-shrink-0 outline-none focus-visible:ring ',
+            content: 'flex-grow overflow-y-auto',
+            footer: 'flex items-center justify-end gap-2',
+        },
+        variants: {
+            open: {
+                true: {
+                    modal: 'opacity-100 translate-y-0 scale-100',
+                },
+                false: {
+                    modal: 'opacity-0 -translate-y-4 scale-95',
+                },
             },
-            variants: {
-                open: {
-                    true: {
-                        modal: 'opacity-100 translate-y-0 scale-100',
-                    },
-                    false: {
-                        modal: 'opacity-0 -translate-y-4 scale-95',
-                    },
+            placement: {
+                center: {
+                    container: 'items-center',
                 },
-                placement: {
-                    center: {
-                        container: 'items-center',
-                    },
-                    top: {
-                        container: 'items-start pt-20',
-                    },
+                top: {
+                    container: 'items-start pt-20',
                 },
-                size: {
-                    small: {
-                        header: 'py-3 px-4',
-                        content: 'p-4',
-                        footer: 'py-3 px-4',
-                    },
-                    medium: {
-                        header: 'py-4 px-5',
-                        content: 'p-5',
-                        footer: 'py-4 px-5',
-                    },
-                    large: {
-                        header: 'py-4 px-6',
-                        content: 'p-6',
-                        footer: 'py-4 px-6',
-                    },
-                    xlarge: {
-                        header: 'py-5 px-6',
-                        content: 'p-6',
-                        footer: 'py-5 px-6',
-                    },
-                    xxlarge: {
-                        header: 'py-5 px-8',
-                        content: 'p-8',
-                        footer: 'py-5 px-8',
-                    },
-                    full: {
-                        header: 'py-5 px-8',
-                        content: 'p-8',
-                        footer: 'py-5 px-8',
-                    },
+            },
+            size: {
+                small: {
+                    header: 'py-3 px-4',
+                    content: 'p-4',
+                    footer: 'py-3 px-4',
+                },
+                medium: {
+                    header: 'py-4 px-5',
+                    content: 'p-5',
+                    footer: 'py-4 px-5',
+                },
+                large: {
+                    header: 'py-4 px-6',
+                    content: 'p-6',
+                    footer: 'py-4 px-6',
+                },
+                xlarge: {
+                    header: 'py-5 px-6',
+                    content: 'p-6',
+                    footer: 'py-5 px-6',
+                },
+                xxlarge: {
+                    header: 'py-5 px-8',
+                    content: 'p-8',
+                    footer: 'py-5 px-8',
+                },
+                full: {
+                    header: 'py-5 px-8',
+                    content: 'p-8',
+                    footer: 'py-5 px-8',
                 },
-                fullScreen: {
-                    true: {
-                        modal: 'rounded-none w-screen h-screen max-w-none max-h-none',
-                        container: 'p-0',
-                    },
+            },
+            fullScreen: {
+                true: {
+                    modal: 'rounded-none w-screen h-screen max-w-none max-h-none',
+                    container: 'p-0',
                 },
-                shake: {
-                    true: {
-                        modal: 'animate-shake',
-                    },
+            },
+            shake: {
+                true: {
+                    modal: 'animate-shake',
                 },
-                noHeader: {
-                    true: {
-                        header: 'hidden',
-                    },
+            },
+            noHeader: {
+                true: {
+                    header: 'hidden',
                 },
-                noFooter: {
-                    true: {
-                        footer: 'hidden',
-                    },
+            },
+            noFooter: {
+                true: {
+                    footer: 'hidden',
                 },
             },
-        });
-        this.handleBackdropClick = (event) => {
-            const target = event.target;
-            // Check if click is on the container (backdrop area), not on modal content
-            if (target.getAttribute('part') === 'container') {
-                if (this.backdrop === 'static') {
-                    this.shakeModal();
-                }
-                else if (this.closeOnBackdrop) {
-                    this.hide();
-                }
-            }
-        };
-        this.handleDialogCancel = (event) => {
-            event.preventDefault();
-            if (this.closeOnEscape) {
-                if (this.backdrop === 'static') {
-                    this.shakeModal();
-                }
-                else {
-                    this.hide();
-                }
-            }
-        };
-    }
+        },
+    });
     async handleOpenChange(isOpen) {
         if (isOpen) {
             this.isAnimating = true;
@@ -159,8 +254,8 @@ export class BcmModal {
     handleClick(event) {
         // Use composedPath to work with shadow DOM and slots
         const path = event.composedPath();
-        const dismissElement = path.find(el => { var _a; return (_a = el.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'data-dismiss'); });
-        const closeModalElement = path.find(el => { var _a; return (_a = el.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'data-close-modal'); });
+        const dismissElement = path.find(el => el.hasAttribute?.('data-dismiss'));
+        const closeModalElement = path.find(el => el.hasAttribute?.('data-close-modal'));
         if (dismissElement) {
             this.hide();
             event.preventDefault();
@@ -198,12 +293,21 @@ export class BcmModal {
             }
         }
     }
+    /**
+     * Programmatically opens the modal
+     */
     async show() {
         this.open = true;
     }
+    /**
+     * Programmatically closes the modal
+     */
     async hide() {
         this.open = false;
     }
+    /**
+     * Toggles the modal open/closed state
+     */
     async toggle() {
         this.open = !this.open;
     }
@@ -213,6 +317,29 @@ export class BcmModal {
             this.shake = false;
         }, 300);
     }
+    handleBackdropClick = (event) => {
+        const target = event.target;
+        // Check if click is on the container (backdrop area), not on modal content
+        if (target.getAttribute('part') === 'container') {
+            if (this.backdrop === 'static') {
+                this.shakeModal();
+            }
+            else if (this.closeOnBackdrop) {
+                this.hide();
+            }
+        }
+    };
+    handleDialogCancel = (event) => {
+        event.preventDefault();
+        if (this.closeOnEscape) {
+            if (this.backdrop === 'static') {
+                this.shakeModal();
+            }
+            else {
+                this.hide();
+            }
+        }
+    };
     getModalStyle() {
         if (this.fullScreen) {
             return {
@@ -262,7 +389,7 @@ export class BcmModal {
             noHeader: this.noHeader,
             noFooter: this.noFooter,
         });
-        return (h("dialog", { key: 'c56eace3816f22ce8c5c3d779940c32c1a2504fe', ref: el => (this.dialogRef = el), part: "dialog", class: dialog(), onClick: this.handleBackdropClick, onCancel: this.handleDialogCancel, "aria-labelledby": "modal-title", "aria-describedby": this.helperText ? 'modal-helper' : undefined, "aria-modal": "true" }, h("div", { key: '0c8185cd161cb0dafcbd8a6c5f67528cd32c23de', part: "container", class: container() }, h("div", { key: 'ff66ec6396147a71d7819ae5e2f00ca38070b306', part: "modal", class: modal(), style: this.getModalStyle(), role: "document", onClick: e => e.stopPropagation() }, !this.noHeader && (h("div", { key: '4cc6b28b668fe76dcaee1138887183ea98466cbe', part: "header", class: header() }, h("div", { key: '8b005c9d586d4d2527c0319c4d17512650479bb0', part: "header-content", class: headerContent() }, h("h2", { key: '756e7f7f7e0d7b2b8c1f476fcb2b00a204884b8e', id: "modal-title", part: "title", class: title() }, h("slot", { key: 'd814bb4b44e47455ded1b0f737c8ddf61fddf9b3', name: "header" }, this.headerText)), this.helperText && (h("p", { key: '7c385f9dce88bc22bf0b7700bb2b289b7803683e', id: "modal-helper", part: "helper-text", class: helperText() }, h("slot", { key: '57bdf3201dd678a1ebdda9893b67032ff773fd05', name: "helper" }, this.helperText)))), h("button", { key: '6bcdfc24e13b375f81c9664a20b552a3f0c5d591', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close modal", type: "button" }, h("bcm-icon", { key: '894f44177f0acbf3e581cbae5cdc76f71e321b57', name: "fa-solid fa-xmark" })))), h("div", { key: '74db820df232cb7728c8a58923a9459b9545e8a1', part: "content", class: content() }, h("slot", { key: '95fd04fbbb441d79d649fd68eeef3868ce65bccc' })), !this.noFooter && (h("div", { key: '7c841bfe1a35abc8d9fe031eb0c8fed5a131db4e', part: "footer", class: footer() }, h("slot", { key: '9bd84178717338a821204f81179571a48bfd1f66', name: "footer" })))))));
+        return (h("dialog", { key: '604224de7fad889eff33705ec549d41927728f7d', ref: el => (this.dialogRef = el), part: "dialog", class: dialog(), onClick: this.handleBackdropClick, onCancel: this.handleDialogCancel, "aria-labelledby": "modal-title", "aria-describedby": this.helperText ? 'modal-helper' : undefined, "aria-modal": "true" }, h("div", { key: '7182bea36412891a27153711392e9e70920ac9c4', part: "container", class: container() }, h("div", { key: 'a8ad382c7766e1db2fc330aa73479bb3e5002eff', part: "modal", class: modal(), style: this.getModalStyle(), role: "document", onClick: e => e.stopPropagation() }, !this.noHeader && (h("div", { key: '8ea66d15bc39c5b06d887529e8af07020bfe4fc4', part: "header", class: header() }, h("div", { key: '24ed7baca534c2016a0e6abcaa396643ab91f5c7', part: "header-content", class: headerContent() }, h("h2", { key: '4dd835faebd8b96c1a77dfc07731aa76418e2afc', id: "modal-title", part: "title", class: title() }, h("slot", { key: 'bf2d40045ccc6040d990d7caccbefa1e0f9e9164', name: "header" }, this.headerText)), this.helperText && (h("p", { key: '4dac43e3355fc7d53500dc90fcbfe3191e174c76', id: "modal-helper", part: "helper-text", class: helperText() }, h("slot", { key: 'dd37c548df818e4a758bdeede4dc0fd49ca241a3', name: "helper" }, this.helperText)))), h("button", { key: '38262ebb76c8d471f4e6070c32e3a4ef4ca01007', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close modal", type: "button" }, h("bcm-icon", { key: '69fca23e4377193ead2931283c6321df9189e3c7', name: "fa-solid fa-xmark" })))), h("div", { key: 'e67d5ee554203441246394a2062d4a5662f04b21', part: "content", class: content() }, h("slot", { key: '71020c0e5593186befb4ea9841b459986a6dfc2b' })), !this.noFooter && (h("div", { key: '12bf38555e3cf905a56543a24742746364c3a41d', part: "footer", class: footer() }, h("slot", { key: 'afc38ce22fcb46b85795f8d95eab2f20c6ef3deb', name: "footer" })))))));
     }
     static get is() { return "bcm-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -280,7 +407,6 @@ export class BcmModal {
         return {
             "open": {
                 "type": "boolean",
-                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -291,16 +417,16 @@ export class BcmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Controls whether the modal is open or closed"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "ModalSize",
@@ -317,16 +443,16 @@ export class BcmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The size of the modal\n- 'small': 400px\n- 'medium': 600px\n- 'large': 800px\n- 'xlarge': 1024px\n- 'xxlarge': 1200px\n- 'full': 100% width"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "placement": {
                 "type": "string",
-                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "ModalPlacement",
@@ -343,16 +469,16 @@ export class BcmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The placement of the modal on the screen\n- 'center': Centered vertically and horizontally\n- 'top': Aligned to the top with 80px padding"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "placement",
                 "defaultValue": "'center'"
             },
             "backdrop": {
                 "type": "any",
-                "attribute": "backdrop",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean | 'static'",
@@ -363,16 +489,16 @@ export class BcmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Controls backdrop behavior\n- true: Shows backdrop, modal can be closed by clicking outside\n- false: No backdrop\n- 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "backdrop",
                 "defaultValue": "true"
             },
             "fullWidth": {
                 "type": "boolean",
-                "attribute": "full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -383,16 +509,16 @@ export class BcmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Makes the modal take full width of the viewport (max-width: 100%)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "full-width",
                 "defaultValue": "false"
             },
             "fullScreen": {
                 "type": "boolean",
-                "attribute": "full-screen",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -403,16 +529,16 @@ export class BcmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Makes the modal take the full screen (100vw x 100vh, no border radius)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "full-screen",
                 "defaultValue": "false"
             },
             "headerText": {
                 "type": "string",
-                "attribute": "header-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -423,15 +549,15 @@ export class BcmModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text to display in the modal header"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "header-text"
             },
             "helperText": {
                 "type": "string",
-                "attribute": "helper-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -442,15 +568,15 @@ export class BcmModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Helper text to display below the header title"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper-text"
             },
             "noHeader": {
                 "type": "boolean",
-                "attribute": "no-header",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -461,16 +587,16 @@ export class BcmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Hides the header section completely"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "no-header",
                 "defaultValue": "false"
             },
             "noFooter": {
                 "type": "boolean",
-                "attribute": "no-footer",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -481,16 +607,16 @@ export class BcmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Hides the footer section completely"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "no-footer",
                 "defaultValue": "false"
             },
             "closeOnBackdrop": {
                 "type": "boolean",
-                "attribute": "close-on-backdrop",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -501,16 +627,16 @@ export class BcmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Allows closing the modal by clicking on the backdrop"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "close-on-backdrop",
                 "defaultValue": "true"
             },
             "closeOnEscape": {
                 "type": "boolean",
-                "attribute": "close-on-escape",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -521,11 +647,12 @@ export class BcmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Allows closing the modal by pressing the Escape key"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "close-on-escape",
                 "defaultValue": "true"
             }
         };
@@ -545,7 +672,7 @@ export class BcmModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted after the modal has opened"
                 },
                 "complexType": {
                     "original": "void",
@@ -560,7 +687,7 @@ export class BcmModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted after the modal has closed"
                 },
                 "complexType": {
                     "original": "void",
@@ -575,7 +702,7 @@ export class BcmModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted before the modal opens. Can be cancelled by calling event.preventDefault()"
                 },
                 "complexType": {
                     "original": "void",
@@ -590,7 +717,7 @@ export class BcmModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted before the modal closes. Can be cancelled by calling event.preventDefault()"
                 },
                 "complexType": {
                     "original": "void",
@@ -614,7 +741,7 @@ export class BcmModal {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Programmatically opens the modal",
                     "tags": []
                 }
             },
@@ -631,7 +758,7 @@ export class BcmModal {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Programmatically closes the modal",
                     "tags": []
                 }
             },
@@ -648,7 +775,7 @@ export class BcmModal {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Toggles the modal open/closed state",
                     "tags": []
                 }
             }