bromcom-ui-next 0.1.29 → 0.1.31

package/dist/esm/bcm-drawer.entry.js

@@ -0,0 +1,330 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-B6Ppbs5O.js';
+import { t as tv } from './tv-CEcVC0yX.js';
+
+const drawerCss = ".contents{display:contents}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host{display:contents}[part=dialog]::backdrop{animation:backdrop-fade-in .2s ease-out}@keyframes backdrop-fade-in{0%{opacity:0}to{opacity:.5}}[part=drawer]{transition:transform .2s ease-out}:host([position=left]) [part=drawer]{transform:translateX(-20px)}:host([position=left][open]) [part=drawer]{transform:translateX(0)}:host([position=right]) [part=drawer]{transform:translateX(20px)}:host([position=right][open]) [part=drawer]{transform:translateX(0)}:host([position=top]) [part=drawer]{transform:translateY(-20px)}:host([position=top][open]) [part=drawer]{transform:translateY(0)}:host([position=bottom]) [part=drawer]{transform:translateY(20px)}:host([position=bottom][open]) [part=drawer]{transform:translateY(0)}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.h-full{height:100%}.h-screen{height:100vh}.max-h-full{max-height:100%}.max-h-none{max-height:none}.w-6{width:1.5rem}.w-full{width:100%}.w-screen{width:100vw}.min-w-0{min-width:0}.max-w-full{max-width:100%}.max-w-none{max-width:none}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.animate-shake{animation:shake .82s cubic-bezier(.36,.07,.19,.97) infinite;animation:shake .3s cubic-bezier(.36,.07,.19,.97) both}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border-0{border-width:0}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-none{border-style:none}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:var(--bcm-ui-box-shadow-2xl);--tw-shadow-colored:var(--bcm-ui-box-shadow-2xl)}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.backdrop\\:bg-color-default-dark::backdrop{background-color:var(--bcm-ui-color-background-default-dark-default)}.backdrop\\:opacity-50::backdrop{opacity:.5}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.focus-visible\\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}";
+
+const BcmDrawer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bcmOpen = createEvent(this, "bcmOpen", 7);
+        this.bcmClose = createEvent(this, "bcmClose", 7);
+        this.bcmBeforeOpen = createEvent(this, "bcmBeforeOpen", 7);
+        this.bcmBeforeClose = createEvent(this, "bcmBeforeClose", 7);
+    }
+    get host() { return getElement(this); }
+    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',
+                },
+            },
+            shake: {
+                true: {
+                    drawer: 'animate-shake',
+                },
+            },
+            noHeader: {
+                true: {
+                    header: 'hidden',
+                },
+            },
+            noFooter: {
+                true: {
+                    footer: 'hidden',
+                },
+            },
+        },
+    });
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            const event = this.bcmBeforeOpen.emit();
+            if (event.defaultPrevented) {
+                this.open = false;
+                return;
+            }
+            if (this.dialogRef) {
+                if (!this.dialogRef.open) {
+                    this.dialogRef.showModal();
+                }
+            }
+            this.bcmOpen.emit();
+        }
+        else {
+            const event = this.bcmBeforeClose.emit();
+            if (event.defaultPrevented) {
+                this.open = true;
+                return;
+            }
+            if (this.dialogRef && this.dialogRef.open) {
+                this.dialogRef.close();
+            }
+            this.bcmClose.emit();
+        }
+    }
+    handleClick(event) {
+        const path = event.composedPath();
+        const dismissElement = path.find(el => el.hasAttribute?.('data-dismiss'));
+        if (dismissElement) {
+            this.hide();
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    /**
+     * Programmatically opens the drawer
+     */
+    async show() {
+        this.open = true;
+    }
+    /**
+     * Programmatically closes the drawer
+     */
+    async hide() {
+        this.open = false;
+    }
+    /**
+     * Toggles the drawer open/closed state
+     */
+    async toggle() {
+        this.open = !this.open;
+    }
+    shakeDrawer() {
+        this.shake = true;
+        setTimeout(() => {
+            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();
+        }
+    }
+    disconnectedCallback() {
+        if (this.dialogRef && this.open) {
+            this.dialogRef.close();
+        }
+    }
+    getDrawerStyle() {
+        const style = {};
+        if (this.fullScreen) {
+            style.width = '100vw';
+            style.height = '100vh';
+            style.maxWidth = 'none';
+            style.maxHeight = 'none';
+            return style;
+        }
+        if (this.fullWidth) {
+            if (this.position === 'left' || this.position === 'right') {
+                style.width = '100vw';
+            }
+            else {
+                style.height = '100vh';
+            }
+            return style;
+        }
+        // Check if size is a custom value (contains px, %, rem, etc.)
+        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'));
+        if (this.position === 'left' || this.position === 'right') {
+            if (isCustomSize) {
+                style.width = this.size;
+            }
+            else {
+                switch (this.size) {
+                    case 'small':
+                        style.width = '320px';
+                        break;
+                    case 'medium':
+                        style.width = '480px';
+                        break;
+                    case 'large':
+                        style.width = '1064px';
+                        break;
+                }
+            }
+        }
+        else {
+            if (isCustomSize) {
+                style.height = this.size;
+            }
+            else {
+                switch (this.size) {
+                    case 'small':
+                        style.height = '40vh';
+                        break;
+                    case 'medium':
+                        style.height = '60vh';
+                        break;
+                    case 'large':
+                        style.height = '90vh';
+                        break;
+                }
+            }
+        }
+        return style;
+    }
+    render() {
+        const { dialog, container, drawer, header, headerContent, title, helperText, closeButton, content, footer } = this.drawerClass({
+            position: this.position,
+            fullScreen: this.fullScreen,
+            shake: this.shake,
+            noHeader: this.noHeader,
+            noFooter: this.noFooter,
+        });
+        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 watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+};
+BcmDrawer.style = drawerCss;
+
+export { BcmDrawer as bcm_drawer };
+//# sourceMappingURL=bcm-drawer.entry.js.map

package/dist/esm/bcm-drawer.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bcm-drawer.entry.js","sources":["src/components/drawer/drawer.css?tag=bcm-drawer&encapsulation=shadow","src/components/drawer/drawer.component.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n/* Backdrop fade animation */\n[part='dialog']::backdrop {\n  animation: backdrop-fade-in 200ms ease-out;\n}\n\n@keyframes backdrop-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n}\n\n/* Simple slide animations - 20px movement */\n[part='drawer'] {\n  transition: transform 200ms ease-out;\n}\n\n/* Left position animations */\n:host([position='left']) [part='drawer'] {\n  transform: translateX(-20px);\n}\n\n:host([position='left'][open]) [part='drawer'] {\n  transform: translateX(0);\n}\n\n/* Right position animations */\n:host([position='right']) [part='drawer'] {\n  transform: translateX(20px);\n}\n\n:host([position='right'][open]) [part='drawer'] {\n  transform: translateX(0);\n}\n\n/* Top position animations */\n:host([position='top']) [part='drawer'] {\n  transform: translateY(-20px);\n}\n\n:host([position='top'][open]) [part='drawer'] {\n  transform: translateY(0);\n}\n\n/* Bottom position animations */\n:host([position='bottom']) [part='drawer'] {\n  transform: translateY(20px);\n}\n\n:host([position='bottom'][open]) [part='drawer'] {\n  transform: translateY(0);\n}\n","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"],"names":[],"mappings":"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"}

package/dist/esm/bcm-dropdown-item.entry.js

@@ -1,40 +1,21 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BuuGCw0z.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-B6Ppbs5O.js';
 import { t as tv } from './tv-CEcVC0yX.js';
 
-const dropdownItemCss = ".flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-hover\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}";
+const dropdownItemCss = ".flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-hover\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}";
 
 const DropdownItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.bcmDropDownItemChange = createEvent(this, "bcmDropDownItemChange", 1);
-        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,
-        });
     }
