@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-accordion-item/bh-accordion-item.js

@@ -0,0 +1,207 @@
+import { h, Host, } from "@stencil/core";
+/**
+ * @slot - Content displayed when the accordion item is expanded
+ */
+export class BhAccordionItem {
+    /**
+     * Unique identifier for this accordion item
+     */
+    value;
+    /**
+     * The header/title text for the accordion item
+     */
+    header;
+    /**
+     * Whether this accordion item is currently expanded
+     */
+    expanded = false;
+    /**
+     * Whether this accordion item is disabled
+     */
+    disabled = false;
+    /**
+     * Internal state for animation
+     */
+    isAnimating = false;
+    /**
+     * Emitted when the accordion item is toggled
+     */
+    bhAccordionToggle;
+    /**
+     * Emitted when the accordion header is clicked
+     */
+    bhAccordionClick;
+    handleExpandedChange() {
+        this.isAnimating = true;
+        setTimeout(() => {
+            this.isAnimating = false;
+        }, 200);
+    }
+    handleHeaderClick = () => {
+        if (this.disabled)
+            return;
+        this.expanded = !this.expanded;
+        this.bhAccordionClick.emit(this.value);
+        this.bhAccordionToggle.emit({
+            value: this.value,
+            expanded: this.expanded,
+        });
+    };
+    handleKeyDown = (event) => {
+        if (this.disabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleHeaderClick();
+        }
+    };
+    render() {
+        const hostClasses = {
+            'accordion-item': true,
+            'accordion-item-expanded': this.expanded,
+            'accordion-item-disabled': this.disabled,
+            'accordion-item-animating': this.isAnimating,
+        };
+        const iconName = this.expanded ? 'expand_less' : 'expand_more';
+        return (h(Host, { key: 'b2670121b2a9706343aa29a5cf1ac1d033ece042', class: hostClasses }, h("div", { key: 'e18a7443b248bbba0706a39f5a65e0c804e5bae5', class: "accordion-header", part: "header", role: "button", tabindex: this.disabled ? -1 : 0, "aria-expanded": this.expanded ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-controls": `content-${this.value}`, onClick: this.handleHeaderClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'a5a3be10f39bd63eb31d7b6a90b40f0714866ae5', class: "accordion-header-content" }, h("span", { key: '5d3ff7b6e69fab0e3658873dec49793972f2c0d5', class: "accordion-title", part: "title" }, this.header)), h("span", { key: 'e18cfab4d73e6d41d40c275888a584b1bb117d23', class: "accordion-icon material-symbols-outlined", part: "icon" }, iconName)), h("div", { key: 'd96ba43717314f6787f513f664b282391c4f8cf0', id: `content-${this.value}`, class: "accordion-content", part: "content", role: "region", "aria-labelledby": `header-${this.value}`, "aria-hidden": !this.expanded ? 'true' : 'false' }, h("div", { key: 'eac3f014aeccccd20ddd4f2c3b7ee98636a85a4d', class: "accordion-content-inner" }, h("slot", { key: '29ac3e0932ee7854678637121e395b2be48949a0' })))));
+    }
+    static get is() { return "bh-accordion-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-accordion-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-accordion-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique identifier for this accordion item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The header/title text for the accordion item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this accordion item is currently expanded"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this accordion item is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isAnimating": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhAccordionToggle",
+                "name": "bhAccordionToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the accordion item is toggled"
+                },
+                "complexType": {
+                    "original": "{ value: string; expanded: boolean }",
+                    "resolved": "{ value: string; expanded: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "bhAccordionClick",
+                "name": "bhAccordionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the accordion header is clicked"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "expanded",
+                "methodName": "handleExpandedChange"
+            }];
+    }
+}
+//# sourceMappingURL=bh-accordion-item.js.map

package/collection/components/bh-accordion-item/bh-accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-accordion-item.js","sourceRoot":"","sources":["../../../src/components/bh-accordion-item/bh-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Watch,\n} from '@stencil/core';\n\n/**\n * @slot - Content displayed when the accordion item is expanded\n */\n@Component({\n  tag: 'bh-accordion-item',\n  styleUrl: 'bh-accordion-item.css',\n  shadow: true,\n})\nexport class BhAccordionItem {\n  /**\n   * Unique identifier for this accordion item\n   */\n  @Prop() value!: string;\n\n  /**\n   * The header/title text for the accordion item\n   */\n  @Prop() header!: string;\n\n  /**\n   * Whether this accordion item is currently expanded\n   */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /**\n   * Whether this accordion item is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Internal state for animation\n   */\n  @State() isAnimating: boolean = false;\n\n  /**\n   * Emitted when the accordion item is toggled\n   */\n  @Event({ bubbles: true, composed: true })\n  bhAccordionToggle!: EventEmitter<{ value: string; expanded: boolean }>;\n\n  /**\n   * Emitted when the accordion header is clicked\n   */\n  @Event({ bubbles: true, composed: true })\n  bhAccordionClick!: EventEmitter<string>;\n\n  @Watch('expanded')\n  handleExpandedChange(): void {\n    this.isAnimating = true;\n    setTimeout(() => {\n      this.isAnimating = false;\n    }, 200);\n  }\n\n  private handleHeaderClick = (): void => {\n    if (this.disabled) return;\n\n    this.expanded = !this.expanded;\n    this.bhAccordionClick.emit(this.value);\n    this.bhAccordionToggle.emit({\n      value: this.value,\n      expanded: this.expanded,\n    });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (this.disabled) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handleHeaderClick();\n    }\n  };\n\n  render() {\n    const hostClasses = {\n      'accordion-item': true,\n      'accordion-item-expanded': this.expanded,\n      'accordion-item-disabled': this.disabled,\n      'accordion-item-animating': this.isAnimating,\n    };\n\n    const iconName = this.expanded ? 'expand_less' : 'expand_more';\n\n    return (\n      <Host class={hostClasses}>\n        <div\n          class=\"accordion-header\"\n          part=\"header\"\n          role=\"button\"\n          tabindex={this.disabled ? -1 : 0}\n          aria-expanded={this.expanded ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-controls={`content-${this.value}`}\n          onClick={this.handleHeaderClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"accordion-header-content\">\n            <span class=\"accordion-title\" part=\"title\">\n              {this.header}\n            </span>\n          </div>\n          <span class=\"accordion-icon material-symbols-outlined\" part=\"icon\">\n            {iconName}\n          </span>\n        </div>\n        <div\n          id={`content-${this.value}`}\n          class=\"accordion-content\"\n          part=\"content\"\n          role=\"region\"\n          aria-labelledby={`header-${this.value}`}\n          aria-hidden={!this.expanded ? 'true' : 'false'}\n        >\n          <div class=\"accordion-content-inner\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,80 @@
+.appbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 56px;
+  padding: 0 var(--spacing-sm);
+  background-color: var(--color-white);
+  border-bottom: 1px solid var(--color-neutral-200);
+  font-family: var(--font-inter);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  box-sizing: border-box;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+/* Left Section */
+.left-section {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xl);
+  flex-shrink: 0;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing-4xl);
+  height: var(--spacing-4xl);
+  color: var(--color-brand-500);
+}
+
+.logo-image {
+  width: 36px;
+  height: 36px;
+  object-fit: contain;
+}
+
+/* Right Section */
+.right-section {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  flex-shrink: 0;
+}
+
+.icon-button-wrapper {
+  position: relative;
+}
+
+.icon-badge-dot {
+  position: absolute;
+  top: -8px;
+  right: 2px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .appbar {
+    padding: 0 16px;
+  }
+
+  .left-section {
+    gap: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .appbar {
+    padding: 0 12px;
+  }
+
+  .right-section {
+    gap: 4px;
+  }
+}

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

@@ -0,0 +1,270 @@
+import { h, Host } from "@stencil/core";
+export class BhAppbar {
+    /**
+     * Whether the menu is open
+     */
+    isMenuOpen = false;
+    /**
+     * Logo source URL
+     */
+    logoSrc;
+    /**
+     * Logo alt text
+     */
+    logoAlt = 'Solstice';
+    /**
+     * Breadcrumb items
+     */
+    breadcrumbItems = [
+        { label: 'Dashboard', path: '/dashboard' },
+        { label: 'Dashboards', isActive: true },
+    ];
+    /**
+     * Notification count
+     */
+    notificationCount = 0;
+    /**
+     * Event emitted when menu toggle is clicked
+     */
+    bhMenuToggle;
+    /**
+     * Event emitted when a breadcrumb is clicked
+     */
+    bhBreadcrumbClick;
+    /**
+     * Event emitted when notification icon is clicked
+     */
+    bhNotificationClick;
+    /**
+     * Event emitted when calendar icon is clicked
+     */
+    bhCalendarClick;
+    /**
+     * Event emitted when settings icon is clicked
+     */
+    bhSettingsClick;
+    handleMenuToggle = () => {
+        this.bhMenuToggle.emit();
+    };
+    handleBreadcrumbClick = (item) => {
+        if (item.path && !item.isActive) {
+            this.bhBreadcrumbClick.emit(item);
+        }
+    };
+    handleNotificationClick = () => {
+        this.bhNotificationClick.emit();
+    };
+    handleCalendarClick = () => {
+        this.bhCalendarClick.emit();
+    };
+    handleSettingsClick = () => {
+        this.bhSettingsClick.emit();
+    };
+    render() {
+        return (h(Host, { key: 'ae8a4a515b6384418dc4a73297d049d052b311f2' }, h("header", { key: '999bad1f106bf9a4fe8107894a55b3b1f683dd84', class: "appbar" }, h("div", { key: 'a5ff9a5e8d90adbf67ad2782eaf5e6ca43702bd4', class: "left-section" }, h("bh-button-icon", { key: '7c25230ad01e084e3ffa43bb3ce037fe9d90724b', hierarchy: "quaternary", size: "sm", iconName: this.isMenuOpen ? 'menu_open' : 'last_page', onClick: this.handleMenuToggle }), this.logoSrc && (h("div", { key: 'dd1630e2a2ff83874a9989fec6c5966d74f6a374', class: "logo" }, h("img", { key: '0971c0630bf69f35db53b36af4c5fc5c38518f56', src: this.logoSrc, alt: this.logoAlt, class: "logo-image" }))), h("slot", { key: '6b42819c05444a2a32522983a18a4526d6ad5753', name: "property-switcher" }), h("bh-breadcrumbs", { key: 'b63deedb1242f22179056f539baff4c118c43ca7', items: this.breadcrumbItems, showHome: true, onBhItemClick: (e) => this.handleBreadcrumbClick(e.detail) })), h("div", { key: '792c8be8095c8a41fbbd57e939bc7a3c8e00dee5', class: "right-section" }, h("div", { key: '3e30fbfaf6989ddea20e90e6e225462bbd5f341d', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '4c91cff44cafe0595adb1dd482e3e6deb62176d0', hierarchy: "quaternary", size: "sm", iconName: "calendar_today", onClick: this.handleCalendarClick }), h("bh-badge-dot", { key: 'a6a0d51fdc1306b3a0006a0dd59a4f8c44445c7d', size: "sm", color: "success", outline: true, class: "icon-badge-dot" })), h("div", { key: 'f6ea9f12906da34315ad1d075fad964473b1bf0b', class: "icon-button-wrapper" }, h("bh-button-icon", { key: 'f35e426048468766bf5c1f314b713b710b095a53', hierarchy: "quaternary", size: "sm", iconName: "settings", onClick: this.handleSettingsClick }), h("bh-badge-dot", { key: 'f94d20164a8a8b21ac09456e824d83b2667efb66', size: "sm", color: "blue", outline: true, class: "icon-badge-dot" })), h("div", { key: 'b92beef52a5fb8d9a20ddf0d65e1de350af7cf14', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '55f3c7485ac9c8aa5ba83fb699c1716cca91e7ae', hierarchy: "quaternary", size: "sm", iconName: "notifications", onClick: this.handleNotificationClick }), this.notificationCount > 0 && (h("bh-badge-dot", { key: 'a7fd28338df24721fd1bf2b6b045631cf86093f0', size: "sm", color: "error", outline: true, class: "icon-badge-dot" })))))));
+    }
+    static get is() { return "bh-appbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-appbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-appbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isMenuOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the menu is open"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-menu-open",
+                "defaultValue": "false"
+            },
+            "logoSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Logo source URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-src"
+            },
+            "logoAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Logo alt text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-alt",
+                "defaultValue": "'Solstice'"
+            },
+            "breadcrumbItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BreadcrumbItem[]",
+                    "resolved": "BreadcrumbItem[]",
+                    "references": {
+                        "BreadcrumbItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-appbar/bh-appbar.tsx",
+                            "id": "src/components/bh-appbar/bh-appbar.tsx::BreadcrumbItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Breadcrumb items"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\n    { label: 'Dashboard', path: '/dashboard' },\n    { label: 'Dashboards', isActive: true },\n  ]"
+            },
+            "notificationCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Notification count"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "notification-count",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhMenuToggle",
+                "name": "bhMenuToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when menu toggle is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhBreadcrumbClick",
+                "name": "bhBreadcrumbClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a breadcrumb is clicked"
+                },
+                "complexType": {
+                    "original": "BreadcrumbItem",
+                    "resolved": "BreadcrumbItem",
+                    "references": {
+                        "BreadcrumbItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-appbar/bh-appbar.tsx",
+                            "id": "src/components/bh-appbar/bh-appbar.tsx::BreadcrumbItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "bhNotificationClick",
+                "name": "bhNotificationClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when notification icon is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhCalendarClick",
+                "name": "bhCalendarClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when calendar icon is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhSettingsClick",
+                "name": "bhSettingsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when settings icon is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bh-appbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-appbar.js","sourceRoot":"","sources":["../../../src/components/bh-appbar/bh-appbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport interface BreadcrumbItem {\n  label: string;\n  path?: string;\n  isActive?: boolean;\n}\n\n@Component({\n  tag: 'bh-appbar',\n  styleUrl: 'bh-appbar.css',\n  shadow: true,\n})\nexport class BhAppbar {\n  /**\n   * Whether the menu is open\n   */\n  @Prop() isMenuOpen: boolean = false;\n\n  /**\n   * Logo source URL\n   */\n  @Prop() logoSrc?: string;\n\n  /**\n   * Logo alt text\n   */\n  @Prop() logoAlt: string = 'Solstice';\n\n  /**\n   * Breadcrumb items\n   */\n  @Prop() breadcrumbItems: BreadcrumbItem[] = [\n    { label: 'Dashboard', path: '/dashboard' },\n    { label: 'Dashboards', isActive: true },\n  ];\n\n  /**\n   * Notification count\n   */\n  @Prop() notificationCount: number = 0;\n\n  /**\n   * Event emitted when menu toggle is clicked\n   */\n  @Event() bhMenuToggle!: EventEmitter<void>;\n\n  /**\n   * Event emitted when a breadcrumb is clicked\n   */\n  @Event() bhBreadcrumbClick!: EventEmitter<BreadcrumbItem>;\n\n  /**\n   * Event emitted when notification icon is clicked\n   */\n  @Event() bhNotificationClick!: EventEmitter<void>;\n\n  /**\n   * Event emitted when calendar icon is clicked\n   */\n  @Event() bhCalendarClick!: EventEmitter<void>;\n\n  /**\n   * Event emitted when settings icon is clicked\n   */\n  @Event() bhSettingsClick!: EventEmitter<void>;\n\n  private handleMenuToggle = () => {\n    this.bhMenuToggle.emit();\n  };\n\n  private handleBreadcrumbClick = (item: BreadcrumbItem) => {\n    if (item.path && !item.isActive) {\n      this.bhBreadcrumbClick.emit(item);\n    }\n  };\n\n  private handleNotificationClick = () => {\n    this.bhNotificationClick.emit();\n  };\n\n  private handleCalendarClick = () => {\n    this.bhCalendarClick.emit();\n  };\n\n  private handleSettingsClick = () => {\n    this.bhSettingsClick.emit();\n  };\n\n  render() {\n    return (\n      <Host>\n        <header class=\"appbar\">\n          {/* Left Section */}\n          <div class=\"left-section\">\n            {/* Menu Toggle */}\n            <bh-button-icon\n              hierarchy=\"quaternary\"\n              size=\"sm\"\n              iconName={this.isMenuOpen ? 'menu_open' : 'last_page'}\n              onClick={this.handleMenuToggle}\n            ></bh-button-icon>\n\n            {/* Logo */}\n            {this.logoSrc && (\n              <div class=\"logo\">\n                <img src={this.logoSrc} alt={this.logoAlt} class=\"logo-image\" />\n              </div>\n            )}\n\n            {/* Property Switcher Slot */}\n            <slot name=\"property-switcher\"></slot>\n\n            {/* Breadcrumbs */}\n            <bh-breadcrumbs\n              items={this.breadcrumbItems}\n              showHome={true}\n              onBhItemClick={(e) => this.handleBreadcrumbClick(e.detail)}\n            ></bh-breadcrumbs>\n          </div>\n\n          {/* Right Section */}\n          <div class=\"right-section\">\n            {/* Calendar Icon */}\n            <div class=\"icon-button-wrapper\">\n              <bh-button-icon\n                hierarchy=\"quaternary\"\n                size=\"sm\"\n                iconName=\"calendar_today\"\n                onClick={this.handleCalendarClick}\n              ></bh-button-icon>\n              <bh-badge-dot\n                size=\"sm\"\n                color=\"success\"\n                outline={true}\n                class=\"icon-badge-dot\"\n              ></bh-badge-dot>\n            </div>\n\n            {/* Settings Icon */}\n            <div class=\"icon-button-wrapper\">\n              <bh-button-icon\n                hierarchy=\"quaternary\"\n                size=\"sm\"\n                iconName=\"settings\"\n                onClick={this.handleSettingsClick}\n              ></bh-button-icon>\n              <bh-badge-dot\n                size=\"sm\"\n                color=\"blue\"\n                outline={true}\n                class=\"icon-badge-dot\"\n              ></bh-badge-dot>\n            </div>\n\n            {/* Notifications */}\n            <div class=\"icon-button-wrapper\">\n              <bh-button-icon\n                hierarchy=\"quaternary\"\n                size=\"sm\"\n                iconName=\"notifications\"\n                onClick={this.handleNotificationClick}\n              ></bh-button-icon>\n              {this.notificationCount > 0 && (\n                <bh-badge-dot\n                  size=\"sm\"\n                  color=\"error\"\n                  outline={true}\n                  class=\"icon-badge-dot\"\n                ></bh-badge-dot>\n              )}\n            </div>\n          </div>\n        </header>\n      </Host>\n    );\n  }\n}\n"]}