@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-autocomplete-menu/bh-autocomplete-menu.css

@@ -0,0 +1,142 @@
+/* ==========================================================================
+   AUTOCOMPLETE MENU COMPONENT
+   Shared styles for all frameworks
+   ========================================================================== */
+
+.autocomplete-menu {
+  position: absolute;
+  z-index: 1000;
+  top: calc(100% + var(--spacing-sm));
+  left: 0;
+  right: 0;
+  width: 100%;
+  min-width: 240px;
+  background: var(--color-white);
+  border-radius: var(--radius-md);
+  box-shadow: 0px 32px 64px -12px rgba(64, 73, 104, 0.14),
+    0px 0px 1px 1px rgba(64, 73, 104, 0.1);
+  border: 1px solid var(--color-neutral-200);
+  overflow: hidden;
+  overflow-y: auto;
+  /* Add padding like dropdown-menu items container */
+  padding: var(--spacing-xs) 0;
+  /* Optimizations for stable layout */
+  box-sizing: border-box;
+  transform: translateZ(0); /* Hardware acceleration */
+  will-change: opacity, transform;
+}
+
+
+/* Menu Items - Match dropdown-menu styling exactly */
+.autocomplete-item {
+  padding: var(--spacing-none) var(--spacing-sm);
+  cursor: pointer;
+}
+
+.autocomplete-item.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.item-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-lg);
+  padding: var(--spacing-md) var(--spacing-md);
+  border-radius: var(--radius-sm);
+  transition: background-color 0.15s ease;
+}
+
+.autocomplete-item:hover:not(.disabled) .item-content {
+  background: var(--color-neutral-100);
+}
+
+.autocomplete-item.selected .item-content {
+  background: var(--color-neutral-100);
+}
+
+.item-text {
+  font-family: var(--font-inter);
+  font-weight: var(--weight-medium);
+  font-size: var(--text-sm-size);
+  line-height: var(--text-sm-line);
+  color: var(--color-neutral-700);
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.autocomplete-item.selected .item-text {
+  color: var(--color-neutral-700);
+  font-weight: var(--weight-medium);
+}
+
+.autocomplete-item.disabled .item-text {
+  color: var(--color-neutral-400);
+}
+
+/* Highlight matching text */
+.item-text .highlight {
+  font-weight: var(--weight-semibold);
+  color: var(--color-neutral-800);
+}
+
+/* Check icon for multi-select */
+.check-icon {
+  font-size: var(--text-xl-size);
+  color: var(--color-brand-600);
+  flex-shrink: 0;
+  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
+}
+
+/* Custom Scrollbar */
+.autocomplete-menu::-webkit-scrollbar {
+  width: 6px;
+}
+
+.autocomplete-menu::-webkit-scrollbar-track {
+  background: var(--color-neutral-50);
+  border-radius: var(--radius-xs);
+}
+
+.autocomplete-menu::-webkit-scrollbar-thumb {
+  background: var(--color-neutral-200);
+  border-radius: var(--radius-xs);
+}
+
+.autocomplete-menu::-webkit-scrollbar-thumb:hover {
+  background: var(--color-neutral-300);
+}
+
+/* Firefox scrollbar */
+.autocomplete-menu {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-neutral-200) var(--color-neutral-50);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .autocomplete-menu {
+    border-width: 2px;
+  }
+
+  .autocomplete-item.selected {
+    outline: 2px solid var(--color-brand-500);
+    outline-offset: -2px;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .autocomplete-menu.animate-dropdown-enter,
+  .autocomplete-menu.animate-dropdown-exit {
+    animation: none;
+  }
+
+  .autocomplete-item {
+    transition: none;
+  }
+}

package/collection/components/bh-autocomplete-menu/bh-autocomplete-menu.js

@@ -0,0 +1,301 @@
+import { h, Host } from "@stencil/core";
+export class BhAutocompleteMenu {
+    /**
+     * Array of menu items
+     */
+    menuItems = [];
+    /**
+     * Whether the menu is visible
+     */
+    visible = false;
+    /**
+     * Currently selected item index
+     */
+    selectedIndex = -1;
+    /**
+     * Maximum height of the menu in pixels
+     */
+    maxHeight = 280;
+    /**
+     * Enable multi-select mode with checkmarks
+     */
+    multiSelect = false;
+    /**
+     * Search query for highlighting text
+     */
+    searchQuery = '';
+    /**
+     * Event emitted when an item is clicked
+     */
+    bhItemClick;
+    /**
+     * Event emitted when an item is hovered
+     */
+    bhItemHover;
+    isAnimating = false;
+    shouldRender = false;
+    items = [];
+    watchVisible(newValue) {
+        if (newValue) {
+            this.shouldRender = true;
+            this.isAnimating = false;
+        }
+        else {
+            this.isAnimating = true;
+            setTimeout(() => {
+                this.shouldRender = false;
+                this.isAnimating = false;
+            }, 150);
+        }
+    }
+    watchMenuItems(newValue) {
+        this.items = [...newValue];
+    }
+    componentWillLoad() {
+        this.shouldRender = this.visible;
+        this.items = [...this.menuItems];
+    }
+    handleItemClick = (item) => {
+        if (!item.disabled) {
+            if (this.multiSelect) {
+                // Toggle selection in multi-select mode
+                this.items = this.items.map(i => i.id === item.id ? { ...i, selected: !i.selected } : i);
+                const updatedItem = this.items.find(i => i.id === item.id);
+                this.bhItemClick.emit(updatedItem);
+            }
+            else {
+                this.bhItemClick.emit(item);
+            }
+        }
+    };
+    handleItemMouseEnter = (index) => {
+        this.bhItemHover.emit(index);
+    };
+    handleMouseDown = (e) => {
+        e.preventDefault();
+    };
+    getMenuClasses = () => {
+        return {
+            'autocomplete-menu': true,
+            'animate-dropdown-exit': this.isAnimating && !this.visible,
+            'animate-dropdown-enter': this.visible && !this.isAnimating,
+        };
+    };
+    getItemClasses = (index, item) => {
+        return {
+            'autocomplete-item': true,
+            'disabled': !!item.disabled,
+            'selected': index === this.selectedIndex,
+        };
+    };
+    getHighlightedText = (text) => {
+        if (!this.searchQuery || this.searchQuery.length < 3) {
+            return text;
+        }
+        const regex = new RegExp(`(${this.searchQuery})`, 'gi');
+        const parts = text.split(regex);
+        return parts.map((part, index) => regex.test(part) ? (h("span", { key: index, class: "highlight" }, part)) : (h("span", { key: index }, part)));
+    };
+    render() {
+        if (!this.shouldRender || this.items.length === 0) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: this.getMenuClasses(), style: { maxHeight: `${this.maxHeight}px` } }, this.items.map((item, index) => (h("div", { key: item.id, class: this.getItemClasses(index, item), onMouseEnter: () => this.handleItemMouseEnter(index), role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false' }, h("div", { class: "item-content", onClick: () => this.handleItemClick(item), onMouseDown: this.handleMouseDown }, h("span", { class: "item-text", title: item.label }, this.getHighlightedText(item.label)), this.multiSelect && item.selected && (h("span", { class: "check-icon material-symbols-outlined" }, "check")))))))));
+    }
+    static get is() { return "bh-autocomplete-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-autocomplete-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-autocomplete-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "menuItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AutocompleteMenuItem[]",
+                    "resolved": "AutocompleteMenuItem[]",
+                    "references": {
+                        "AutocompleteMenuItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-autocomplete-menu/bh-autocomplete-menu.tsx",
+                            "id": "src/components/bh-autocomplete-menu/bh-autocomplete-menu.tsx::AutocompleteMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of menu items"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the menu is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "false"
+            },
+            "selectedIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected item index"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-index",
+                "defaultValue": "-1"
+            },
+            "maxHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum height of the menu in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-height",
+                "defaultValue": "280"
+            },
+            "multiSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable multi-select mode with checkmarks"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multi-select",
+                "defaultValue": "false"
+            },
+            "searchQuery": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search query for highlighting text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-query",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isAnimating": {},
+            "shouldRender": {},
+            "items": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhItemClick",
+                "name": "bhItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when an item is clicked"
+                },
+                "complexType": {
+                    "original": "AutocompleteMenuItem",
+                    "resolved": "AutocompleteMenuItem",
+                    "references": {
+                        "AutocompleteMenuItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-autocomplete-menu/bh-autocomplete-menu.tsx",
+                            "id": "src/components/bh-autocomplete-menu/bh-autocomplete-menu.tsx::AutocompleteMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "bhItemHover",
+                "name": "bhItemHover",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when an item is hovered"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "visible",
+                "methodName": "watchVisible"
+            }, {
+                "propName": "menuItems",
+                "methodName": "watchMenuItems"
+            }];
+    }
+}
+//# sourceMappingURL=bh-autocomplete-menu.js.map