+    get host() { return getElement(this); }
+    text;
+    icon;
+    rightIcons;
+    selected = false;
+    error = false;
+    disabled = false;
+    bcmDropDownItemChange;
     handleClick() {
         this.selected = true;
         this.bcmDropDownItemChange.emit({
@@ -42,18 +23,38 @@ const DropdownItem = class {
             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: 'a7711d8f7d3b825e14ed5caf3546c7ddc839d099', "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: '1d262e43a2600450e76220121fc309e31e254940', name: "left-content" }, this.icon && h("bcm-icon", { key: 'cac088e6752681d3187f7d4896a9097589e6e2b9', "icon-name": this.icon })), h("div", { key: '90012594c1a377543673e3aaa4883cd97e4c6d8b', class: "flex flex-row text-pretty w-full" }, h("slot", { key: '511aeda759e51451d57a4b5f80fc95080dc48239' }, this.text)), h("slot", { key: '9297f69765be0a666189cf6c4f73c6819de87d62', 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 }))))));
     }
-    get host() { return getElement(this); }
 };
 DropdownItem.style = dropdownItemCss;
 
 export { DropdownItem as bcm_dropdown_item };
 //# sourceMappingURL=bcm-dropdown-item.entry.js.map
-
-//# sourceMappingURL=bcm-dropdown-item.entry.js.map

package/dist/esm/bcm-dropdown-item.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-dropdown-item.entry.js","sources":["src/components/dropdown-item/dropdown-item.css?tag=bcm-dropdown-item&encapsulation=shadow","src/components/dropdown-item/dropdown-item.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100%;\n}\n\n::slotted([slot='left-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n::slotted([slot='right-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown-item',\n  styleUrl: 'dropdown-item.css',\n  shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n  @Element() host: HTMLElement;\n  @Prop() text: string;\n  @Prop() icon: string;\n  @Prop() rightIcons: string[];\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) error: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropDownItemChange',\n  })\n  bcmDropDownItemChange: EventEmitter<any>;\n\n  private handleClick() {\n    this.selected = true;\n    this.bcmDropDownItemChange.emit({\n      element: this.host,\n      selected: this.selected,\n    });\n  }\n\n  private dropdownItemClass = tv(\n    {\n      base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n      variants: {\n        selected: {\n          true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n          false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n        },\n        error: {\n          true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n          false: '',\n        },\n        disabled: {\n          true: '', // should be discuss with ux team\n          false: '',\n        },\n      },\n      defaultVariants: {\n        selected: false,\n        error: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        aria-checked={this.selected}\n        class={this.dropdownItemClass({\n          selected: this.selected,\n          error: this.error,\n        })}\n        onClick={() => this.handleClick()}\n      >\n        <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n        <div class=\"flex flex-row text-pretty w-full\">\n          <slot>{this.text}</slot>\n        </div>\n        <slot name=\"right-content\">\n          {this.rightIcons?.map(icon => (\n            <bcm-icon icon-name={icon}></bcm-icon>\n          ))}\n        </slot>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,eAAe,GAAG,86CAA86C;;MCQz7C,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAU2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AACtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAkB1C,QAAA,IAAiB,CAAA,iBAAA,GAAG,EAAE,CAC5B;AACE,YAAA,IAAI,EAAE,6GAA6G;AACnH,YAAA,QAAQ,EAAE;AACR,gBAAA,QAAQ,EAAE;AACR,oBAAA,IAAI,EAAE,uGAAuG;AAC7G,oBAAA,KAAK,EAAE,sDAAsD;AAC9D,iBAAA;AACD,gBAAA,KAAK,EAAE;AACL,oBAAA,IAAI,EAAE,uHAAuH;AAC7H,oBAAA,KAAK,EAAE,EAAE;AACV,iBAAA;AACD,gBAAA,QAAQ,EAAE;oBACR,IAAI,EAAE,EAAE;AACR,oBAAA,KAAK,EAAE,EAAE;AACV,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,QAAQ,EAAE,KAAK;AAChB,aAAA;SACF,EACD;AACE,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CACF;AAwBF;IA1DS,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;;IA+BJ,MAAM,GAAA;;QACJ,QACE,CACgB,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,cAAA,EAAA,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;AAClB,aAAA,CAAC,EACF,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAEjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,IAAI,IAAI,CAAqB,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAA,EAAA,IAAI,CAAC,IAAI,GAAa,CAAQ,EAC3F,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kCAAkC,EAAA,EAC3C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,CACpB,EACN,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EACvB,EAAA,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,GAAG,CAAC,IAAI,KACxB,CAAA,CAAA,UAAA,EAAA,EAAA,WAAA,EAAqB,IAAI,EAAA,CAAa,CACvC,CAAC,CACG,CACH;;;;;;;;"}
+{"version":3,"file":"bcm-dropdown-item.entry.js","sources":["src/components/dropdown-item/dropdown-item.css?tag=bcm-dropdown-item&encapsulation=shadow","src/components/dropdown-item/dropdown-item.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100%;\n}\n\n::slotted([slot='left-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n::slotted([slot='right-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown-item',\n  styleUrl: 'dropdown-item.css',\n  shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n  @Element() host: HTMLElement;\n  @Prop() text: string;\n  @Prop() icon: string;\n  @Prop() rightIcons: string[];\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) error: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropDownItemChange',\n  })\n  bcmDropDownItemChange: EventEmitter<any>;\n\n  private handleClick() {\n    this.selected = true;\n    this.bcmDropDownItemChange.emit({\n      element: this.host,\n      selected: this.selected,\n    });\n  }\n\n  private dropdownItemClass = tv(\n    {\n      base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n      variants: {\n        selected: {\n          true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n          false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n        },\n        error: {\n          true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n          false: '',\n        },\n        disabled: {\n          true: '', // should be discuss with ux team\n          false: '',\n        },\n      },\n      defaultVariants: {\n        selected: false,\n        error: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        aria-checked={this.selected}\n        class={this.dropdownItemClass({\n          selected: this.selected,\n          error: this.error,\n        })}\n        onClick={() => this.handleClick()}\n      >\n        <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n        <div class=\"flex flex-row text-pretty w-full\">\n          <slot>{this.text}</slot>\n        </div>\n        <slot name=\"right-content\">\n          {this.rightIcons?.map(icon => (\n            <bcm-icon icon-name={icon}></bcm-icon>\n          ))}\n        </slot>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,eAAe,GAAG,s5CAAs5C;;MCQj6C,YAAY,GAAA,MAAA;;;;;;AAEf,IAAA,IAAI;AACJ,IAAA,IAAI;AACJ,IAAA,UAAU;IACO,QAAQ,GAAY,KAAK;IACzB,KAAK,GAAY,KAAK;IACtB,QAAQ,GAAY,KAAK;AAQlD,IAAA,qBAAqB;IAEb,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;;IAGI,iBAAiB,GAAG,EAAE,CAC5B;AACE,QAAA,IAAI,EAAE,6GAA6G;AACnH,QAAA,QAAQ,EAAE;AACR,YAAA,QAAQ,EAAE;AACR,gBAAA,IAAI,EAAE,uGAAuG;AAC7G,gBAAA,KAAK,EAAE,sDAAsD;AAC9D,aAAA;AACD,YAAA,KAAK,EAAE;AACL,gBAAA,IAAI,EAAE,uHAAuH;AAC7H,gBAAA,KAAK,EAAE,EAAE;AACV,aAAA;AACD,YAAA,QAAQ,EAAE;gBACR,IAAI,EAAE,EAAE;AACR,gBAAA,KAAK,EAAE,EAAE;AACV,aAAA;AACF,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,QAAQ,EAAE,KAAK;AAChB,SAAA;KACF,EACD;AACE,QAAA,OAAO,EAAE,KAAK;AACf,KAAA,CACF;IAED,MAAM,GAAA;QACJ,QACE,CACgB,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,cAAA,EAAA,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,EACF,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAEjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,IAAI,IAAI,CAAqB,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAA,EAAA,IAAI,CAAC,IAAI,GAAa,CAAQ,EAC3F,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kCAAkC,EAAA,EAC3C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,CACpB,EACN,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EAAA,EACvB,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,IAAI,KACxB,CAAA,CAAA,UAAA,EAAA,EAAA,WAAA,EAAqB,IAAI,EAAA,CAAa,CACvC,CAAC,CACG,CACH;;;;;;;"}

package/dist/esm/bcm-dropdown.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BuuGCw0z.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-B6Ppbs5O.js';
 import { t as tv } from './tv-CEcVC0yX.js';
 
 const dropdownCss = ".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}";
@@ -7,29 +7,14 @@ const Dropdown = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.bcmDropdownChange = createEvent(this, "bcmDropdownChange", 1);
-        this.isReady = false;
-        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');
-            }
-        };
-    }
-    componentDidLoad() {
-        const button = this.host.shadowRoot.querySelector('bcm-button');
-        if (button) {
-            this.buttonRef = button;
-            this.isReady = true;
-        }
     }
+    get host() { return getElement(this); }
+    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;
             }
@@ -39,14 +24,20 @@ const Dropdown = class {
             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: '4bbcd189c404f57d7ac411eb98da8dbd2b6d3b30' }, h("bcm-button", { key: '7e571fa321148576cd191a16ffc5bc6c03cdbcd7', kind: "outline" }, h("span", { key: '769d43e0dee2c9a0e5b639d1150da63f9f7ff8fd', part: "text" }, this.text)), this.isReady && (h("bcm-linked", { key: '220d1c248fee2365150ba58de5065c3f748fe15b', targetElement: this.buttonRef }, h("div", { key: '8579fa56fb51741071f646412c5fffd069ba557e', part: "dropdown-container", class: this.dropdownClass() }, h("slot", { key: 'a94646e1a3f85f9c305d0dd01c8f70467b759fe8', 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 })))));
     }
