bromcom-ui-next 0.1.30 → 0.1.31

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

@@ -0,0 +1 @@
+{"version":3,"file":"bcm-drawer.entry.cjs.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":["tv","h"],"mappings":"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"}

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

@@ -1,42 +1,23 @@
 'use strict';
 
-var index = require('./index-CmYzUr-k.js');
+var index = require('./index-1Qal-onT.js');
 var tv = require('./tv-ngpIbGlG.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) {
         index.registerInstance(this, hostRef);
         this.bcmDropDownItemChange = index.createEvent(this, "bcmDropDownItemChange", 1);
-        this.selected = false;
-        this.error = false;
-        this.disabled = false;
-        this.dropdownItemClass = tv.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 index.getElement(this); }
+    text;
+    icon;
+    rightIcons;
+    selected = false;
+    error = false;
+    disabled = false;
+    bcmDropDownItemChange;
     handleClick() {
         this.selected = true;
         this.bcmDropDownItemChange.emit({
@@ -44,14 +25,36 @@ const DropdownItem = class {
             selected: this.selected,
         });
     }
+    dropdownItemClass = tv.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 (index.h("div", { key: 'df59d3ea6c53de5a10d37b6acd8e81d9c516e6f5', "aria-checked": this.selected, class: this.dropdownItemClass({
+        return (index.h("div", { key: 'f17e6b4ad9aaf91370da88fa0913c6eb2e227b1b', "aria-checked": this.selected, class: this.dropdownItemClass({
                 selected: this.selected,
                 error: this.error,
-            }), onClick: () => this.handleClick() }, index.h("slot", { key: '7ef8f52088bff39eb3dfecf7269b1d6b29185582', name: "left-content" }, this.icon && index.h("bcm-icon", { key: 'a302aafb745289c380edc120738c973fe7200c6d', "icon-name": this.icon })), index.h("div", { key: '7c5c8c27b982dbd314d5645603035f4dff0087d7', class: "flex flex-row text-pretty w-full" }, index.h("slot", { key: '873e7b62a2b20cc992425dcfd42c4edd1da6144b' }, this.text)), index.h("slot", { key: '199f13fb5dfa2d6b5bd1ed07652aa721eaf3c8a9', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (index.h("bcm-icon", { "icon-name": icon }))))));
+            }), onClick: () => this.handleClick() }, index.h("slot", { key: '2d645ab61ee21e1c85a0f9fbb12c456922c8ca3b', name: "left-content" }, this.icon && index.h("bcm-icon", { key: '654afa8ac72f92b5bd7c64e247de0884b91b04ca', "icon-name": this.icon })), index.h("div", { key: '9885ed60b496e2096b1e203ba27e83f76bacd57e', class: "flex flex-row text-pretty w-full" }, index.h("slot", { key: '8a8d7ab8236d652114be728906e9f079438a0b6a' }, this.text)), index.h("slot", { key: '62e1450b43e8a407d9e4ef284c72dd34950a6e7c', name: "right-content" }, this.rightIcons?.map(icon => (index.h("bcm-icon", { "icon-name": icon }))))));
     }
-    get host() { return index.getElement(this); }
 };
 DropdownItem.style = dropdownItemCss;
 

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

@@ -1 +1 @@
-{"version":3,"file":"bcm-dropdown-item.entry.cjs.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":["tv","h"],"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,GAAGA,KAAE,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,QACEC,OACgB,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,EAEjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,IAAI,IAAIA,OAAqB,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAA,EAAA,IAAI,CAAC,IAAI,GAAa,CAAQ,EAC3FA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kCAAkC,EAAA,EAC3CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,CACpB,EACNA,OAAM,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,KACxBA,OAAA,CAAA,UAAA,EAAA,EAAA,WAAA,EAAqB,IAAI,EAAA,CAAa,CACvC,CAAC,CACG,CACH;;;;;;;;"}
+{"version":3,"file":"bcm-dropdown-item.entry.cjs.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":["tv","h"],"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,GAAGA,KAAE,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,QACEC,OACgB,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,EAEjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,IAAI,IAAIA,OAAqB,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAA,EAAA,IAAI,CAAC,IAAI,GAAa,CAAQ,EAC3FA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kCAAkC,EAAA,EAC3CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,CACpB,EACNA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EAAA,EACvB,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,IAAI,KACxBA,OAAA,CAAA,UAAA,EAAA,EAAA,WAAA,EAAqB,IAAI,EAAA,CAAa,CACvC,CAAC,CACG,CACH;;;;;;;"}

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

