bromcom-ui-next 0.1.30 → 0.1.31

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

@@ -54,154 +54,148 @@ import { tv } from "../../utils/tv";
  * ```
  */
 export class BcmDrawer {
-    constructor() {
-        /**
-         * Controls whether the drawer is open or closed
-         */
-        this.open = false;
-        /**
-         * The size of the drawer. Can be a preset value or a custom CSS size
-         * - For left/right drawers:
-         *   - 'small': 320px
-         *   - 'medium': 480px
-         *   - 'large': 1064px
-         * - For top/bottom drawers:
-         *   - 'small': 40vh
-         *   - 'medium': 60vh
-         *   - 'large': 90vh
-         * - Custom values: Any valid CSS size (e.g., '600px', '50%', '30rem', '80vw')
-         */
-        this.size = 'medium';
-        /**
-         * The position where the drawer slides in from
-         * - 'left': Slides from the left edge
-         * - 'right': Slides from the right edge
-         * - 'top': Slides from the top edge
-         * - 'bottom': Slides from the bottom edge
-         */
-        this.position = 'right';
-        /**
-         * Makes the drawer take full width (for left/right) or full height (for top/bottom)
-         */
-        this.fullWidth = false;
-        /**
-         * Makes the drawer take the full screen (100vw x 100vh)
-         */
-        this.fullScreen = false;
-        /**
-         * Controls backdrop behavior
-         * - true: Shows backdrop, drawer can be closed by clicking outside
-         * - false: No backdrop
-         * - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)
-         */
-        this.backdrop = true;
-        /**
-         * Hides the header section completely
-         */
-        this.noHeader = false;
-        /**
-         * Hides the footer section completely
-         */
-        this.noFooter = false;
-        /**
-         * Allows closing the drawer by clicking on the backdrop
-         */
-        this.closeOnBackdrop = true;
-        /**
-         * Allows closing the drawer by pressing the Escape key
-         */
-        this.closeOnEscape = true;
-        this.shake = false;
-        this.drawerClass = 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',
-                container: 'fixed inset-0 flex overflow-hidden',
-                drawer: 'relative bg-color-base text-color-default shadow-2xl flex flex-col',
-                header: 'flex justify-between items-start bg-color-base text-color-default border-color-default border-solid border-0 py-3 px-4',
-                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 p-4',
-                footer: 'flex items-center justify-end gap-2 py-3 px-4',
-            },
-            variants: {
-                position: {
-                    left: {
-                        container: 'justify-start',
-                        drawer: 'h-full',
-                        header: 'border-b',
-                    },
-                    right: {
-                        container: 'justify-end',
-                        drawer: 'h-full',
-                        header: 'border-b',
-                    },
-                    top: {
-                        container: 'items-start',
-                        drawer: 'w-full',
-                        header: 'border-b',
-                    },
-                    bottom: {
-                        container: 'items-end',
-                        drawer: 'w-full',
-                        header: 'border-t',
-                    },
+    host;
+    dialogRef;
+    /**
+     * Controls whether the drawer is open or closed
+     */
+    open = false;
+    /**
+     * The size of the drawer. Can be a preset value or a custom CSS size
+     * - For left/right drawers:
+     *   - 'small': 320px
+     *   - 'medium': 480px
+     *   - 'large': 1064px
+     * - For top/bottom drawers:
+     *   - 'small': 40vh
+     *   - 'medium': 60vh
+     *   - 'large': 90vh
+     * - Custom values: Any valid CSS size (e.g., '600px', '50%', '30rem', '80vw')
+     */
+    size = 'medium';
+    /**
+     * The position where the drawer slides in from
+     * - 'left': Slides from the left edge
+     * - 'right': Slides from the right edge
+     * - 'top': Slides from the top edge
+     * - 'bottom': Slides from the bottom edge
+     */
+    position = 'right';
+    /**
+     * Makes the drawer take full width (for left/right) or full height (for top/bottom)
+     */
+    fullWidth = false;
+    /**
+     * Makes the drawer take the full screen (100vw x 100vh)
+     */
+    fullScreen = false;
+    /**
+     * Controls backdrop behavior
+     * - true: Shows backdrop, drawer can be closed by clicking outside
+     * - false: No backdrop
+     * - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)
+     */
+    backdrop = true;
+    /**
+     * Text to display in the drawer 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 drawer by clicking on the backdrop
+     */
+    closeOnBackdrop = true;
+    /**
+     * Allows closing the drawer by pressing the Escape key
+     */
+    closeOnEscape = true;
+    shake = false;
+    /**
+     * Emitted after the drawer has opened
+     */
+    bcmOpen;
+    /**
+     * Emitted after the drawer has closed
+     */
+    bcmClose;
+    /**
+     * Emitted before the drawer opens. Can be cancelled by calling event.preventDefault()
+     */
+    bcmBeforeOpen;
+    /**
+     * Emitted before the drawer closes. Can be cancelled by calling event.preventDefault()
+     */
+    bcmBeforeClose;
+    drawerClass = 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',
+            container: 'fixed inset-0 flex overflow-hidden',
+            drawer: 'relative bg-color-base text-color-default shadow-2xl flex flex-col',
+            header: 'flex justify-between items-start bg-color-base text-color-default border-color-default border-solid border-0 py-3 px-4',
+            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 p-4',
+            footer: 'flex items-center justify-end gap-2 py-3 px-4',
+        },
+        variants: {
+            position: {
+                left: {
+                    container: 'justify-start',
+                    drawer: 'h-full',
+                    header: 'border-b',
+                },
+                right: {
+                    container: 'justify-end',
+                    drawer: 'h-full',
+                    header: 'border-b',
+                },
+                top: {
+                    container: 'items-start',
+                    drawer: 'w-full',
+                    header: 'border-b',
+                },
+                bottom: {
+                    container: 'items-end',
+                    drawer: 'w-full',
+                    header: 'border-t',
                 },
-                fullScreen: {
-                    true: {
-                        drawer: 'w-screen h-screen max-w-none max-h-none',
-                        container: 'p-0',
-                    },
+            },
+            fullScreen: {
+                true: {
+                    drawer: 'w-screen h-screen max-w-none max-h-none',
+                    container: 'p-0',
                 },
-                shake: {
-                    true: {
-                        drawer: 'animate-shake',
-                    },
+            },
+            shake: {
+                true: {
+                    drawer: '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 drawer content
-            if (target.getAttribute('part') === 'container') {
-                if (this.backdrop === 'static') {
-                    this.shakeDrawer();
-                }
-                else if (this.closeOnBackdrop) {
-                    this.hide();
-                }
-            }
-        };
-        this.handleDialogCancel = (event) => {
-            event.preventDefault();
-            if (this.backdrop === 'static') {
-                this.shakeDrawer();
-                // Force dialog to stay open for static backdrop
-                requestAnimationFrame(() => {
-                    if (this.dialogRef && !this.dialogRef.open && this.open) {
-                        this.dialogRef.showModal();
-                    }
-                });
-            }
-            else if (this.closeOnEscape) {
-                this.hide();
-            }
-        };
-        this.handleDrawerClick = (e) => {
-            e.stopPropagation();
-        };
-    }
+        },
+    });
     handleOpenChange(isOpen) {
         if (isOpen) {
             const event = this.bcmBeforeOpen.emit();
@@ -230,7 +224,7 @@ export class BcmDrawer {
     }
     handleClick(event) {
         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 dismissElement = path.find(el => el.hasAttribute?.('data-dismiss'));
         if (dismissElement) {
             this.hide();
             event.preventDefault();
@@ -261,6 +255,36 @@ export class BcmDrawer {
             this.shake = false;
         }, 300);
     }
+    handleBackdropClick = (event) => {
+        const target = event.target;
+        // Check if click is on the container (backdrop area), not on drawer content
+        if (target.getAttribute('part') === 'container') {
+            if (this.backdrop === 'static') {
+                this.shakeDrawer();
+            }
+            else if (this.closeOnBackdrop) {
+                this.hide();
+            }
+        }
+    };
+    handleDialogCancel = (event) => {
+        event.preventDefault();
+        if (this.backdrop === 'static') {
+            this.shakeDrawer();
+            // Force dialog to stay open for static backdrop
+            requestAnimationFrame(() => {
+                if (this.dialogRef && !this.dialogRef.open && this.open) {
+                    this.dialogRef.showModal();
+                }
+            });
+        }
+        else if (this.closeOnEscape) {
+            this.hide();
+        }
+    };
+    handleDrawerClick = (e) => {
+        e.stopPropagation();
+    };
     componentDidLoad() {
         if (this.open && this.dialogRef) {
             this.dialogRef.showModal();
@@ -337,7 +361,7 @@ export class BcmDrawer {
             noHeader: this.noHeader,
             noFooter: this.noFooter,
         });
-        return (h("dialog", { key: '2b60e637660a9aaed3d1223114d2f0df4c66bb44', ref: el => (this.dialogRef = el), part: "dialog", class: dialog(), onClick: this.handleBackdropClick, onCancel: this.handleDialogCancel, "aria-labelledby": "drawer-title", "aria-describedby": this.helperText ? 'drawer-helper' : undefined, "aria-modal": "true" }, h("div", { key: 'd08f1664dfc39e62bc0cf499b5976af0e14310da', part: "container", class: container() }, h("div", { key: 'ec18449ff5552177551606c5fdd48ce9116fd287', part: "drawer", class: drawer(), style: this.getDrawerStyle(), role: "document", onClick: this.handleDrawerClick }, !this.noHeader && (h("div", { key: '43a3e3afd31c5db5cf9c616f01a3212ec6e3472b', part: "header", class: header() }, h("div", { key: 'bb3d4eea627e0425422015cc400ccea81c70a1a5', part: "header-content", class: headerContent() }, h("h2", { key: '5c5cbd204a44f31171b932fba0932bfcba89e255', id: "drawer-title", part: "title", class: title() }, h("slot", { key: 'c8785c89adb151666c76c158c82f3e9ca6666199', name: "header" }, this.headerText)), this.helperText && (h("p", { key: '2ca315ad22086559305dc0cdcd63f32115a4f721', id: "drawer-helper", part: "helper-text", class: helperText() }, h("slot", { key: '93dcafee1e25675a0e72b53d9d6c848fd63c2f86', name: "helper" }, this.helperText)))), h("button", { key: '1eb3d5b2e9ac607bd1642ca9f067064bf376ce97', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close drawer", type: "button" }, h("bcm-icon", { key: '0c48991f9d68c874b78384de0d8a3bd15b27f363', name: "fa-solid fa-xmark" })))), h("div", { key: 'd34a886ca003e38bc84b86185fd0b5690954fd9f', part: "content", class: content() }, h("slot", { key: '1c3978b0a66f122b5d4ee5582ed0458c6fc16c73' })), !this.noFooter && (h("div", { key: 'db5faf3da663d11455299840e33732995aa75cf0', part: "footer", class: footer() }, h("slot", { key: '4836d78626ec999eb8f0aa8585d20df48a677f72', name: "footer" })))))));
+        return (h("dialog", { key: '6a335177fb3c90ad206bba7f7c7a93a20df7611e', ref: el => (this.dialogRef = el), part: "dialog", class: dialog(), onClick: this.handleBackdropClick, onCancel: this.handleDialogCancel, "aria-labelledby": "drawer-title", "aria-describedby": this.helperText ? 'drawer-helper' : undefined, "aria-modal": "true" }, h("div", { key: '2eeea8a2a6736013dcec73021e24bb3db6a921c7', part: "container", class: container() }, h("div", { key: 'a36fd40e00c83334d47715c2b180a0408b0a08b3', part: "drawer", class: drawer(), style: this.getDrawerStyle(), role: "document", onClick: this.handleDrawerClick }, !this.noHeader && (h("div", { key: '89f9e92c08969aca42d298b4648fdb2439babb73', part: "header", class: header() }, h("div", { key: '8812211450386c31d1e4ec8ea7a2378606aa126b', part: "header-content", class: headerContent() }, h("h2", { key: '41f3e0d6956ec421641bdc1a69e7f6deeb7ef139', id: "drawer-title", part: "title", class: title() }, h("slot", { key: 'b8623778b2a1c43721bf744a0b121c11bb1cca55', name: "header" }, this.headerText)), this.helperText && (h("p", { key: '79303d4ba960c904baa9e2f1649a4d1f69081c53', id: "drawer-helper", part: "helper-text", class: helperText() }, h("slot", { key: '9cbd0e00c5d2f2655afd86d173defcdddb80ec84', name: "helper" }, this.helperText)))), h("button", { key: '459c89390be0fe8edbfd865d49fc20518e620e4a', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close drawer", type: "button" }, h("bcm-icon", { key: '4bc80633645791203b4b2fc0619bc78343376467', name: "fa-solid fa-xmark" })))), h("div", { key: '131da58022d71653d81ba64d95796c1c1a1253d5', part: "content", class: content() }, h("slot", { key: 'a32114b0afa5dbf12b865d4005a880bf40e57c84' })), !this.noFooter && (h("div", { key: 'afad547deecb9cdaf80e92fbbf6fb1b0780a7be7', part: "footer", class: footer() }, h("slot", { key: '0b09555a831909c6211d744d49759a2d0bc5e0a1', name: "footer" })))))));
     }
     static get is() { return "bcm-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/drawer/drawer.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.component.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { DrawerPosition, DrawerSize } from './types';\n\n/**\n * @component BcmDrawer\n * @description A slide-in panel component built on the native HTML Dialog API.\n * Ideal for navigation menus, forms, and contextual information that slides in from any edge of the screen.\n *\n * @slot - Main content area of the drawer\n * @slot header - Custom header content (overrides headerText prop)\n * @slot helper - Custom helper text content (overrides helper-text prop)\n * @slot footer - Footer content for action buttons\n *\n * @part dialog - The native dialog element\n * @part container - The container wrapper for positioning\n * @part drawer - The main drawer panel\n * @part header - The header section\n * @part header-content - The content wrapper inside header\n * @part title - The title heading element\n * @part helper-text - The helper text paragraph\n * @part close-button - The close button in header\n * @part content - The main content area\n * @part footer - The footer section\n *\n * @example\n * ```html\n * <!-- Basic usage -->\n * <bcm-drawer open header-text=\"Menu\" position=\"left\">\n *   <nav>\n *     <a href=\"/home\">Home</a>\n *     <a href=\"/about\">About</a>\n *   </nav>\n * </bcm-drawer>\n *\n * <!-- Custom size and position -->\n * <bcm-drawer size=\"large\" position=\"right\">\n *   <div slot=\"header\">Settings</div>\n *   <form>...</form>\n *   <div slot=\"footer\">\n *     <button data-dismiss>Cancel</button>\n *     <button>Save</button>\n *   </div>\n * </bcm-drawer>\n *\n * <!-- Custom size with CSS units -->\n * <bcm-drawer size=\"600px\" position=\"bottom\">\n *   <p>Custom height drawer</p>\n * </bcm-drawer>\n *\n * <!-- Programmatic usage -->\n * <bcm-drawer id=\"myDrawer\">Content</bcm-drawer>\n * <script>\n *   document.getElementById('myDrawer').show();\n * </script>\n * ```\n */\n@Component({\n  tag: 'bcm-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class BcmDrawer {\n  @Element() host: HTMLBcmDrawerElement;\n\n  private dialogRef?: HTMLDialogElement;\n\n  /**\n   * Controls whether the drawer is open or closed\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * The size of the drawer. Can be a preset value or a custom CSS size\n   * - For left/right drawers:\n   *   - 'small': 320px\n   *   - 'medium': 480px\n   *   - 'large': 1064px\n   * - For top/bottom drawers:\n   *   - 'small': 40vh\n   *   - 'medium': 60vh\n   *   - 'large': 90vh\n   * - Custom values: Any valid CSS size (e.g., '600px', '50%', '30rem', '80vw')\n   */\n  @Prop() size: DrawerSize = 'medium';\n\n  /**\n   * The position where the drawer slides in from\n   * - 'left': Slides from the left edge\n   * - 'right': Slides from the right edge\n   * - 'top': Slides from the top edge\n   * - 'bottom': Slides from the bottom edge\n   */\n  @Prop({ reflect: true }) position: DrawerPosition = 'right';\n\n  /**\n   * Makes the drawer take full width (for left/right) or full height (for top/bottom)\n   */\n  @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n\n  /**\n   * Makes the drawer take the full screen (100vw x 100vh)\n   */\n  @Prop({ attribute: 'full-screen' }) fullScreen: boolean = false;\n\n  /**\n   * Controls backdrop behavior\n   * - true: Shows backdrop, drawer can be closed by clicking outside\n   * - false: No backdrop\n   * - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)\n   */\n  @Prop() backdrop: boolean | 'static' = true;\n\n  /**\n   * Text to display in the drawer header\n   */\n  @Prop() headerText?: string;\n\n  /**\n   * Helper text to display below the header title\n   */\n  @Prop({ attribute: 'helper-text' }) helperText?: string;\n\n  /**\n   * Hides the header section completely\n   */\n  @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n\n  /**\n   * Hides the footer section completely\n   */\n  @Prop({ attribute: 'no-footer' }) noFooter: boolean = false;\n\n  /**\n   * Allows closing the drawer by clicking on the backdrop\n   */\n  @Prop({ attribute: 'close-on-backdrop' }) closeOnBackdrop: boolean = true;\n\n  /**\n   * Allows closing the drawer by pressing the Escape key\n   */\n  @Prop({ attribute: 'close-on-escape' }) closeOnEscape: boolean = true;\n\n  @State() shake: boolean = false;\n\n  /**\n   * Emitted after the drawer has opened\n   */\n  @Event() bcmOpen: EventEmitter<void>;\n\n  /**\n   * Emitted after the drawer has closed\n   */\n  @Event() bcmClose: EventEmitter<void>;\n\n  /**\n   * Emitted before the drawer opens. Can be cancelled by calling event.preventDefault()\n   */\n  @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n\n  /**\n   * Emitted before the drawer closes. Can be cancelled by calling event.preventDefault()\n   */\n  @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n  private drawerClass = tv({\n    slots: {\n      dialog:\n        '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',\n      container: 'fixed inset-0 flex overflow-hidden',\n      drawer: 'relative bg-color-base text-color-default shadow-2xl flex flex-col',\n      header: 'flex justify-between items-start bg-color-base text-color-default border-color-default border-solid border-0 py-3 px-4',\n      headerContent: 'flex-1 min-w-0 flex items-center gap-2',\n      title: 'font-semibold m-0 text-size-6 text-color-header',\n      helperText: 'text-size-5 text-color-placeholder m-0',\n      closeButton:\n        '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',\n      content: 'flex-grow overflow-y-auto p-4',\n      footer: 'flex items-center justify-end gap-2 py-3 px-4',\n    },\n    variants: {\n      position: {\n        left: {\n          container: 'justify-start',\n          drawer: 'h-full',\n          header: 'border-b',\n        },\n        right: {\n          container: 'justify-end',\n          drawer: 'h-full',\n          header: 'border-b',\n        },\n        top: {\n          container: 'items-start',\n          drawer: 'w-full',\n          header: 'border-b',\n        },\n        bottom: {\n          container: 'items-end',\n          drawer: 'w-full',\n          header: 'border-t',\n        },\n      },\n      fullScreen: {\n        true: {\n          drawer: 'w-screen h-screen max-w-none max-h-none',\n          container: 'p-0',\n        },\n      },\n      shake: {\n        true: {\n          drawer: 'animate-shake',\n        },\n      },\n      noHeader: {\n        true: {\n          header: 'hidden',\n        },\n      },\n      noFooter: {\n        true: {\n          footer: 'hidden',\n        },\n      },\n    },\n  });\n\n  @Watch('open')\n  handleOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      const event = this.bcmBeforeOpen.emit();\n      if (event.defaultPrevented) {\n        this.open = false;\n        return;\n      }\n\n      if (this.dialogRef) {\n        if (!this.dialogRef.open) {\n          this.dialogRef.showModal();\n        }\n      }\n\n      this.bcmOpen.emit();\n    } else {\n      const event = this.bcmBeforeClose.emit();\n      if (event.defaultPrevented) {\n        this.open = true;\n        return;\n      }\n\n      if (this.dialogRef && this.dialogRef.open) {\n        this.dialogRef.close();\n      }\n      this.bcmClose.emit();\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    const path = event.composedPath() as HTMLElement[];\n    const dismissElement = path.find(el => el.hasAttribute?.('data-dismiss'));\n\n    if (dismissElement) {\n      this.hide();\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n\n  /**\n   * Programmatically opens the drawer\n   */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /**\n   * Programmatically closes the drawer\n   */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * Toggles the drawer open/closed state\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this.open = !this.open;\n  }\n\n  private shakeDrawer() {\n    this.shake = true;\n    setTimeout(() => {\n      this.shake = false;\n    }, 300);\n  }\n\n  private handleBackdropClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    // Check if click is on the container (backdrop area), not on drawer content\n    if (target.getAttribute('part') === 'container') {\n      if (this.backdrop === 'static') {\n        this.shakeDrawer();\n      } else if (this.closeOnBackdrop) {\n        this.hide();\n      }\n    }\n  };\n\n  private handleDialogCancel = (event: Event) => {\n    event.preventDefault();\n    if (this.backdrop === 'static') {\n      this.shakeDrawer();\n      // Force dialog to stay open for static backdrop\n      requestAnimationFrame(() => {\n        if (this.dialogRef && !this.dialogRef.open && this.open) {\n          this.dialogRef.showModal();\n        }\n      });\n    } else if (this.closeOnEscape) {\n      this.hide();\n    }\n  };\n\n  private handleDrawerClick = (e: MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  componentDidLoad() {\n    if (this.open && this.dialogRef) {\n      this.dialogRef.showModal();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.dialogRef && this.open) {\n      this.dialogRef.close();\n    }\n  }\n\n  private getDrawerStyle() {\n    const style: { [key: string]: string } = {};\n\n    if (this.fullScreen) {\n      style.width = '100vw';\n      style.height = '100vh';\n      style.maxWidth = 'none';\n      style.maxHeight = 'none';\n      return style;\n    }\n\n    if (this.fullWidth) {\n      if (this.position === 'left' || this.position === 'right') {\n        style.width = '100vw';\n      } else {\n        style.height = '100vh';\n      }\n      return style;\n    }\n\n    // Check if size is a custom value (contains px, %, rem, etc.)\n    const isCustomSize = this.size && (this.size.includes('px') || this.size.includes('%') || this.size.includes('rem') || this.size.includes('em') || this.size.includes('vw') || this.size.includes('vh'));\n\n    if (this.position === 'left' || this.position === 'right') {\n      if (isCustomSize) {\n        style.width = this.size;\n      } else {\n        switch (this.size) {\n          case 'small':\n            style.width = '320px';\n            break;\n          case 'medium':\n            style.width = '480px';\n            break;\n          case 'large':\n            style.width = '1064px';\n            break;\n        }\n      }\n    } else {\n      if (isCustomSize) {\n        style.height = this.size;\n      } else {\n        switch (this.size) {\n          case 'small':\n            style.height = '40vh';\n            break;\n          case 'medium':\n            style.height = '60vh';\n            break;\n          case 'large':\n            style.height = '90vh';\n            break;\n        }\n      }\n    }\n\n    return style;\n  }\n\n  render() {\n    const { dialog, container, drawer, header, headerContent, title, helperText, closeButton, content, footer } = this.drawerClass({\n      position: this.position,\n      fullScreen: this.fullScreen,\n      shake: this.shake,\n      noHeader: this.noHeader,\n      noFooter: this.noFooter,\n    });\n\n    return (\n      <dialog\n        ref={el => (this.dialogRef = el)}\n        part=\"dialog\"\n        class={dialog()}\n        onClick={this.handleBackdropClick}\n        onCancel={this.handleDialogCancel}\n        aria-labelledby=\"drawer-title\"\n        aria-describedby={this.helperText ? 'drawer-helper' : undefined}\n        aria-modal=\"true\"\n      >\n        <div part=\"container\" class={container()}>\n          <div part=\"drawer\" class={drawer()} style={this.getDrawerStyle()} role=\"document\" onClick={this.handleDrawerClick}>\n            {!this.noHeader && (\n              <div part=\"header\" class={header()}>\n                <div part=\"header-content\" class={headerContent()}>\n                  <h2 id=\"drawer-title\" part=\"title\" class={title()}>\n                    <slot name=\"header\">{this.headerText}</slot>\n                  </h2>\n                  {this.helperText && (\n                    <p id=\"drawer-helper\" part=\"helper-text\" class={helperText()}>\n                      <slot name=\"helper\">{this.helperText}</slot>\n                    </p>\n                  )}\n                </div>\n                <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close drawer\" type=\"button\">\n                  <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n                </button>\n              </div>\n            )}\n\n            <div part=\"content\" class={content()}>\n              <slot />\n            </div>\n\n            {!this.noFooter && (\n              <div part=\"footer\" class={footer()}>\n                <slot name=\"footer\" />\n              </div>\n            )}\n          </div>\n        </div>\n      </dialog>\n    );\n  }\n}\n"]}
