@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-dropdown/bh-dropdown.css

@@ -0,0 +1,64 @@
+/* ==========================================================================
+   BH-DROPDOWN COMPONENT STYLES
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+  position: relative;
+}
+
+.dropdown-container {
+  position: relative;
+  display: inline-block;
+}
+
+/* Position the dropdown menu */
+.dropdown-container bh-dropdown-menu {
+  position: absolute;
+  z-index: 1000;
+}
+
+/* Default positioning for button variants (below trigger) */
+.dropdown-container:not(.dropdown-avatar-variant) bh-dropdown-menu {
+  top: 100%;
+  right: 0;
+  margin-top: var(--spacing-sm);
+}
+
+/* Avatar variant positioning (to the left of avatar for sidebars) */
+.dropdown-avatar-variant bh-dropdown-menu {
+  bottom: 0;
+  left: calc(100% + var(--spacing-sm));
+}
+
+/* Avatar trigger styles */
+.dropdown-avatar {
+  cursor: pointer;
+  border-radius: 50%;
+  transition: box-shadow 0.2s ease;
+  outline: none;
+  display: inline-block;
+  user-select: none;
+}
+
+.dropdown-avatar:hover:not(.dropdown-avatar-disabled) {
+  box-shadow: 0 0 0 2px var(--color-neutral-200);
+}
+
+.dropdown-avatar:focus:not(.dropdown-avatar-disabled) {
+  box-shadow: 0 0 0 2px var(--color-brand-500);
+}
+
+.dropdown-avatar-focus {
+  box-shadow: 0 0 0 2px var(--color-brand-500);
+}
+
+.dropdown-avatar-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Button state when dropdown is open */
+.dropdown-open bh-button {
+  --button-focus-ring: 0 0 0 2px var(--color-brand-100);
+}

package/collection/components/bh-dropdown/bh-dropdown.js