@@ -1,29 +1,22 @@
 'use strict';
 
-var index = require('./index-CmYzUr-k.js');
+var index = require('./index-1Qal-onT.js');
 var tv = require('./tv-ngpIbGlG.js');
 
-const dropdownCss = ".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}";
+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}";
 
 const Dropdown = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.bcmDropdownChange = index.createEvent(this, "bcmDropdownChange", 1);
-        this.dropdownItems = [];
-        this.dropdownClass = tv.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');
-            }
-        };
     }
+    get host() { return index.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;
             }
@@ -33,10 +26,18 @@ const Dropdown = class {
             selected,
         });
     }
+    dropdownClass = tv.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 (index.h(index.Host, { key: '616424e348e7b0bf6281a1dfc9a6cf003a10166d' }, index.h("bcm-linked", { key: '9738f964a5aaecff10685ec42043bbf74f540194', trigger: "click", placement: "bottom-start" }, index.h("bcm-button", { key: '619996c5aeb3351d02cf051fd50050fa7e22315f', kind: "outline", slot: "trigger" }, index.h("span", { key: '704ca8d6e695ce46a3dbfc7cf7473952db6e2d27', part: "text" }, this.text)), index.h("div", { key: '13b3fdcbb0d360065ea6c0bb22eb622f789667fd', part: "dropdown-container", class: this.dropdownClass() }, index.h("slot", { key: '6cebd340b556af602af7d10e78ba7ba5e34191c7', onSlotchange: this.handleSlotChange })))));
+        return (index.h(index.Host, { key: 'a573b6ba000722dc455d75f5085fe0b9b08eb4f8' }, index.h("bcm-linked", { key: '5dbbcfce9d6b3be30696a5efd0f06020331d4e0f', trigger: "click", placement: "bottom-start" }, index.h("bcm-button", { key: 'd8bdcbb9990ef903cccc837db5cb97aeb00e8807', kind: "outline", slot: "trigger" }, index.h("span", { key: '4694ae4aa91429e6a3da676e3228cd6463d17174', part: "text" }, this.text)), index.h("div", { key: '4fdb37f07ca1652f9fd5fcf586516ae42d45b201', part: "dropdown-container", class: this.dropdownClass() }, index.h("slot", { key: '6b4386fe543c67a1ac3fe91dffc0e27d986d368b', onSlotchange: this.handleSlotChange })))));
     }
-    get host() { return index.getElement(this); }
 };
 Dropdown.style = dropdownCss;
 

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

@@ -1 +1 @@
-{"version":3,"file":"bcm-dropdown.entry.cjs.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":["tv","h","Host"],"mappings":";;;;;AAAA,MAAM,WAAW,GAAG,2yBAA2yB;;MCQlzB,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUW,QAAA,IAAa,CAAA,aAAA,GAAiC,EAAE;AA0BjD,QAAA,IAAa,CAAA,aAAA,GAAGA,KAAE,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;AAgBF;AAzCC,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,QACEC,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,cAAc,EAAA,EAClDA,OAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACvCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,CACzB,EACbA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EACxDA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,CACK,CACR;;;;;;;;"}
+{"version":3,"file":"bcm-dropdown.entry.cjs.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":["tv","h","Host"],"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,GAAGA,KAAE,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,QACEC,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,cAAc,EAAA,EAClDA,OAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACvCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,CACzB,EACbA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EACxDA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,CACK,CACR;;;;;;;"}