+{"version":3,"file":"drawer.component.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAG/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AAMH,MAAM,OAAO,SAAS;IACT,IAAI,CAAuB;IAE9B,SAAS,CAAqB;IAEtC;;OAEG;IACqC,IAAI,GAAY,KAAK,CAAC;IAE9D;;;;;;;;;;;OAWG;IACK,IAAI,GAAe,QAAQ,CAAC;IAEpC;;;;;;OAMG;IACsB,QAAQ,GAAmB,OAAO,CAAC;IAE5D;;OAEG;IACgC,SAAS,GAAY,KAAK,CAAC;IAE9D;;OAEG;IACiC,UAAU,GAAY,KAAK,CAAC;IAEhE;;;;;OAKG;IACK,QAAQ,GAAuB,IAAI,CAAC;IAE5C;;OAEG;IACK,UAAU,CAAU;IAE5B;;OAEG;IACiC,UAAU,CAAU;IAExD;;OAEG;IAC+B,QAAQ,GAAY,KAAK,CAAC;IAE5D;;OAEG;IAC+B,QAAQ,GAAY,KAAK,CAAC;IAE5D;;OAEG;IACuC,eAAe,GAAY,IAAI,CAAC;IAE1E;;OAEG;IACqC,aAAa,GAAY,IAAI,CAAC;IAE7D,KAAK,GAAY,KAAK,CAAC;IAEhC;;OAEG;IACM,OAAO,CAAqB;IAErC;;OAEG;IACM,QAAQ,CAAqB;IAEtC;;OAEG;IAC0B,aAAa,CAAqB;IAE/D;;OAEG;IAC0B,cAAc,CAAqB;IAExD,WAAW,GAAG,EAAE,CAAC;QACvB,KAAK,EAAE;YACL,MAAM,EACJ,wJAAwJ;YAC1J,SAAS,EAAE,oCAAoC;YAC/C,MAAM,EAAE,oEAAoE;YAC5E,MAAM,EAAE,wHAAwH;YAChI,aAAa,EAAE,wCAAwC;YACvD,KAAK,EAAE,iDAAiD;YACxD,UAAU,EAAE,wCAAwC;YACpD,WAAW,EACT,8NAA8N;YAChO,OAAO,EAAE,+BAA+B;YACxC,MAAM,EAAE,+CAA+C;SACxD;QACD,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,SAAS,EAAE,eAAe;oBAC1B,MAAM,EAAE,QAAQ;oBAChB,MAAM,EAAE,UAAU;iBACnB;gBACD,KAAK,EAAE;oBACL,SAAS,EAAE,aAAa;oBACxB,MAAM,EAAE,QAAQ;oBAChB,MAAM,EAAE,UAAU;iBACnB;gBACD,GAAG,EAAE;oBACH,SAAS,EAAE,aAAa;oBACxB,MAAM,EAAE,QAAQ;oBAChB,MAAM,EAAE,UAAU;iBACnB;gBACD,MAAM,EAAE;oBACN,SAAS,EAAE,WAAW;oBACtB,MAAM,EAAE,QAAQ;oBAChB,MAAM,EAAE,UAAU;iBACnB;aACF;YACD,UAAU,EAAE;gBACV,IAAI,EAAE;oBACJ,MAAM,EAAE,yCAAyC;oBACjD,SAAS,EAAE,KAAK;iBACjB;aACF;YACD,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,MAAM,EAAE,eAAe;iBACxB;aACF;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,MAAM,EAAE,QAAQ;iBACjB;aACF;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,MAAM,EAAE,QAAQ;iBACjB;aACF;SACF;KACF,CAAC,CAAC;IAGH,gBAAgB,CAAC,MAAe;QAC9B,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;YACxC,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;gBAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;oBACzB,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC;gBAC7B,CAAC;YACH,CAAC;YAED,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;YACzC,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;gBAC3B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,OAAO;YACT,CAAC;YAED,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gBAC1C,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;YACzB,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAGD,WAAW,CAAC,KAAiB;QAC3B,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAmB,CAAC;QACnD,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;QAE1E,IAAI,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAGD;;OAEG;IAEH,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACzB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEO,mBAAmB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAClD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,4EAA4E;QAC5E,IAAI,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,WAAW,EAAE,CAAC;YAChD,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;gBAC/B,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;iBAAM,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBAChC,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEM,kBAAkB,GAAG,CAAC,KAAY,EAAE,EAAE;QAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC/B,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,gDAAgD;YAChD,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;oBACxD,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC;gBAC7B,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;IACH,CAAC,CAAC;IAEM,iBAAiB,GAAG,CAAC,CAAa,EAAE,EAAE;QAC5C,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YAChC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAChC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,MAAM,KAAK,GAA8B,EAAE,CAAC;QAE5C,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC;YACtB,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC;YACvB,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;YACxB,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;YACzB,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,OAAO,EAAE,CAAC;gBAC1D,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC;YACzB,CAAC;YACD,OAAO,KAAK,CAAC;QACf,CAAC;QAED,8DAA8D;QAC9D,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;QAEzM,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,OAAO,EAAE,CAAC;YAC1D,IAAI,YAAY,EAAE,CAAC;gBACjB,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;oBAClB,KAAK,OAAO;wBACV,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC;wBACtB,MAAM;oBACR,KAAK,QAAQ;wBACX,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC;wBACtB,MAAM;oBACR,KAAK,OAAO;wBACV,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC;wBACvB,MAAM;gBACV,CAAC;YACH,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,YAAY,EAAE,CAAC;gBACjB,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;YAC3B,CAAC;iBAAM,CAAC;gBACN,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;oBAClB,KAAK,OAAO;wBACV,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;wBACtB,MAAM;oBACR,KAAK,QAAQ;wBACX,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;wBACtB,MAAM;oBACR,KAAK,OAAO;wBACV,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;wBACtB,MAAM;gBACV,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;YAC7H,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QAEH,OAAO,CACL,+DACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,EAAE,EACf,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,qBACjB,cAAc,sBACZ,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,gBACpD,MAAM;YAEjB,4DAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,EAAE;gBACtC,4DAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB;oBAC9G,CAAC,IAAI,CAAC,QAAQ,IAAI,CACjB,4DAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,EAAE;wBAChC,4DAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAE,aAAa,EAAE;4BAC/C,2DAAI,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,EAAE;gCAC/C,6DAAM,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,UAAU,CAAQ,CACzC;4BACJ,IAAI,CAAC,UAAU,IAAI,CAClB,0DAAG,EAAE,EAAC,eAAe,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAE,UAAU,EAAE;gCAC1D,6DAAM,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,UAAU,CAAQ,CAC1C,CACL,CACG;wBACN,+DAAQ,IAAI,EAAC,cAAc,EAAC,KAAK,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,gBAAa,cAAc,EAAC,IAAI,EAAC,QAAQ;4BACnH,iEAAU,IAAI,EAAC,mBAAmB,GAAY,CACvC,CACL,CACP;oBAED,4DAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,OAAO,EAAE;wBAClC,8DAAQ,CACJ;oBAEL,CAAC,IAAI,CAAC,QAAQ,IAAI,CACjB,4DAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,EAAE;wBAChC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACF,CACC,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { DrawerPosition, DrawerSize } from './types';\n\n/**\n * @component BcmDrawer\n * @description A slide-in panel component built on the native HTML Dialog API.\n * Ideal for navigation menus, forms, and contextual information that slides in from any edge of the screen.\n *\n * @slot - Main content area of the drawer\n * @slot header - Custom header content (overrides headerText prop)\n * @slot helper - Custom helper text content (overrides helper-text prop)\n * @slot footer - Footer content for action buttons\n *\n * @part dialog - The native dialog element\n * @part container - The container wrapper for positioning\n * @part drawer - The main drawer panel\n * @part header - The header section\n * @part header-content - The content wrapper inside header\n * @part title - The title heading element\n * @part helper-text - The helper text paragraph\n * @part close-button - The close button in header\n * @part content - The main content area\n * @part footer - The footer section\n *\n * @example\n * ```html\n * <!-- Basic usage -->\n * <bcm-drawer open header-text=\"Menu\" position=\"left\">\n *   <nav>\n *     <a href=\"/home\">Home</a>\n *     <a href=\"/about\">About</a>\n *   </nav>\n * </bcm-drawer>\n *\n * <!-- Custom size and position -->\n * <bcm-drawer size=\"large\" position=\"right\">\n *   <div slot=\"header\">Settings</div>\n *   <form>...</form>\n *   <div slot=\"footer\">\n *     <button data-dismiss>Cancel</button>\n *     <button>Save</button>\n *   </div>\n * </bcm-drawer>\n *\n * <!-- Custom size with CSS units -->\n * <bcm-drawer size=\"600px\" position=\"bottom\">\n *   <p>Custom height drawer</p>\n * </bcm-drawer>\n *\n * <!-- Programmatic usage -->\n * <bcm-drawer id=\"myDrawer\">Content</bcm-drawer>\n * <script>\n *   document.getElementById('myDrawer').show();\n * </script>\n * ```\n */\n@Component({\n  tag: 'bcm-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class BcmDrawer {\n  @Element() host: HTMLBcmDrawerElement;\n\n  private dialogRef?: HTMLDialogElement;\n\n  /**\n   * Controls whether the drawer is open or closed\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * The size of the drawer. Can be a preset value or a custom CSS size\n   * - For left/right drawers:\n   *   - 'small': 320px\n   *   - 'medium': 480px\n   *   - 'large': 1064px\n   * - For top/bottom drawers:\n   *   - 'small': 40vh\n   *   - 'medium': 60vh\n   *   - 'large': 90vh\n   * - Custom values: Any valid CSS size (e.g., '600px', '50%', '30rem', '80vw')\n   */\n  @Prop() size: DrawerSize = 'medium';\n\n  /**\n   * The position where the drawer slides in from\n   * - 'left': Slides from the left edge\n   * - 'right': Slides from the right edge\n   * - 'top': Slides from the top edge\n   * - 'bottom': Slides from the bottom edge\n   */\n  @Prop({ reflect: true }) position: DrawerPosition = 'right';\n\n  /**\n   * Makes the drawer take full width (for left/right) or full height (for top/bottom)\n   */\n  @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n\n  /**\n   * Makes the drawer take the full screen (100vw x 100vh)\n   */\n  @Prop({ attribute: 'full-screen' }) fullScreen: boolean = false;\n\n  /**\n   * Controls backdrop behavior\n   * - true: Shows backdrop, drawer can be closed by clicking outside\n   * - false: No backdrop\n   * - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)\n   */\n  @Prop() backdrop: boolean | 'static' = true;\n\n  /**\n   * Text to display in the drawer header\n   */\n  @Prop() headerText?: string;\n\n  /**\n   * Helper text to display below the header title\n   */\n  @Prop({ attribute: 'helper-text' }) helperText?: string;\n\n  /**\n   * Hides the header section completely\n   */\n  @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n\n  /**\n   * Hides the footer section completely\n   */\n  @Prop({ attribute: 'no-footer' }) noFooter: boolean = false;\n\n  /**\n   * Allows closing the drawer by clicking on the backdrop\n   */\n  @Prop({ attribute: 'close-on-backdrop' }) closeOnBackdrop: boolean = true;\n\n  /**\n   * Allows closing the drawer by pressing the Escape key\n   */\n  @Prop({ attribute: 'close-on-escape' }) closeOnEscape: boolean = true;\n\n  @State() shake: boolean = false;\n\n  /**\n   * Emitted after the drawer has opened\n   */\n  @Event() bcmOpen: EventEmitter<void>;\n\n  /**\n   * Emitted after the drawer has closed\n   */\n  @Event() bcmClose: EventEmitter<void>;\n\n  /**\n   * Emitted before the drawer opens. Can be cancelled by calling event.preventDefault()\n   */\n  @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n\n  /**\n   * Emitted before the drawer closes. Can be cancelled by calling event.preventDefault()\n   */\n  @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n  private drawerClass = tv({\n    slots: {\n      dialog:\n        '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',\n      container: 'fixed inset-0 flex overflow-hidden',\n      drawer: 'relative bg-color-base text-color-default shadow-2xl flex flex-col',\n      header: 'flex justify-between items-start bg-color-base text-color-default border-color-default border-solid border-0 py-3 px-4',\n      headerContent: 'flex-1 min-w-0 flex items-center gap-2',\n      title: 'font-semibold m-0 text-size-6 text-color-header',\n      helperText: 'text-size-5 text-color-placeholder m-0',\n      closeButton:\n        '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',\n      content: 'flex-grow overflow-y-auto p-4',\n      footer: 'flex items-center justify-end gap-2 py-3 px-4',\n    },\n    variants: {\n      position: {\n        left: {\n          container: 'justify-start',\n          drawer: 'h-full',\n          header: 'border-b',\n        },\n        right: {\n          container: 'justify-end',\n          drawer: 'h-full',\n          header: 'border-b',\n        },\n        top: {\n          container: 'items-start',\n          drawer: 'w-full',\n          header: 'border-b',\n        },\n        bottom: {\n          container: 'items-end',\n          drawer: 'w-full',\n          header: 'border-t',\n        },\n      },\n      fullScreen: {\n        true: {\n          drawer: 'w-screen h-screen max-w-none max-h-none',\n          container: 'p-0',\n        },\n      },\n      shake: {\n        true: {\n          drawer: 'animate-shake',\n        },\n      },\n      noHeader: {\n        true: {\n          header: 'hidden',\n        },\n      },\n      noFooter: {\n        true: {\n          footer: 'hidden',\n        },\n      },\n    },\n  });\n\n  @Watch('open')\n  handleOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      const event = this.bcmBeforeOpen.emit();\n      if (event.defaultPrevented) {\n        this.open = false;\n        return;\n      }\n\n      if (this.dialogRef) {\n        if (!this.dialogRef.open) {\n          this.dialogRef.showModal();\n        }\n      }\n\n      this.bcmOpen.emit();\n    } else {\n      const event = this.bcmBeforeClose.emit();\n      if (event.defaultPrevented) {\n        this.open = true;\n        return;\n      }\n\n      if (this.dialogRef && this.dialogRef.open) {\n        this.dialogRef.close();\n      }\n      this.bcmClose.emit();\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    const path = event.composedPath() as HTMLElement[];\n    const dismissElement = path.find(el => el.hasAttribute?.('data-dismiss'));\n\n    if (dismissElement) {\n      this.hide();\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n\n  /**\n   * Programmatically opens the drawer\n   */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /**\n   * Programmatically closes the drawer\n   */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * Toggles the drawer open/closed state\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this.open = !this.open;\n  }\n\n  private shakeDrawer() {\n    this.shake = true;\n    setTimeout(() => {\n      this.shake = false;\n    }, 300);\n  }\n\n  private handleBackdropClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    // Check if click is on the container (backdrop area), not on drawer content\n    if (target.getAttribute('part') === 'container') {\n      if (this.backdrop === 'static') {\n        this.shakeDrawer();\n      } else if (this.closeOnBackdrop) {\n        this.hide();\n      }\n    }\n  };\n\n  private handleDialogCancel = (event: Event) => {\n    event.preventDefault();\n    if (this.backdrop === 'static') {\n      this.shakeDrawer();\n      // Force dialog to stay open for static backdrop\n      requestAnimationFrame(() => {\n        if (this.dialogRef && !this.dialogRef.open && this.open) {\n          this.dialogRef.showModal();\n        }\n      });\n    } else if (this.closeOnEscape) {\n      this.hide();\n    }\n  };\n\n  private handleDrawerClick = (e: MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  componentDidLoad() {\n    if (this.open && this.dialogRef) {\n      this.dialogRef.showModal();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.dialogRef && this.open) {\n      this.dialogRef.close();\n    }\n  }\n\n  private getDrawerStyle() {\n    const style: { [key: string]: string } = {};\n\n    if (this.fullScreen) {\n      style.width = '100vw';\n      style.height = '100vh';\n      style.maxWidth = 'none';\n      style.maxHeight = 'none';\n      return style;\n    }\n\n    if (this.fullWidth) {\n      if (this.position === 'left' || this.position === 'right') {\n        style.width = '100vw';\n      } else {\n        style.height = '100vh';\n      }\n      return style;\n    }\n\n    // Check if size is a custom value (contains px, %, rem, etc.)\n    const isCustomSize = this.size && (this.size.includes('px') || this.size.includes('%') || this.size.includes('rem') || this.size.includes('em') || this.size.includes('vw') || this.size.includes('vh'));\n\n    if (this.position === 'left' || this.position === 'right') {\n      if (isCustomSize) {\n        style.width = this.size;\n      } else {\n        switch (this.size) {\n          case 'small':\n            style.width = '320px';\n            break;\n          case 'medium':\n            style.width = '480px';\n            break;\n          case 'large':\n            style.width = '1064px';\n            break;\n        }\n      }\n    } else {\n      if (isCustomSize) {\n        style.height = this.size;\n      } else {\n        switch (this.size) {\n          case 'small':\n            style.height = '40vh';\n            break;\n          case 'medium':\n            style.height = '60vh';\n            break;\n          case 'large':\n            style.height = '90vh';\n            break;\n        }\n      }\n    }\n\n    return style;\n  }\n\n  render() {\n    const { dialog, container, drawer, header, headerContent, title, helperText, closeButton, content, footer } = this.drawerClass({\n      position: this.position,\n      fullScreen: this.fullScreen,\n      shake: this.shake,\n      noHeader: this.noHeader,\n      noFooter: this.noFooter,\n    });\n\n    return (\n      <dialog\n        ref={el => (this.dialogRef = el)}\n        part=\"dialog\"\n        class={dialog()}\n        onClick={this.handleBackdropClick}\n        onCancel={this.handleDialogCancel}\n        aria-labelledby=\"drawer-title\"\n        aria-describedby={this.helperText ? 'drawer-helper' : undefined}\n        aria-modal=\"true\"\n      >\n        <div part=\"container\" class={container()}>\n          <div part=\"drawer\" class={drawer()} style={this.getDrawerStyle()} role=\"document\" onClick={this.handleDrawerClick}>\n            {!this.noHeader && (\n              <div part=\"header\" class={header()}>\n                <div part=\"header-content\" class={headerContent()}>\n                  <h2 id=\"drawer-title\" part=\"title\" class={title()}>\n                    <slot name=\"header\">{this.headerText}</slot>\n                  </h2>\n                  {this.helperText && (\n                    <p id=\"drawer-helper\" part=\"helper-text\" class={helperText()}>\n                      <slot name=\"helper\">{this.helperText}</slot>\n                    </p>\n                  )}\n                </div>\n                <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close drawer\" type=\"button\">\n                  <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n                </button>\n              </div>\n            )}\n\n            <div part=\"content\" class={content()}>\n              <slot />\n            </div>\n\n            {!this.noFooter && (\n              <div part=\"footer\" class={footer()}>\n                <slot name=\"footer\" />\n              </div>\n            )}\n          </div>\n        </div>\n      </dialog>\n    );\n  }\n}\n"]}

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