@@ -0,0 +1,512 @@
+import { h, } from "@stencil/core";
+export class BhDropdown {
+    el;
+    /**
+     * Size of the dropdown trigger
+     */
+    size = 'md';
+    /**
+     * State of the dropdown
+     */
+    state = 'default';
+    /**
+     * Visual variant of the dropdown trigger
+     */
+    variant = 'outlined';
+    /**
+     * Label for the dropdown button
+     */
+    label = 'Options';
+    /**
+     * Icon name for icon-only variants
+     */
+    iconName = 'more_vert';
+    /**
+     * Whether the dropdown is disabled
+     */
+    disabled = false;
+    /**
+     * Menu items (JSON string or array)
+     */
+    menuItems = [];
+    /**
+     * Header configuration (JSON string or object)
+     */
+    header;
+    /**
+     * Avatar image source for avatar variant
+     */
+    avatarSrc = '';
+    /**
+     * Avatar alt text
+     */
+    avatarAlt = 'Avatar';
+    /**
+     * Avatar size for avatar variant
+     */
+    avatarSize = 'md';
+    /**
+     * Avatar name for header
+     */
+    avatarName;
+    /**
+     * Avatar email for header
+     */
+    avatarEmail;
+    /**
+     * Whether to show icons in menu items
+     */
+    showIcons = true;
+    isOpen = false;
+    /**
+     * Event emitted when a menu item is clicked
+     */
+    bhItemClick;
+    handleClickOutside(event) {
+        if (this.isOpen && !this.el.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+    get parsedMenuItems() {
+        if (typeof this.menuItems === 'string') {
+            try {
+                return JSON.parse(this.menuItems);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.menuItems || [];
+    }
+    get parsedHeader() {
+        if (this.variant === 'avatar') {
+            return {
+                avatarGroup: true,
+                avatarSrc: this.avatarSrc,
+                name: this.avatarName,
+                email: this.avatarEmail,
+            };
+        }
+        if (!this.header)
+            return undefined;
+        if (typeof this.header === 'string') {
+            try {
+                return JSON.parse(this.header);
+            }
+            catch {
+                return undefined;
+            }
+        }
+        return this.header;
+    }
+    toggleDropdown = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+    };
+    handleMenuItemClick = (event) => {
+        const item = event.detail;
+        if (!item.disabled) {
+            this.bhItemClick.emit(item);
+            this.isOpen = false;
+        }
+    };
+    get isIconOnly() {
+        return (this.variant === 'icon-only-outlined' ||
+            this.variant === 'icon-only-ghost');
+    }
+    get showAvatar() {
+        return this.variant === 'avatar';
+    }
+    get buttonHierarchy() {
+        return this.variant === 'ghost' || this.variant === 'icon-only-ghost'
+            ? 'tertiary'
+            : 'secondary';
+    }
+    render() {
+        const containerClasses = {
+            'dropdown-container': true,
+            'dropdown-open': this.isOpen,
+            'dropdown-avatar-variant': this.variant === 'avatar',
+        };
+        const avatarClasses = {
+            'dropdown-avatar': true,
+            'dropdown-avatar-focus': this.isOpen,
+            'dropdown-avatar-disabled': this.disabled,
+        };
+        return (h("div", { key: '203d4ee8afd1f081c90d19e3befb59794658bb86', class: containerClasses }, !this.showAvatar && (h("bh-button", { key: '43362ec4952a03d0b26676ac7b7a066e122da142', hierarchy: this.buttonHierarchy, icon: this.isIconOnly ? 'only' : 'trailing', size: this.size, label: this.isIconOnly ? '' : this.label, iconName: this.isIconOnly ? this.iconName : 'expand_more', disabled: this.disabled, onClick: this.toggleDropdown })), this.showAvatar && (h("div", { key: '44221c66ba3b6ed22dd877baf9d382d1408c8878', class: avatarClasses, onClick: (e) => {
+                if (!this.disabled) {
+                    e.stopPropagation();
+                    this.toggleDropdown();
+                }
+            }, role: "button", tabindex: this.disabled ? -1 : 0, onKeyDown: (e) => {
+                if (!this.disabled && (e.key === 'Enter' || e.key === ' ')) {
+                    e.preventDefault();
+                    this.toggleDropdown();
+                }
+            } }, h("bh-avatar", { key: '0eb6fd5ae65d93c996ba703f1ab044227760f78f', type: "image", size: this.avatarSize, imageSrc: this.avatarSrc, alt: this.avatarAlt }))), h("bh-dropdown-menu", { key: '5f5dc22d2983af6ba6f5331e4c2259555ed6d498', visible: this.isOpen, showIcons: this.showIcons, menuItems: JSON.stringify(this.parsedMenuItems), header: this.parsedHeader ? JSON.stringify(this.parsedHeader) : undefined, onBhItemClick: this.handleMenuItemClick })));
+    }
+    static get is() { return "bh-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-dropdown.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "DropdownSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-dropdown/bh-dropdown.tsx",
+                            "id": "src/components/bh-dropdown/bh-dropdown.tsx::DropdownSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the dropdown trigger"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownState",
+                    "resolved": "\"default\" | \"disabled\" | \"focus\"",
+                    "references": {
+                        "DropdownState": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-dropdown/bh-dropdown.tsx",
+                            "id": "src/components/bh-dropdown/bh-dropdown.tsx::DropdownState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "State of the dropdown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'default'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownVariant",
+                    "resolved": "\"avatar\" | \"ghost\" | \"icon-only-ghost\" | \"icon-only-outlined\" | \"outlined\"",
+                    "references": {
+                        "DropdownVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-dropdown/bh-dropdown.tsx",
+                            "id": "src/components/bh-dropdown/bh-dropdown.tsx::DropdownVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant of the dropdown trigger"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'outlined'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the dropdown button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Options'"
+            },
+            "iconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name for icon-only variants"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-name",
+                "defaultValue": "'more_vert'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dropdown is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "menuItems": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownMenuItem[] | string",
+                    "resolved": "DropdownMenuItem[] | string",
+                    "references": {
+                        "DropdownMenuItem": {
+                            "location": "import",
+                            "path": "../bh-dropdown-menu/bh-dropdown-menu",
+                            "id": "src/components/bh-dropdown-menu/bh-dropdown-menu.tsx::DropdownMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu items (JSON string or array)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-items",
+                "defaultValue": "[]"
+            },
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownMenuHeader | string",
+                    "resolved": "DropdownMenuHeader | string | undefined",
+                    "references": {
+                        "DropdownMenuHeader": {
+                            "location": "import",
+                            "path": "../bh-dropdown-menu/bh-dropdown-menu",
+                            "id": "src/components/bh-dropdown-menu/bh-dropdown-menu.tsx::DropdownMenuHeader"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Header configuration (JSON string or object)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header"
+            },
+            "avatarSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar image source for avatar variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-src",
+                "defaultValue": "''"
+            },
+            "avatarAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar alt text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-alt",
+                "defaultValue": "'Avatar'"
+            },
+            "avatarSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar size for avatar variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-size",
+                "defaultValue": "'md'"
+            },
+            "avatarName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar name for header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-name"
+            },
+            "avatarEmail": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar email for header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-email"
+            },
+            "showIcons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show icons in menu items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icons",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhItemClick",
+                "name": "bhItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a menu item is clicked"
+                },
+                "complexType": {
+                    "original": "DropdownMenuItem",
+                    "resolved": "DropdownMenuItem",
+                    "references": {
+                        "DropdownMenuItem": {
+                            "location": "import",
+                            "path": "../bh-dropdown-menu/bh-dropdown-menu",
+                            "id": "src/components/bh-dropdown-menu/bh-dropdown-menu.tsx::DropdownMenuItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClickOutside",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=bh-dropdown.js.map

package/collection/components/bh-dropdown/bh-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-dropdown.js","sourceRoot":"","sources":["../../../src/components/bh-dropdown/bh-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  h,\n  Listen,\n} from '@stencil/core';\nimport type {\n  DropdownMenuItem,\n  DropdownMenuHeader,\n} from '../bh-dropdown-menu/bh-dropdown-menu';\n\nexport type DropdownSize = 'sm' | 'md';\nexport type DropdownState = 'default' | 'focus' | 'disabled';\nexport type DropdownVariant =\n  | 'outlined'\n  | 'ghost'\n  | 'icon-only-outlined'\n  | 'icon-only-ghost'\n  | 'avatar';\n\n@Component({\n  tag: 'bh-dropdown',\n  styleUrl: 'bh-dropdown.css',\n  shadow: true,\n})\nexport class BhDropdown {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Size of the dropdown trigger\n   */\n  @Prop() size: DropdownSize = 'md';\n\n  /**\n   * State of the dropdown\n   */\n  @Prop() state: DropdownState = 'default';\n\n  /**\n   * Visual variant of the dropdown trigger\n   */\n  @Prop() variant: DropdownVariant = 'outlined';\n\n  /**\n   * Label for the dropdown button\n   */\n  @Prop() label: string = 'Options';\n\n  /**\n   * Icon name for icon-only variants\n   */\n  @Prop() iconName: string = 'more_vert';\n\n  /**\n   * Whether the dropdown is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Menu items (JSON string or array)\n   */\n  @Prop() menuItems: DropdownMenuItem[] | string = [];\n\n  /**\n   * Header configuration (JSON string or object)\n   */\n  @Prop() header?: DropdownMenuHeader | string;\n\n  /**\n   * Avatar image source for avatar variant\n   */\n  @Prop() avatarSrc: string = '';\n\n  /**\n   * Avatar alt text\n   */\n  @Prop() avatarAlt: string = 'Avatar';\n\n  /**\n   * Avatar size for avatar variant\n   */\n  @Prop() avatarSize: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Avatar name for header\n   */\n  @Prop() avatarName?: string;\n\n  /**\n   * Avatar email for header\n   */\n  @Prop() avatarEmail?: string;\n\n  /**\n   * Whether to show icons in menu items\n   */\n  @Prop() showIcons: boolean = true;\n\n  @State() isOpen: boolean = false;\n\n  /**\n   * Event emitted when a menu item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<DropdownMenuItem>;\n\n  @Listen('click', { target: 'document' })\n  handleClickOutside(event: MouseEvent) {\n    if (this.isOpen && !this.el.contains(event.target as Node)) {\n      this.isOpen = false;\n    }\n  }\n\n  private get parsedMenuItems(): DropdownMenuItem[] {\n    if (typeof this.menuItems === 'string') {\n      try {\n        return JSON.parse(this.menuItems);\n      } catch {\n        return [];\n      }\n    }\n    return this.menuItems || [];\n  }\n\n  private get parsedHeader(): DropdownMenuHeader | undefined {\n    if (this.variant === 'avatar') {\n      return {\n        avatarGroup: true,\n        avatarSrc: this.avatarSrc,\n        name: this.avatarName,\n        email: this.avatarEmail,\n      };\n    }\n    if (!this.header) return undefined;\n    if (typeof this.header === 'string') {\n      try {\n        return JSON.parse(this.header);\n      } catch {\n        return undefined;\n      }\n    }\n    return this.header;\n  }\n\n  private toggleDropdown = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleMenuItemClick = (event: CustomEvent<DropdownMenuItem>) => {\n    const item = event.detail;\n    if (!item.disabled) {\n      this.bhItemClick.emit(item);\n      this.isOpen = false;\n    }\n  };\n\n  private get isIconOnly(): boolean {\n    return (\n      this.variant === 'icon-only-outlined' ||\n      this.variant === 'icon-only-ghost'\n    );\n  }\n\n  private get showAvatar(): boolean {\n    return this.variant === 'avatar';\n  }\n\n  private get buttonHierarchy(): 'secondary' | 'tertiary' {\n    return this.variant === 'ghost' || this.variant === 'icon-only-ghost'\n      ? 'tertiary'\n      : 'secondary';\n  }\n\n  render() {\n    const containerClasses = {\n      'dropdown-container': true,\n      'dropdown-open': this.isOpen,\n      'dropdown-avatar-variant': this.variant === 'avatar',\n    };\n\n    const avatarClasses = {\n      'dropdown-avatar': true,\n      'dropdown-avatar-focus': this.isOpen,\n      'dropdown-avatar-disabled': this.disabled,\n    };\n\n    return (\n      <div class={containerClasses}>\n        {/* Button variants */}\n        {!this.showAvatar && (\n          <bh-button\n            hierarchy={this.buttonHierarchy}\n            icon={this.isIconOnly ? 'only' : 'trailing'}\n            size={this.size}\n            label={this.isIconOnly ? '' : this.label}\n            iconName={this.isIconOnly ? this.iconName : 'expand_more'}\n            disabled={this.disabled}\n            onClick={this.toggleDropdown}\n          />\n        )}\n\n        {/* Avatar variant */}\n        {this.showAvatar && (\n          <div\n            class={avatarClasses}\n            onClick={(e) => {\n              if (!this.disabled) {\n                e.stopPropagation();\n                this.toggleDropdown();\n              }\n            }}\n            role=\"button\"\n            tabindex={this.disabled ? -1 : 0}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (!this.disabled && (e.key === 'Enter' || e.key === ' ')) {\n                e.preventDefault();\n                this.toggleDropdown();\n              }\n            }}\n          >\n            <bh-avatar\n              type=\"image\"\n              size={this.avatarSize}\n              imageSrc={this.avatarSrc}\n              alt={this.avatarAlt}\n            />\n          </div>\n        )}\n\n        {/* Menu */}\n        <bh-dropdown-menu\n          visible={this.isOpen}\n          showIcons={this.showIcons}\n          menuItems={JSON.stringify(this.parsedMenuItems)}\n          header={\n            this.parsedHeader ? JSON.stringify(this.parsedHeader) : undefined\n          }\n          onBhItemClick={this.handleMenuItemClick}\n        />\n      </div>\n    );\n  }\n}\n"]}