-    get host() { return getElement(this); }
 };
 Dropdown.style = dropdownCss;
 
 export { Dropdown as bcm_dropdown };
 //# sourceMappingURL=bcm-dropdown.entry.js.map
-
-//# sourceMappingURL=bcm-dropdown.entry.js.map

package/dist/esm/bcm-dropdown.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-dropdown.entry.js","sources":["src/components/dropdown/dropdown.css?tag=bcm-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.component.tsx"],"sourcesContent":["/* :host {\n  --dropdown-box-min-weight: 32px;\n  --dropdown-box-max-width: 384px;\n  --dropdown-box-max-height: 384px;\n  --dropdown-box-background-color: var(--bcm-ui-color-background-basic-panel);\n} */\n/* \n.scroll {\n  height: 140px;\n  width: 140px;\n  overflow-y: auto;\n}\n\n.scroll:active::-webkit-scrollbar-thumb,\n.scroll:focus::-webkit-scrollbar-thumb,\n.scroll:hover::-webkit-scrollbar-thumb {\n  visibility: visible;\n}\n.scroll::-webkit-scrollbar-thumb {\n  background-color: darkgrey;\n  visibility: hidden;\n}\n\n.scroll::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n} */\n","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() isReady: boolean = false;\n\n  @State() dropdownItems: HTMLBcmDropdownItemElement[] = [];\n\n  protected buttonRef?: HTMLBcmButtonElement;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropdownChange',\n  })\n  bcmDropdownChange: EventEmitter<any>;\n\n  componentDidLoad() {\n    const button = this.host.shadowRoot.querySelector('bcm-button') as HTMLBcmButtonElement;\n    if (button) {\n      this.buttonRef = button;\n      this.isReady = true;\n    }\n  }\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-button kind=\"outline\">\n          <span part=\"text\">{this.text}</span>\n        </bcm-button>\n        {this.isReady && (\n          <bcm-linked targetElement={this.buttonRef}>\n            <div part=\"dropdown-container\" class={this.dropdownClass()}>\n              <slot onSlotchange={this.handleSlotChange}></slot>\n            </div>\n          </bcm-linked>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,WAAW,GAAG,m0BAAm0B;;MCQ10B,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUW,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAExB,QAAA,IAAa,CAAA,aAAA,GAAiC,EAAE;AAoCjD,QAAA,IAAa,CAAA,aAAA,GAAG,EAAE,CAAC;AACzB,YAAA,IAAI,EAAE,uIAAuI;AAC9I,SAAA,CAAC;AAEM,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;YAEhF,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;AACnC,gBAAA,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC;;AAEjE,SAAC;AAkBF;IApDC,gBAAgB,GAAA;AACd,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAyB;QACvF,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,SAAS,GAAG,MAAM;AACvB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;;AAKvB,IAAA,wBAAwB,CAAC,KAAkB,EAAA;;QACzC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,MAAM;QAE3C,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,OAAO,CAAC,IAAI,IAAG;AACjC,YAAA,IAAI,IAAI,IAAI,OAAO,EAAE;AACnB,gBAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;;AAEzB,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;AAC1B,YAAA,OAAO,EAAE,OAAO;YAChB,QAAQ;AACT,SAAA,CAAC;;IAeJ,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EACxB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,CACzB,EACZ,IAAI,CAAC,OAAO,KACX,mEAAY,aAAa,EAAE,IAAI,CAAC,SAAS,EAAA,EACvC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EACxD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAS,CAAA,CAC9C,CACK,CACd,CACI;;;;;;;;"}
+{"version":3,"file":"bcm-dropdown.entry.js","sources":["src/components/dropdown/dropdown.css?tag=bcm-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.component.tsx"],"sourcesContent":["/* :host {\n  --dropdown-box-min-weight: 32px;\n  --dropdown-box-max-width: 384px;\n  --dropdown-box-max-height: 384px;\n  --dropdown-box-background-color: var(--bcm-ui-color-background-basic-panel);\n} */\n/* \n.scroll {\n  height: 140px;\n  width: 140px;\n  overflow-y: auto;\n}\n\n.scroll:active::-webkit-scrollbar-thumb,\n.scroll:focus::-webkit-scrollbar-thumb,\n.scroll:hover::-webkit-scrollbar-thumb {\n  visibility: visible;\n}\n.scroll::-webkit-scrollbar-thumb {\n  background-color: darkgrey;\n  visibility: hidden;\n}\n\n.scroll::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n} */\n","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"],"names":[],"mappings":";;;AAAA,MAAM,WAAW,GAAG,m0BAAm0B;;MCQ10B,QAAQ,GAAA,MAAA;;;;;;AAGX,IAAA,IAAI;IAEH,aAAa,GAAiC,EAAE;AAQzD,IAAA,iBAAiB;AAGjB,IAAA,wBAAwB,CAAC,KAAkB,EAAA;QACzC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,MAAM;AAE3C,QAAA,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,IAAI,IAAG;AACjC,YAAA,IAAI,IAAI,IAAI,OAAO,EAAE;AACnB,gBAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;;AAEzB,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;AAC1B,YAAA,OAAO,EAAE,OAAO;YAChB,QAAQ;AACT,SAAA,CAAC;;IAGI,aAAa,GAAG,EAAE,CAAC;AACzB,QAAA,IAAI,EAAE,uIAAuI;AAC9I,KAAA,CAAC;IAEM,gBAAgB,GAAG,MAAK;AAC9B,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;QAEhF,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;AACnC,YAAA,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC;;AAEjE,KAAC;IAED,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,cAAc,EAAA,EAClD,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACvC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,CACzB,EACb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EACxD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,CACK,CACR;;;;;;;"}