@@ -1,22 +1,13 @@
 import { h, Host } from "@stencil/core";
 import { tv } from "../../utils/tv";
 export class Dropdown {
-    constructor() {
-        this.dropdownItems = [];
-        this.dropdownClass = tv({
-            base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',
-        });
-        this.handleSlotChange = () => {
-            this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));
-            if (this.dropdownItems.length === 0) {
-                console.warn('No dropdown items found in dropdown component');
-            }
-        };
-    }
+    host;
+    text;
+    dropdownItems = [];
+    bcmDropdownChange;
     handleDropdownItemChange(event) {
-        var _a;
-        const { element, selected } = event === null || event === void 0 ? void 0 : event.detail;
-        (_a = this.dropdownItems) === null || _a === void 0 ? void 0 : _a.forEach(item => {
+        const { element, selected } = event?.detail;
+        this.dropdownItems?.forEach(item => {
             if (item != element) {
                 item.selected = false;
             }
@@ -26,8 +17,17 @@ export class Dropdown {
             selected,
         });
     }
+    dropdownClass = tv({
+        base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',
+    });
+    handleSlotChange = () => {
+        this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));
+        if (this.dropdownItems.length === 0) {
+            console.warn('No dropdown items found in dropdown component');
+        }
+    };
     render() {
-        return (h(Host, { key: '616424e348e7b0bf6281a1dfc9a6cf003a10166d' }, h("bcm-linked", { key: '9738f964a5aaecff10685ec42043bbf74f540194', trigger: "click", placement: "bottom-start" }, h("bcm-button", { key: '619996c5aeb3351d02cf051fd50050fa7e22315f', kind: "outline", slot: "trigger" }, h("span", { key: '704ca8d6e695ce46a3dbfc7cf7473952db6e2d27', part: "text" }, this.text)), h("div", { key: '13b3fdcbb0d360065ea6c0bb22eb622f789667fd', part: "dropdown-container", class: this.dropdownClass() }, h("slot", { key: '6cebd340b556af602af7d10e78ba7ba5e34191c7', onSlotchange: this.handleSlotChange })))));
+        return (h(Host, { key: 'a573b6ba000722dc455d75f5085fe0b9b08eb4f8' }, h("bcm-linked", { key: '5dbbcfce9d6b3be30696a5efd0f06020331d4e0f', trigger: "click", placement: "bottom-start" }, h("bcm-button", { key: 'd8bdcbb9990ef903cccc837db5cb97aeb00e8807', kind: "outline", slot: "trigger" }, h("span", { key: '4694ae4aa91429e6a3da676e3228cd6463d17174', part: "text" }, this.text)), h("div", { key: '4fdb37f07ca1652f9fd5fcf586516ae42d45b201', part: "dropdown-container", class: this.dropdownClass() }, h("slot", { key: '6b4386fe543c67a1ac3fe91dffc0e27d986d368b', onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "bcm-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.component.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC1H,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAO/B,MAAM,OAAO,QAAQ;IALrB;QAUW,kBAAa,GAAiC,EAAE,CAAC;QA0BlD,kBAAa,GAAG,EAAE,CAAC;YACzB,IAAI,EAAE,uIAAuI;SAC9I,CAAC,CAAC;QAEK,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;YAEjF,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACpC,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC,CAAC;YAChE,CAAC;QACH,CAAC,CAAC;KAgBH;IAzCC,wBAAwB,CAAC,KAAkB;;QACzC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE5C,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,IAAI,CAAC,EAAE;YACjC,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;gBACpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YAC1B,OAAO,EAAE,OAAO;YAChB,QAAQ;SACT,CAAC,CAAC;IACL,CAAC;IAcD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,mEAAY,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,cAAc;gBAClD,mEAAY,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;oBACvC,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CACzB;gBACb,4DAAK,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;oBACxD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,CACK,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, h, Prop, State, Element, Host, Event, EventEmitter, Listen } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  @Prop() text?: string;\n\n  @State() dropdownItems: HTMLBcmDropdownItemElement[] = [];\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropdownChange',\n  })\n  bcmDropdownChange: EventEmitter<any>;\n\n  @Listen('bcmDropDownItemChange', { capture: true })\n  handleDropdownItemChange(event: CustomEvent) {\n    const { element, selected } = event?.detail;\n\n    this.dropdownItems?.forEach(item => {\n      if (item != element) {\n        item.selected = false;\n      }\n    });\n\n    this.bcmDropdownChange.emit({\n      element: element,\n      selected,\n    });\n  }\n\n  private dropdownClass = tv({\n    base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',\n  });\n\n  private handleSlotChange = () => {\n    this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));\n\n    if (this.dropdownItems.length === 0) {\n      console.warn('No dropdown items found in dropdown component');\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <bcm-linked trigger=\"click\" placement=\"bottom-start\">\n          <bcm-button kind=\"outline\" slot=\"trigger\">\n            <span part=\"text\">{this.text}</span>\n          </bcm-button>\n          <div part=\"dropdown-container\" class={this.dropdownClass()}>\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </div>\n        </bcm-linked>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"dropdown.component.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC1H,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAO/B,MAAM,OAAO,QAAQ;IACR,IAAI,CAAc;IAErB,IAAI,CAAU;IAEb,aAAa,GAAiC,EAAE,CAAC;IAQ1D,iBAAiB,CAAoB;IAGrC,wBAAwB,CAAC,KAAkB;QACzC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,MAAM,CAAC;QAE5C,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE;YACjC,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;gBACpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YAC1B,OAAO,EAAE,OAAO;YAChB,QAAQ;SACT,CAAC,CAAC;IACL,CAAC;IAEO,aAAa,GAAG,EAAE,CAAC;QACzB,IAAI,EAAE,uIAAuI;KAC9I,CAAC,CAAC;IAEK,gBAAgB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAEjF,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACpC,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,mEAAY,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,cAAc;gBAClD,mEAAY,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;oBACvC,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CACzB;gBACb,4DAAK,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;oBACxD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,CACK,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, h, Prop, State, Element, Host, Event, EventEmitter, Listen } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  @Prop() text?: string;\n\n  @State() dropdownItems: HTMLBcmDropdownItemElement[] = [];\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropdownChange',\n  })\n  bcmDropdownChange: EventEmitter<any>;\n\n  @Listen('bcmDropDownItemChange', { capture: true })\n  handleDropdownItemChange(event: CustomEvent) {\n    const { element, selected } = event?.detail;\n\n    this.dropdownItems?.forEach(item => {\n      if (item != element) {\n        item.selected = false;\n      }\n    });\n\n    this.bcmDropdownChange.emit({\n      element: element,\n      selected,\n    });\n  }\n\n  private dropdownClass = tv({\n    base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',\n  });\n\n  private handleSlotChange = () => {\n    this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));\n\n    if (this.dropdownItems.length === 0) {\n      console.warn('No dropdown items found in dropdown component');\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <bcm-linked trigger=\"click\" placement=\"bottom-start\">\n          <bcm-button kind=\"outline\" slot=\"trigger\">\n            <span part=\"text\">{this.text}</span>\n          </bcm-button>\n          <div part=\"dropdown-container\" class={this.dropdownClass()}>\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </div>\n        </bcm-linked>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dropdown/dropdown.css

@@ -1 +1 @@
-.visible{visibility:visible}.hidden{display:none}.flex{display:flex}.max-h-64{max-height:16rem}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.items-center{align-items:center}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}
+.visible{visibility:visible}.hidden{display:none}.static{position:static}.flex{display:flex}.max-h-64{max-height:16rem}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.items-center{align-items:center}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}

package/dist/collection/components/dropdown-item/dropdown-item.component.js

@@ -1,35 +1,14 @@
 import { h } from "@stencil/core";
 import { tv } from "../../utils/tv";
 export class DropdownItem {
-    constructor() {
-        this.selected = false;
-        this.error = false;
-        this.disabled = false;
-        this.dropdownItemClass = tv({
-            base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',
-            variants: {
-                selected: {
-                    true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',
-                    false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',
-                },
-                error: {
-                    true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',
-                    false: '',
-                },
-                disabled: {
-                    true: '', // should be discuss with ux team
-                    false: '',
-                },
-            },
-            defaultVariants: {
-                selected: false,
-                error: false,
-                disabled: false,
-            },
-        }, {
-            twMerge: false,
-        });
-    }
+    host;
+    text;
+    icon;
+    rightIcons;
+    selected = false;
+    error = false;
+    disabled = false;
+    bcmDropDownItemChange;
     handleClick() {
         this.selected = true;
         this.bcmDropDownItemChange.emit({
@@ -37,12 +16,35 @@ export class DropdownItem {
             selected: this.selected,
         });
     }
+    dropdownItemClass = tv({
+        base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',
+        variants: {
+            selected: {
+                true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',
+                false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',
+            },
+            error: {
+                true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',
+                false: '',
+            },
+            disabled: {
+                true: '', // should be discuss with ux team
+                false: '',
+            },
+        },
+        defaultVariants: {
+            selected: false,
+            error: false,
+            disabled: false,
+        },
+    }, {
+        twMerge: false,
+    });
     render() {
-        var _a;
-        return (h("div", { key: 'df59d3ea6c53de5a10d37b6acd8e81d9c516e6f5', "aria-checked": this.selected, class: this.dropdownItemClass({
+        return (h("div", { key: 'f17e6b4ad9aaf91370da88fa0913c6eb2e227b1b', "aria-checked": this.selected, class: this.dropdownItemClass({
                 selected: this.selected,
                 error: this.error,
-            }), onClick: () => this.handleClick() }, h("slot", { key: '7ef8f52088bff39eb3dfecf7269b1d6b29185582', name: "left-content" }, this.icon && h("bcm-icon", { key: 'a302aafb745289c380edc120738c973fe7200c6d', "icon-name": this.icon })), h("div", { key: '7c5c8c27b982dbd314d5645603035f4dff0087d7', class: "flex flex-row text-pretty w-full" }, h("slot", { key: '873e7b62a2b20cc992425dcfd42c4edd1da6144b' }, this.text)), h("slot", { key: '199f13fb5dfa2d6b5bd1ed07652aa721eaf3c8a9', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (h("bcm-icon", { "icon-name": icon }))))));
+            }), onClick: () => this.handleClick() }, h("slot", { key: '2d645ab61ee21e1c85a0f9fbb12c456922c8ca3b', name: "left-content" }, this.icon && h("bcm-icon", { key: '654afa8ac72f92b5bd7c64e247de0884b91b04ca', "icon-name": this.icon })), h("div", { key: '9885ed60b496e2096b1e203ba27e83f76bacd57e', class: "flex flex-row text-pretty w-full" }, h("slot", { key: '8a8d7ab8236d652114be728906e9f079438a0b6a' }, this.text)), h("slot", { key: '62e1450b43e8a407d9e4ef284c72dd34950a6e7c', name: "right-content" }, this.rightIcons?.map(icon => (h("bcm-icon", { "icon-name": icon }))))));
     }
     static get is() { return "bcm-dropdown-item"; }
     static get encapsulation() { return "shadow"; }