package/collection/components/bh-autocomplete-menu/bh-autocomplete-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-autocomplete-menu.js","sourceRoot":"","sources":["../../../src/components/bh-autocomplete-menu/bh-autocomplete-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAc5F,MAAM,OAAO,kBAAkB;IAC7B;;OAEG;IACK,SAAS,GAA2B,EAAE,CAAC;IAE/C;;OAEG;IACK,OAAO,GAAY,KAAK,CAAC;IAEjC;;OAEG;IACK,aAAa,GAAW,CAAC,CAAC,CAAC;IAEnC;;OAEG;IACK,SAAS,GAAW,GAAG,CAAC;IAEhC;;OAEG;IACK,WAAW,GAAY,KAAK,CAAC;IAErC;;OAEG;IACK,WAAW,GAAW,EAAE,CAAC;IAEjC;;OAEG;IACM,WAAW,CAAsC;IAE1D;;OAEG;IACM,WAAW,CAAwB;IAEnC,WAAW,GAAY,KAAK,CAAC;IAC7B,YAAY,GAAY,KAAK,CAAC;IAC9B,KAAK,GAA2B,EAAE,CAAC;IAG5C,YAAY,CAAC,QAAiB;QAC5B,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;gBAC1B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAC3B,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC;IACH,CAAC;IAGD,cAAc,CAAC,QAAgC;QAC7C,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;IAC7B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;IACnC,CAAC;IAEO,eAAe,GAAG,CAAC,IAA0B,EAAE,EAAE;QACvD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,wCAAwC;gBACxC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAC9B,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CACvD,CAAC;gBACF,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAE,CAAC;gBAC5D,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACrC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEM,oBAAoB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC/C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEM,eAAe,GAAG,CAAC,CAAa,EAAE,EAAE;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;IACrB,CAAC,CAAC;IAEM,cAAc,GAAG,GAAG,EAAE;QAC5B,OAAO;YACL,mBAAmB,EAAE,IAAI;YACzB,uBAAuB,EAAE,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,OAAO;YAC1D,wBAAwB,EAAE,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW;SAC5D,CAAC;IACJ,CAAC,CAAC;IAEM,cAAc,GAAG,CAAC,KAAa,EAAE,IAA0B,EAAE,EAAE;QACrE,OAAO;YACL,mBAAmB,EAAE,IAAI;YACzB,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ;YAC3B,UAAU,EAAE,KAAK,KAAK,IAAI,CAAC,aAAa;SACzC,CAAC;IACJ,CAAC,CAAC;IAEM,kBAAkB,GAAG,CAAC,IAAY,EAAE,EAAE;QAC5C,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACrD,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,IAAI,CAAC,CAAC;QACxD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAEhC,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC/B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACjB,YAAM,GAAG,EAAE,KAAK,EAAE,KAAK,EAAC,WAAW,IAAE,IAAI,CAAQ,CAClD,CAAC,CAAC,CAAC,CACF,YAAM,GAAG,EAAE,KAAK,IAAG,IAAI,CAAQ,CAChC,CACF,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAClD,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,WACE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,EAAE,IAE1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,WACE,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,EACvC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,EACpD,IAAI,EAAC,QAAQ,mBACE,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC/C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gBAE/C,WACE,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EACzC,WAAW,EAAE,IAAI,CAAC,eAAe;oBAEjC,YAAM,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IACtC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAC/B;oBACN,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,IAAI,CACpC,YAAM,KAAK,EAAC,sCAAsC,YAE3C,CACR,CACG,CACF,CACP,CAAC,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, State, Watch, h, Host } from '@stencil/core';\n\nexport interface AutocompleteMenuItem {\n  id: string;\n  label: string;\n  disabled?: boolean;\n  selected?: boolean;\n}\n\n@Component({\n  tag: 'bh-autocomplete-menu',\n  styleUrl: 'bh-autocomplete-menu.css',\n  shadow: true,\n})\nexport class BhAutocompleteMenu {\n  /**\n   * Array of menu items\n   */\n  @Prop() menuItems: AutocompleteMenuItem[] = [];\n\n  /**\n   * Whether the menu is visible\n   */\n  @Prop() visible: boolean = false;\n\n  /**\n   * Currently selected item index\n   */\n  @Prop() selectedIndex: number = -1;\n\n  /**\n   * Maximum height of the menu in pixels\n   */\n  @Prop() maxHeight: number = 280;\n\n  /**\n   * Enable multi-select mode with checkmarks\n   */\n  @Prop() multiSelect: boolean = false;\n\n  /**\n   * Search query for highlighting text\n   */\n  @Prop() searchQuery: string = '';\n\n  /**\n   * Event emitted when an item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<AutocompleteMenuItem>;\n\n  /**\n   * Event emitted when an item is hovered\n   */\n  @Event() bhItemHover!: EventEmitter<number>;\n\n  @State() isAnimating: boolean = false;\n  @State() shouldRender: boolean = false;\n  @State() items: AutocompleteMenuItem[] = [];\n\n  @Watch('visible')\n  watchVisible(newValue: boolean) {\n    if (newValue) {\n      this.shouldRender = true;\n      this.isAnimating = false;\n    } else {\n      this.isAnimating = true;\n      setTimeout(() => {\n        this.shouldRender = false;\n        this.isAnimating = false;\n      }, 150);\n    }\n  }\n\n  @Watch('menuItems')\n  watchMenuItems(newValue: AutocompleteMenuItem[]) {\n    this.items = [...newValue];\n  }\n\n  componentWillLoad() {\n    this.shouldRender = this.visible;\n    this.items = [...this.menuItems];\n  }\n\n  private handleItemClick = (item: AutocompleteMenuItem) => {\n    if (!item.disabled) {\n      if (this.multiSelect) {\n        // Toggle selection in multi-select mode\n        this.items = this.items.map(i =>\n          i.id === item.id ? { ...i, selected: !i.selected } : i\n        );\n        const updatedItem = this.items.find(i => i.id === item.id)!;\n        this.bhItemClick.emit(updatedItem);\n      } else {\n        this.bhItemClick.emit(item);\n      }\n    }\n  };\n\n  private handleItemMouseEnter = (index: number) => {\n    this.bhItemHover.emit(index);\n  };\n\n  private handleMouseDown = (e: MouseEvent) => {\n    e.preventDefault();\n  };\n\n  private getMenuClasses = () => {\n    return {\n      'autocomplete-menu': true,\n      'animate-dropdown-exit': this.isAnimating && !this.visible,\n      'animate-dropdown-enter': this.visible && !this.isAnimating,\n    };\n  };\n\n  private getItemClasses = (index: number, item: AutocompleteMenuItem) => {\n    return {\n      'autocomplete-item': true,\n      'disabled': !!item.disabled,\n      'selected': index === this.selectedIndex,\n    };\n  };\n\n  private getHighlightedText = (text: string) => {\n    if (!this.searchQuery || this.searchQuery.length < 3) {\n      return text;\n    }\n\n    const regex = new RegExp(`(${this.searchQuery})`, 'gi');\n    const parts = text.split(regex);\n\n    return parts.map((part, index) =>\n      regex.test(part) ? (\n        <span key={index} class=\"highlight\">{part}</span>\n      ) : (\n        <span key={index}>{part}</span>\n      )\n    );\n  };\n\n  render() {\n    if (!this.shouldRender || this.items.length === 0) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <div\n          class={this.getMenuClasses()}\n          style={{ maxHeight: `${this.maxHeight}px` }}\n        >\n          {this.items.map((item, index) => (\n            <div\n              key={item.id}\n              class={this.getItemClasses(index, item)}\n              onMouseEnter={() => this.handleItemMouseEnter(index)}\n              role=\"option\"\n              aria-selected={index === this.selectedIndex ? 'true' : 'false'}\n              aria-disabled={item.disabled ? 'true' : 'false'}\n            >\n              <div\n                class=\"item-content\"\n                onClick={() => this.handleItemClick(item)}\n                onMouseDown={this.handleMouseDown}\n              >\n                <span class=\"item-text\" title={item.label}>\n                  {this.getHighlightedText(item.label)}\n                </span>\n                {this.multiSelect && item.selected && (\n                  <span class=\"check-icon material-symbols-outlined\">\n                    check\n                  </span>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}