@actabldesign/bellhop-core 0.0.3

package/cjs/bh-page-navigation-multi-level_2.cjs.entry.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhPageNavigationMultiLevelCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block}.page-navigation-multi-level{margin:var(--spacing-none) var(--spacing-xs)}.page-navigation-multi-level-parent{display:flex;align-items:center;padding:var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:40px;max-height:44px;box-sizing:border-box;border-radius:var(--radius-sm);background-color:transparent;border:1px solid transparent}.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent{background-color:transparent;border:1px solid transparent}.page-navigation-multi-level-parent:hover{background-color:var(--color-neutral-50) !important}.page-navigation-children{margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs);position:relative;margin-left:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xs);max-height:1000px;opacity:1;transition:max-height 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    opacity 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    margin 0.4s cubic-bezier(0.08, 0.52, 0.52, 1)}.page-navigation-children.collapsed{max-height:0;opacity:0;margin-top:0;margin-bottom:0}.page-navigation-children::before{content:'';position:absolute;left:0;top:-2px;height:calc(100% + 4px);width:2px;background-color:var(--color-neutral-200);margin-left:var(--spacing-sm);z-index:2}.page-navigation-children.animate-slide-down-enter{animation:slideDownEnter 0.15s ease-out forwards}.page-navigation-children.animate-slide-down-exit{animation:slideDownExit 0.15s ease-out forwards}@keyframes slideDownEnter{from{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:1000px;transform:translateY(0)}}@keyframes slideDownExit{from{opacity:1;max-height:1000px;transform:translateY(0)}to{opacity:0;max-height:0;transform:translateY(-10px)}}.page-navigation-item-content{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.page-navigation-item-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease}.page-navigation-animate-smooth{transform-origin:top center;transition:all var(--animation-duration-normal, 0.2s) var(--animation-ease-enter, ease)}.page-navigation-chevron-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease, transform var(--animation-duration-fast, 0.1s) var(--animation-ease-smooth, ease)}.page-navigation-chevron-icon.expanded{transform:rotate(180deg)}.page-navigation-multi-level.has-active-child .page-navigation-item-icon{color:var(--color-neutral-900)}.page-navigation-item-label{font-family:var(--font-inter);font-size:14px;font-weight:500;line-height:20px;color:var(--color-neutral-600);flex:1;transition:all 0.15s ease}.page-navigation-multi-level.has-active-child .page-navigation-item-label{color:var(--color-neutral-900);font-weight:600}";
+
+const BhPageNavigationMultiLevel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhToggle = index.createEvent(this, "bhToggle");
+        this.bhChildClick = index.createEvent(this, "bhChildClick");
+        this.bhAddClick = index.createEvent(this, "bhAddClick");
+    }
+    /**
+     * Label text for the navigation item
+     */
+    label;
+    /**
+     * Material icon name
+     */
+    icon = 'radio_button_unchecked';
+    /**
+     * Optional badge text/number to display
+     */
+    badge;
+    /**
+     * Child navigation items
+     */
+    childItems = [];
+    /**
+     * Whether the item is expanded to show children
+     */
+    isExpanded = false;
+    /**
+     * Internal state for hover
+     */
+    isHovered = false;
+    /**
+     * Internal state for animation
+     */
+    isAnimating = false;
+    /**
+     * Animation class
+     */
+    animationClass = '';
+    /**
+     * Event emitted when the parent item is clicked (to toggle expansion)
+     */
+    bhToggle;
+    /**
+     * Event emitted when a child item is clicked
+     */
+    bhChildClick;
+    /**
+     * Event emitted when add button is clicked
+     */
+    bhAddClick;
+    handleExpandedChange(newValue) {
+        if (newValue) {
+            this.isAnimating = true;
+            this.animationClass = 'animate-slide-down-enter';
+        }
+        else if (this.isAnimating) {
+            this.animationClass = 'animate-slide-down-exit';
+            setTimeout(() => {
+                this.isAnimating = false;
+                this.animationClass = '';
+            }, 150);
+        }
+    }
+    get hasActiveChild() {
+        return this.childItems.some(child => child.isActive);
+    }
+    handleParentClick = () => {
+        this.bhToggle.emit();
+    };
+    handleChildClick = (index) => {
+        this.bhChildClick.emit(index);
+    };
+    handleAddClick = (e) => {
+        e.stopPropagation();
+        this.bhAddClick.emit();
+    };
+    getItemClasses() {
+        return {
+            'page-navigation-multi-level': true,
+            'page-navigation-animate-smooth': true,
+            'has-active-child': this.hasActiveChild,
+            'expanded': this.isExpanded,
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: '15c1b2bbe0ddf13eb25d424ce7c60b281547175e' }, index.h("div", { key: '6a2ab39d69b4dc007c52cc0af63f39b4f8bf4ee8', class: this.getItemClasses() }, index.h("div", { key: '3796f0b3fad7ef3f0fd29bc8b8e90738b5165bbf', class: "page-navigation-multi-level-parent", onClick: this.handleParentClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, index.h("div", { key: '5ae04be6a630fcf8f1f25245ee8e8f5bfde6e27e', class: "page-navigation-item-content" }, !this.isHovered && (index.h("span", { key: 'e3893980a51628c19f2667d4cbd76958d1b67cff', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon)), this.isHovered && (index.h("span", { key: '4429219610bf3dbeb1de38ef6f4b3734b3f521da', class: {
+                'page-navigation-chevron-icon': true,
+                'material-symbols-outlined': true,
+                'expanded': this.isExpanded,
+            } }, "expand_more")), index.h("span", { key: '4a81f12b1b2e0ec1e0784858f99845ad4dc3aa62', class: "page-navigation-item-label" }, this.label), index.h("bh-button", { key: 'bcadba2dff591857aafaaa434d06e97b0727b635', hierarchy: "tertiary", icon: "only", size: "xs", iconName: "add", onClick: this.handleAddClick }))), (this.isExpanded || this.isAnimating) && (index.h("div", { key: 'd99ed38a4fe97757f660c281b6e34c36f6837d87', class: `page-navigation-children ${this.animationClass}` }, this.childItems.map((child, index$1) => (index.h("bh-page-navigation-child", { key: index$1, label: child.label, badge: child.badge, showBadge: child.showBadge, isActive: child.isActive, onBhItemClick: () => this.handleChildClick(index$1) }))))))));
+    }
+    static get watchers() { return {
+        "isExpanded": ["handleExpandedChange"]
+    }; }
+};
+BhPageNavigationMultiLevel.style = bhPageNavigationMultiLevelCss;
+
+const bhPageNavigationSingleLevelCss = ".page-navigation{width:320px;min-width:280px;background-color:var(--color-white);padding:var(--spacing-xl) var(--spacing-md);font-family:var(--font-inter);height:100vh;overflow-y:auto;border-right:1px solid var(--color-neutral-200);box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.page-navigation-header{margin-bottom:var(--spacing-3xl)}.page-navigation-title{font-size:var(--text-xl-size);font-weight:var(--weight-semibold);line-height:var(--text-xl-line);color:var(--color-neutral-900);padding:var(--spacing-none) var(--spacing-xl);margin:0}.page-navigation-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.page-navigation-single-level{display:flex;align-items:center;padding:var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:40px;max-height:44px;box-sizing:border-box;border-radius:6px;margin:var(--spacing-none) var(--spacing-xs);background-color:transparent;border:1px solid transparent}.page-navigation-single-level.active{background-color:transparent;border:1px solid transparent}.page-navigation-single-level:hover{background-color:var(--color-neutral-50) !important}.page-navigation-multi-level{margin:var(--spacing-none) var(--spacing-xs)}.page-navigation-multi-level-parent{display:flex;align-items:center;padding:var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:40px;max-height:44px;box-sizing:border-box;border-radius:var(--radius-sm);background-color:transparent;border:1px solid transparent}.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent{background-color:transparent;border:1px solid transparent}.page-navigation-multi-level-parent:hover{background-color:var(--color-neutral-50) !important}.page-navigation-children{margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs);position:relative;margin-left:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xs);max-height:1000px;opacity:1;transition:max-height 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    opacity 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    margin 0.4s cubic-bezier(0.08, 0.52, 0.52, 1)}.page-navigation-children.collapsed{max-height:0;opacity:0;margin-top:0;margin-bottom:0}.page-navigation-children::before{content:'';position:absolute;left:0;top:-2px;height:calc(100% + 4px);width:2px;background-color:var(--color-neutral-200);margin-left:var(--spacing-sm);z-index:2}.page-navigation-child{display:flex;align-items:center;padding:var(--spacing-md) var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:36px;box-sizing:border-box;border-radius:var(--radius-sm);margin:var(--spacing-none) var(--spacing-xs);background-color:transparent;border:1px solid transparent;margin-left:9px}.page-navigation-child:hover:not(.active){background-color:var(--color-neutral-50);position:relative;z-index:1}.page-navigation-child:hover:not(.active)::after{content:'';position:absolute;left:-20px;top:0;bottom:0;width:20px;background-color:var(--color-neutral-100);z-index:1;border-radius:var(--radius-sm)}.page-navigation-child.active{background-color:transparent}.page-navigation-child.active::before{content:'';position:absolute;left:-4.5px;top:50%;transform:translateY(-50%);width:2px;height:24px;background-color:var(--color-brand-600);z-index:3}.page-navigation-item-content,.page-navigation-child-content{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.page-navigation-item-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease}.page-navigation-animate-smooth{transform-origin:top center;transition:all var(--animation-duration-normal) var(--animation-ease-enter)}.page-navigation-chevron-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease, transform var(--animation-duration-fast) var(--animation-ease-smooth)}.page-navigation-chevron-icon.expanded{transform:rotate(180deg)}.page-navigation-single-level.active .page-navigation-item-icon,.page-navigation-multi-level.has-active-child .page-navigation-item-icon{color:var(--color-neutral-900)}.page-navigation-item-label,.page-navigation-child-label{font-family:'Inter', sans-serif;font-size:14px;font-weight:500;line-height:20px;color:var(--color-neutral-600);flex:1;transition:all 0.15s ease}.page-navigation-single-level.active .page-navigation-item-label,.page-navigation-multi-level.has-active-child .page-navigation-item-label{color:var(--color-neutral-900);font-weight:600}.page-navigation-child.active .page-navigation-child-label{color:var(--color-brand-600);font-weight:600}.page-navigation-item-badge,.page-navigation-child-badge{margin-left:auto}@media (max-width: 768px){.page-navigation{width:280px;min-width:280px}}";
+
+const BhPageNavigationSingleLevel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhItemClick = index.createEvent(this, "bhItemClick");
+    }
+    /**
+     * Label text for the navigation item
+     */
+    label;
+    /**
+     * Material icon name
+     */
+    icon = 'radio_button_unchecked';
+    /**
+     * Whether the item is currently active/selected
+     */
+    isActive = false;
+    /**
+     * Event emitted when the navigation item is clicked
+     */
+    bhItemClick;
+    handleClick = () => {
+        this.bhItemClick.emit();
+    };
+    getItemClasses() {
+        return {
+            'page-navigation-single-level': true,
+            'page-navigation-animate-smooth': true,
+            'active': this.isActive,
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: '5387b77b73fdc815daea9186650806bde7df23aa' }, index.h("div", { key: '8ce567faedcab4229e8255b4641d226e48b689ba', class: this.getItemClasses(), onClick: () => this.handleClick() }, index.h("div", { key: 'e7cc690ae45617f1c0a52553b8e10dee57862d8a', class: "page-navigation-item-content" }, index.h("span", { key: '3ae6648a0b4e96851548299c0a40cd71d020e476', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon), index.h("span", { key: '005a1932186fb40b2fc31f8d5f77a97c73da989e', class: "page-navigation-item-label" }, this.label)))));
+    }
+};
+BhPageNavigationSingleLevel.style = bhPageNavigationSingleLevelCss;
+
+exports.bh_page_navigation_multi_level = BhPageNavigationMultiLevel;
+exports.bh_page_navigation_single_level = BhPageNavigationSingleLevel;
+//# sourceMappingURL=bh-page-navigation-multi-level.bh-page-navigation-single-level.entry.cjs.js.map

package/cjs/bh-page-navigation.cjs.entry.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhPageNavigationCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block}.page-navigation{width:320px;min-width:280px;background-color:var(--color-white);padding:var(--spacing-xl) var(--spacing-md);font-family:var(--font-inter);height:100vh;overflow-y:auto;border-right:1px solid var(--color-neutral-200);box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.page-navigation-header{margin-bottom:var(--spacing-3xl)}.page-navigation-title{font-size:var(--text-xl-size);font-weight:var(--weight-semibold);line-height:var(--text-xl-line);color:var(--color-neutral-900);padding:var(--spacing-none) var(--spacing-xl);margin:0}.page-navigation-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}@media (max-width: 768px){.page-navigation{width:280px;min-width:280px}}";
+
+const BhPageNavigation = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhItemClick = index.createEvent(this, "bhItemClick");
+    }
+    /**
+     * Title displayed at the top of the navigation
+     */
+    navTitle = 'Navigation';
+    /**
+     * Array of navigation items
+     */
+    navigationItems = [];
+    /**
+     * Internal state to track navigation items
+     */
+    items = [];
+    /**
+     * Event emitted when a navigation item is clicked
+     */
+    bhItemClick;
+    handleNavigationItemsChange(newValue) {
+        this.items = [...newValue];
+    }
+    componentWillLoad() {
+        this.items = [...this.navigationItems];
+    }
+    clearAllSelections() {
+        this.items = this.items.map(item => ({
+            ...item,
+            isActive: false,
+            children: item.children?.map(child => ({ ...child, isActive: false })),
+        }));
+    }
+    handleSingleLevelClick = (itemId) => {
+        this.clearAllSelections();
+        this.items = this.items.map(item => item.id === itemId ? { ...item, isActive: true } : item);
+        this.bhItemClick.emit({ itemId });
+    };
+    handleMultiLevelToggle = (itemId) => {
+        this.items = this.items.map(item => item.id === itemId ? { ...item, isExpanded: !item.isExpanded } : item);
+    };
+    handleMultiLevelChildClick = (itemId, childIndex) => {
+        this.clearAllSelections();
+        this.items = this.items.map(item => item.id === itemId && item.children
+            ? {
+                ...item,
+                children: item.children.map((child, index) => ({
+                    ...child,
+                    isActive: index === childIndex,
+                })),
+            }
+            : item);
+        this.bhItemClick.emit({ itemId, childIndex });
+    };
+    render() {
+        return (index.h(index.Host, { key: 'd55ac36c9c2b0363613add845ea76ace4fac3f2d' }, index.h("div", { key: 'cbd7fdd5a4e1319a20b741698541d88e6b5a2c10', class: "page-navigation" }, index.h("div", { key: '01e66276c629dd06abf13c416a2c48f1e6ebdabb', class: "page-navigation-header" }, index.h("h2", { key: '726a13dd5d418763934523d4ad76838ed5961e09', class: "page-navigation-title" }, this.navTitle)), index.h("nav", { key: '6bc70d426691b4f979aa5eb4b190cf146142b918', class: "page-navigation-list" }, this.items.map(item => item.type === 'single' ? (index.h("bh-page-navigation-single-level", { key: item.id, label: item.label, icon: item.icon, isActive: item.isActive || false, onBhItemClick: () => this.handleSingleLevelClick(item.id) })) : (index.h("bh-page-navigation-multi-level", { key: item.id, label: item.label, icon: item.icon, childItems: item.children || [], isExpanded: item.isExpanded || false, onBhToggle: () => this.handleMultiLevelToggle(item.id), onBhChildClick: (e) => this.handleMultiLevelChildClick(item.id, e.detail) })))))));
+    }
+    static get watchers() { return {
+        "navigationItems": ["handleNavigationItemsChange"]
+    }; }
+};
+BhPageNavigation.style = bhPageNavigationCss;
+
+exports.bh_page_navigation = BhPageNavigation;
+//# sourceMappingURL=bh-page-navigation.entry.cjs.js.map

package/cjs/bh-page-navigation.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-page-navigation.entry.cjs.js","sources":["src/components/bh-page-navigation/bh-page-navigation.css?tag=bh-page-navigation&encapsulation=shadow","src/components/bh-page-navigation/bh-page-navigation.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: block;\n}\n\n/* Main Page Navigation Container */\n.page-navigation {\n  width: 320px;\n  min-width: 280px;\n  background-color: var(--color-white);\n  padding: var(--spacing-xl) var(--spacing-md);\n  font-family: var(--font-inter);\n  height: 100vh;\n  overflow-y: auto;\n  border-right: 1px solid var(--color-neutral-200);\n  box-sizing: border-box;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n}\n\n.page-navigation-header {\n  margin-bottom: var(--spacing-3xl);\n}\n\n.page-navigation-title {\n  font-size: var(--text-xl-size);\n  font-weight: var(--weight-semibold);\n  line-height: var(--text-xl-line);\n  color: var(--color-neutral-900);\n  padding: var(--spacing-none) var(--spacing-xl);\n  margin: 0;\n}\n\n.page-navigation-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-sm);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .page-navigation {\n    width: 280px;\n    min-width: 280px;\n  }\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host, Watch } from '@stencil/core';\n\nexport interface ChildItem {\n  label: string;\n  badge?: string | number;\n  showBadge?: boolean;\n  isActive?: boolean;\n}\n\nexport interface NavigationItem {\n  id: string;\n  label: string;\n  icon?: string;\n  type: 'single' | 'expandable';\n  isActive?: boolean;\n  isExpanded?: boolean;\n  badge?: string | number;\n  children?: ChildItem[];\n}\n\n@Component({\n  tag: 'bh-page-navigation',\n  styleUrl: 'bh-page-navigation.css',\n  shadow: true,\n})\nexport class BhPageNavigation {\n  /**\n   * Title displayed at the top of the navigation\n   */\n  @Prop() navTitle: string = 'Navigation';\n\n  /**\n   * Array of navigation items\n   */\n  @Prop() navigationItems: NavigationItem[] = [];\n\n  /**\n   * Internal state to track navigation items\n   */\n  @State() items: NavigationItem[] = [];\n\n  /**\n   * Event emitted when a navigation item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<{ itemId: string; childIndex?: number }>;\n\n  @Watch('navigationItems')\n  handleNavigationItemsChange(newValue: NavigationItem[]) {\n    this.items = [...newValue];\n  }\n\n  componentWillLoad() {\n    this.items = [...this.navigationItems];\n  }\n\n  private clearAllSelections() {\n    this.items = this.items.map(item => ({\n      ...item,\n      isActive: false,\n      children: item.children?.map(child => ({ ...child, isActive: false })),\n    }));\n  }\n\n  private handleSingleLevelClick = (itemId: string) => {\n    this.clearAllSelections();\n    this.items = this.items.map(item =>\n      item.id === itemId ? { ...item, isActive: true } : item,\n    );\n    this.bhItemClick.emit({ itemId });\n  };\n\n  private handleMultiLevelToggle = (itemId: string) => {\n    this.items = this.items.map(item =>\n      item.id === itemId ? { ...item, isExpanded: !item.isExpanded } : item,\n    );\n  };\n\n  private handleMultiLevelChildClick = (itemId: string, childIndex: number) => {\n    this.clearAllSelections();\n    this.items = this.items.map(item =>\n      item.id === itemId && item.children\n        ? {\n            ...item,\n            children: item.children.map((child, index) => ({\n              ...child,\n              isActive: index === childIndex,\n            })),\n          }\n        : item,\n    );\n    this.bhItemClick.emit({ itemId, childIndex });\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"page-navigation\">\n          <div class=\"page-navigation-header\">\n            <h2 class=\"page-navigation-title\">{this.navTitle}</h2>\n          </div>\n\n          <nav class=\"page-navigation-list\">\n            {this.items.map(item =>\n              item.type === 'single' ? (\n                <bh-page-navigation-single-level\n                  key={item.id}\n                  label={item.label}\n                  icon={item.icon}\n                  isActive={item.isActive || false}\n                  onBhItemClick={() => this.handleSingleLevelClick(item.id)}\n                ></bh-page-navigation-single-level>\n              ) : (\n                <bh-page-navigation-multi-level\n                  key={item.id}\n                  label={item.label}\n                  icon={item.icon}\n                  childItems={item.children || []}\n                  isExpanded={item.isExpanded || false}\n                  onBhToggle={() => this.handleMultiLevelToggle(item.id)}\n                  onBhChildClick={(e: CustomEvent<number>) =>\n                    this.handleMultiLevelChildClick(item.id, e.detail)\n                  }\n                ></bh-page-navigation-multi-level>\n              ),\n            )}\n          </nav>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/cjs/bh-pie-chart.cjs.entry.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhPieChartCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:inline-block}.pie-chart-container{display:inline-block;width:160px;height:160px;overflow:visible}.pie-chart-svg{width:100%;height:100%;overflow:visible}.pie-segment{cursor:pointer;transition:opacity var(--animation-duration-fast, 0.1s) var(--animation-ease-smooth, ease);transform-origin:80px 80px}.pie-segment.animated{opacity:0;transform:scale(0.3) rotate(-180deg);animation:pieSliceReveal 0.8s var(--animation-ease-enter, ease-out) forwards}.pie-segment:hover{opacity:0.85;transform:scale(1.05);filter:brightness(1.1);transition:all var(--animation-duration-fast, 0.1s) var(--animation-ease-smooth, ease)}.pie-background{pointer-events:none}.pie-inner-hole{pointer-events:none}.pie-segment-group{pointer-events:auto}@keyframes pieSliceReveal{0%{opacity:0;transform:scale(0.3) rotate(-180deg)}15%{opacity:0.2;transform:scale(0.45) rotate(-135deg)}30%{opacity:0.5;transform:scale(0.7) rotate(-70deg)}45%{opacity:0.7;transform:scale(0.9) rotate(-25deg)}60%{opacity:0.85;transform:scale(1.05) rotate(-8deg)}80%{opacity:0.95;transform:scale(1.01) rotate(-1deg)}100%{opacity:1;transform:scale(1) rotate(0deg)}}@media (prefers-reduced-motion: reduce){.pie-segment.animated{animation:none;opacity:1;transform:none}}";
+
+const DEFAULT_COLORS = [
+    '#2642CF', // Blue
+    '#8E4B9B', // Purple
+    '#BB81BA', // Light Purple
+    '#E14C94', // Pink
+    '#E47789', // Coral
+    '#E9AAAE', // Light Coral
+    '#BACEFC', // Light Blue
+];
+const BhPieChart = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * Chart data containing series
+     */
+    data = {
+        series: [
+            { name: 'Series 1', value: 30, color: '#2642CF' },
+            { name: 'Series 2', value: 25, color: '#8E4B9B' },
+            { name: 'Series 3', value: 20, color: '#BB81BA' },
+            { name: 'Series 4', value: 15, color: '#E14C94' },
+            { name: 'Series 5', value: 10, color: '#E47789' },
+        ],
+    };
+    /**
+     * Size of the donut hole
+     */
+    hole = 'none';
+    /**
+     * Size of the chart in pixels
+     */
+    size = 160;
+    /**
+     * Whether to animate the chart
+     */
+    animated = true;
+    /**
+     * Gap between segments in degrees
+     */
+    gap = 0;
+    tooltipVisible = false;
+    tooltipX = 0;
+    tooltipY = 0;
+    tooltipSegment = null;
+    getInnerRadius() {
+        switch (this.hole) {
+            case '25%':
+                return 20;
+            case '50%':
+                return 40;
+            case '75%':
+                return 60;
+            case '85%':
+                return 68;
+            default:
+                return 0;
+        }
+    }
+    createArcPath(centerX, centerY, outerRadius, innerRadius, startAngle, endAngle) {
+        const startAngleRad = (startAngle * Math.PI) / 180;
+        const endAngleRad = (endAngle * Math.PI) / 180;
+        const outerStartX = centerX + outerRadius * Math.cos(startAngleRad);
+        const outerStartY = centerY + outerRadius * Math.sin(startAngleRad);
+        const outerEndX = centerX + outerRadius * Math.cos(endAngleRad);
+        const outerEndY = centerY + outerRadius * Math.sin(endAngleRad);
+        const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;
+        if (innerRadius === 0) {
+            return [
+                'M', centerX, centerY,
+                'L', outerStartX, outerStartY,
+                'A', outerRadius, outerRadius, 0, largeArcFlag, 1, outerEndX, outerEndY,
+                'Z',
+            ].join(' ');
+        }
+        else {
+            const innerStartX = centerX + innerRadius * Math.cos(startAngleRad);
+            const innerStartY = centerY + innerRadius * Math.sin(startAngleRad);
+            const innerEndX = centerX + innerRadius * Math.cos(endAngleRad);
+            const innerEndY = centerY + innerRadius * Math.sin(endAngleRad);
+            return [
+                'M', outerStartX, outerStartY,
+                'A', outerRadius, outerRadius, 0, largeArcFlag, 1, outerEndX, outerEndY,
+                'L', innerEndX, innerEndY,
+                'A', innerRadius, innerRadius, 0, largeArcFlag, 0, innerStartX, innerStartY,
+                'Z',
+            ].join(' ');
+        }
+    }
+    getSegments() {
+        if (!this.data.series?.length) {
+            return [];
+        }
+        const total = this.data.series.reduce((sum, item) => sum + item.value, 0);
+        if (total === 0) {
+            return [];
+        }
+        const segments = [];
+        let currentAngle = -90;
+        const radius = 80;
+        const centerX = 80;
+        const centerY = 80;
+        const innerRadius = this.getInnerRadius();
+        const totalGaps = this.data.series.length * this.gap;
+        const availableAngle = 360 - totalGaps;
+        this.data.series.forEach((item, index) => {
+            const percentage = (item.value / total) * 100;
+            const angleSize = (item.value / total) * availableAngle;
+            const startAngle = currentAngle;
+            const endAngle = currentAngle + angleSize;
+            const path = this.createArcPath(centerX, centerY, radius, innerRadius, startAngle, endAngle);
+            segments.push({
+                value: item.value,
+                percentage,
+                startAngle,
+                endAngle,
+                color: item.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length],
+                name: item.name,
+                path,
+            });
+            currentAngle = endAngle + this.gap;
+        });
+        return segments;
+    }
+    handleSegmentHover = (event, segment) => {
+        this.tooltipVisible = true;
+        this.tooltipX = event.clientX;
+        this.tooltipY = event.clientY;
+        this.tooltipSegment = segment;
+    };
+    handleSegmentLeave = () => {
+        this.tooltipVisible = false;
+    };
+    render() {
+        const segments = this.getSegments();
+        const innerRadius = this.getInnerRadius();
+        return (index.h(index.Host, { key: '6e08d27c86b66d352cb0af60a7c53a50bbfdbb68' }, index.h("div", { key: '6ea7a66cc1294f69e2757f54ace875ebd08613ed', class: "pie-chart-container", style: { width: `${this.size}px`, height: `${this.size}px` } }, index.h("svg", { key: 'd777cd322d93bf0d419213b87729c2cb94346362', width: this.size, height: this.size, viewBox: "0 0 160 160", class: "pie-chart-svg" }, index.h("circle", { key: 'bb77a5913fb0d8a849d27bf1e854c1f1ae690c4d', cx: "80", cy: "80", r: "80", fill: "transparent", class: "pie-background" }), segments.map((segment, index$1) => (index.h("g", { key: index$1, class: "pie-segment-group" }, index.h("path", { d: segment.path, fill: segment.color, class: { 'pie-segment': true, animated: this.animated }, style: { animationDelay: this.animated ? `${index$1 * 0.03}s` : '0s' }, onMouseEnter: (e) => this.handleSegmentHover(e, segment), onMouseLeave: this.handleSegmentLeave })))), this.hole !== 'none' && (index.h("circle", { key: '00e9cc73e53b04d9cee1df1bcdb2c7b1a2dad5b9', cx: "80", cy: "80", r: innerRadius, fill: "white", class: "pie-inner-hole" })))), index.h("bh-chart-tooltip", { key: 'a6c2652bf3c556ea6aaa5f8fcd2963abdc8322f6', visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY, items: this.tooltipSegment
+                ? [
+                    {
+                        label: this.tooltipSegment.name,
+                        value: `${this.tooltipSegment.percentage.toFixed(0)}%`,
+                        color: this.tooltipSegment.color,
+                    },
+                ]
+                : [] })));
+    }
+};
+BhPieChart.style = bhPieChartCss;
+
+exports.bh_pie_chart = BhPieChart;
+//# sourceMappingURL=bh-pie-chart.entry.cjs.js.map

package/cjs/bh-pie-chart.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-pie-chart.entry.cjs.js","sources":["src/components/bh-pie-chart/bh-pie-chart.css?tag=bh-pie-chart&encapsulation=shadow","src/components/bh-pie-chart/bh-pie-chart.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: inline-block;\n}\n\n.pie-chart-container {\n  display: inline-block;\n  width: 160px;\n  height: 160px;\n  overflow: visible;\n}\n\n.pie-chart-svg {\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n\n.pie-segment {\n  cursor: pointer;\n  transition: opacity var(--animation-duration-fast, 0.1s) var(--animation-ease-smooth, ease);\n  transform-origin: 80px 80px;\n}\n\n.pie-segment.animated {\n  opacity: 0;\n  transform: scale(0.3) rotate(-180deg);\n  animation: pieSliceReveal 0.8s var(--animation-ease-enter, ease-out) forwards;\n}\n\n.pie-segment:hover {\n  opacity: 0.85;\n  transform: scale(1.05);\n  filter: brightness(1.1);\n  transition: all var(--animation-duration-fast, 0.1s) var(--animation-ease-smooth, ease);\n}\n\n.pie-background {\n  pointer-events: none;\n}\n\n.pie-inner-hole {\n  pointer-events: none;\n}\n\n.pie-segment-group {\n  pointer-events: auto;\n}\n\n@keyframes pieSliceReveal {\n  0% {\n    opacity: 0;\n    transform: scale(0.3) rotate(-180deg);\n  }\n  15% {\n    opacity: 0.2;\n    transform: scale(0.45) rotate(-135deg);\n  }\n  30% {\n    opacity: 0.5;\n    transform: scale(0.7) rotate(-70deg);\n  }\n  45% {\n    opacity: 0.7;\n    transform: scale(0.9) rotate(-25deg);\n  }\n  60% {\n    opacity: 0.85;\n    transform: scale(1.05) rotate(-8deg);\n  }\n  80% {\n    opacity: 0.95;\n    transform: scale(1.01) rotate(-1deg);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1) rotate(0deg);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pie-segment.animated {\n    animation: none;\n    opacity: 1;\n    transform: none;\n  }\n}\n","import { Component, Prop, State, h, Host } from '@stencil/core';\n\nexport interface PieChartSeriesItem {\n  name: string;\n  value: number;\n  color?: string;\n}\n\nexport interface PieChartData {\n  series: PieChartSeriesItem[];\n}\n\nexport interface PieSegment {\n  value: number;\n  percentage: number;\n  startAngle: number;\n  endAngle: number;\n  color: string;\n  name: string;\n  path: string;\n}\n\nexport type PieChartHole = 'none' | '25%' | '50%' | '75%' | '85%';\n\nconst DEFAULT_COLORS = [\n  '#2642CF', // Blue\n  '#8E4B9B', // Purple\n  '#BB81BA', // Light Purple\n  '#E14C94', // Pink\n  '#E47789', // Coral\n  '#E9AAAE', // Light Coral\n  '#BACEFC', // Light Blue\n];\n\n@Component({\n  tag: 'bh-pie-chart',\n  styleUrl: 'bh-pie-chart.css',\n  shadow: true,\n})\nexport class BhPieChart {\n  /**\n   * Chart data containing series\n   */\n  @Prop() data: PieChartData = {\n    series: [\n      { name: 'Series 1', value: 30, color: '#2642CF' },\n      { name: 'Series 2', value: 25, color: '#8E4B9B' },\n      { name: 'Series 3', value: 20, color: '#BB81BA' },\n      { name: 'Series 4', value: 15, color: '#E14C94' },\n      { name: 'Series 5', value: 10, color: '#E47789' },\n    ],\n  };\n\n  /**\n   * Size of the donut hole\n   */\n  @Prop() hole: PieChartHole = 'none';\n\n  /**\n   * Size of the chart in pixels\n   */\n  @Prop() size: number = 160;\n\n  /**\n   * Whether to animate the chart\n   */\n  @Prop() animated: boolean = true;\n\n  /**\n   * Gap between segments in degrees\n   */\n  @Prop() gap: number = 0;\n\n  @State() tooltipVisible: boolean = false;\n  @State() tooltipX: number = 0;\n  @State() tooltipY: number = 0;\n  @State() tooltipSegment: PieSegment | null = null;\n\n  private getInnerRadius(): number {\n    switch (this.hole) {\n      case '25%':\n        return 20;\n      case '50%':\n        return 40;\n      case '75%':\n        return 60;\n      case '85%':\n        return 68;\n      default:\n        return 0;\n    }\n  }\n\n  private createArcPath(\n    centerX: number,\n    centerY: number,\n    outerRadius: number,\n    innerRadius: number,\n    startAngle: number,\n    endAngle: number\n  ): string {\n    const startAngleRad = (startAngle * Math.PI) / 180;\n    const endAngleRad = (endAngle * Math.PI) / 180;\n\n    const outerStartX = centerX + outerRadius * Math.cos(startAngleRad);\n    const outerStartY = centerY + outerRadius * Math.sin(startAngleRad);\n    const outerEndX = centerX + outerRadius * Math.cos(endAngleRad);\n    const outerEndY = centerY + outerRadius * Math.sin(endAngleRad);\n\n    const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;\n\n    if (innerRadius === 0) {\n      return [\n        'M', centerX, centerY,\n        'L', outerStartX, outerStartY,\n        'A', outerRadius, outerRadius, 0, largeArcFlag, 1, outerEndX, outerEndY,\n        'Z',\n      ].join(' ');\n    } else {\n      const innerStartX = centerX + innerRadius * Math.cos(startAngleRad);\n      const innerStartY = centerY + innerRadius * Math.sin(startAngleRad);\n      const innerEndX = centerX + innerRadius * Math.cos(endAngleRad);\n      const innerEndY = centerY + innerRadius * Math.sin(endAngleRad);\n\n      return [\n        'M', outerStartX, outerStartY,\n        'A', outerRadius, outerRadius, 0, largeArcFlag, 1, outerEndX, outerEndY,\n        'L', innerEndX, innerEndY,\n        'A', innerRadius, innerRadius, 0, largeArcFlag, 0, innerStartX, innerStartY,\n        'Z',\n      ].join(' ');\n    }\n  }\n\n  private getSegments(): PieSegment[] {\n    if (!this.data.series?.length) {\n      return [];\n    }\n\n    const total = this.data.series.reduce((sum, item) => sum + item.value, 0);\n    if (total === 0) {\n      return [];\n    }\n\n    const segments: PieSegment[] = [];\n    let currentAngle = -90;\n    const radius = 80;\n    const centerX = 80;\n    const centerY = 80;\n    const innerRadius = this.getInnerRadius();\n\n    const totalGaps = this.data.series.length * this.gap;\n    const availableAngle = 360 - totalGaps;\n\n    this.data.series.forEach((item, index) => {\n      const percentage = (item.value / total) * 100;\n      const angleSize = (item.value / total) * availableAngle;\n      const startAngle = currentAngle;\n      const endAngle = currentAngle + angleSize;\n\n      const path = this.createArcPath(centerX, centerY, radius, innerRadius, startAngle, endAngle);\n\n      segments.push({\n        value: item.value,\n        percentage,\n        startAngle,\n        endAngle,\n        color: item.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length],\n        name: item.name,\n        path,\n      });\n\n      currentAngle = endAngle + this.gap;\n    });\n\n    return segments;\n  }\n\n  private handleSegmentHover = (event: MouseEvent, segment: PieSegment) => {\n    this.tooltipVisible = true;\n    this.tooltipX = event.clientX;\n    this.tooltipY = event.clientY;\n    this.tooltipSegment = segment;\n  };\n\n  private handleSegmentLeave = () => {\n    this.tooltipVisible = false;\n  };\n\n  render() {\n    const segments = this.getSegments();\n    const innerRadius = this.getInnerRadius();\n\n    return (\n      <Host>\n        <div class=\"pie-chart-container\" style={{ width: `${this.size}px`, height: `${this.size}px` }}>\n          <svg\n            width={this.size}\n            height={this.size}\n            viewBox=\"0 0 160 160\"\n            class=\"pie-chart-svg\"\n          >\n            {/* Background circle */}\n            <circle cx=\"80\" cy=\"80\" r=\"80\" fill=\"transparent\" class=\"pie-background\" />\n\n            {/* Pie segments */}\n            {segments.map((segment, index) => (\n              <g key={index} class=\"pie-segment-group\">\n                <path\n                  d={segment.path}\n                  fill={segment.color}\n                  class={{ 'pie-segment': true, animated: this.animated }}\n                  style={{ animationDelay: this.animated ? `${index * 0.03}s` : '0s' }}\n                  onMouseEnter={(e) => this.handleSegmentHover(e, segment)}\n                  onMouseLeave={this.handleSegmentLeave}\n                />\n              </g>\n            ))}\n\n            {/* Inner hole for donut charts */}\n            {this.hole !== 'none' && (\n              <circle cx=\"80\" cy=\"80\" r={innerRadius} fill=\"white\" class=\"pie-inner-hole\" />\n            )}\n          </svg>\n        </div>\n\n        {/* Tooltip */}\n        <bh-chart-tooltip\n          visible={this.tooltipVisible}\n          x={this.tooltipX}\n          y={this.tooltipY}\n          items={\n            this.tooltipSegment\n              ? [\n                  {\n                    label: this.tooltipSegment.name,\n                    value: `${this.tooltipSegment.percentage.toFixed(0)}%`,\n                    color: this.tooltipSegment.color,\n                  },\n                ]\n              : []\n          }\n        />\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","index"],"mappings":"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"}

package/cjs/bh-popover.cjs.entry.js

@@ -0,0 +1,100 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhPopoverCss = ".popover{position:relative;border-radius:var(--radius-md);width:320px}.popover-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;overflow:hidden;position:relative;width:100%;height:100%}.popover-menu{background-color:#ffffff;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;overflow:hidden;position:relative;border-radius:var(--radius-md);flex-shrink:0;width:100%;max-height:400px;border:1px solid #dcdfea;box-shadow:var(--shadow-popover)}.popover-header{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--spacing-lg) var(--spacing-xl);position:relative;flex-shrink:0;width:100%;border-bottom:1px solid #dcdfea}.avatar-group{display:flex;gap:var(--spacing-lg);align-items:center;justify-content:flex-start;position:relative;flex-shrink:0;width:100%}.avatar{background-color:#ffffff;position:relative;border-radius:var(--radius-full);flex-shrink:0;width:40px;height:40px;border:0.75px solid rgba(0, 0, 0, 0.08);overflow:hidden;display:flex;align-items:center;justify-content:center}.avatar-image{width:100%;height:100%;object-fit:cover}.brand-info{flex-basis:0;display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:flex-start;line-height:0;min-height:1px;min-width:1px;position:relative;flex-shrink:0}.brand-name{font-family:var(--font-inter);font-weight:600;position:relative;flex-shrink:0;color:#404968;font-size:14px;line-height:20px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.portfolio-link{font-family:var(--font-inter);font-weight:400;position:relative;flex-shrink:0;color:#2642cf;font-size:14px;line-height:20px;width:100%;text-decoration:underline;text-decoration-skip-ink:none;text-underline-position:from-font;background:none;border:none;cursor:pointer;text-align:left;padding:0}.portfolio-link:hover{color:#1a2bb8}.search-container{box-sizing:border-box;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;overflow:visible;padding:0;position:relative;flex-shrink:0;width:100%}.search-input{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-none) var(--spacing-none) var(--spacing-lg);align-items:flex-start;justify-content:flex-start;position:relative;flex-shrink:0;width:100%}.search-content{background-color:#ffffff;box-sizing:border-box;display:flex;gap:var(--spacing-md);height:var(--spacing-4xl);align-items:center;justify-content:flex-start;overflow:hidden;padding:var(--spacing-none);position:relative;border-radius:var(--radius-md);flex-shrink:0;width:100%;border:none}.search-icon{width:20px;height:20px;flex-shrink:0;color:#5d6b98}.search-field{flex-basis:0;font-family:var(--font-inter);font-weight:500;flex-grow:1;line-height:0;min-height:1px;min-width:1px;overflow:hidden;text-overflow:ellipsis;position:relative;flex-shrink:0;color:#404968;font-size:14px;line-height:20px;white-space:nowrap;border:none;outline:none;background:none}.search-field::placeholder{color:#5d6b98}.menu-items{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;overflow-y:auto;padding:var(--spacing-xs) var(--spacing-none);position:relative;flex-grow:1;width:100%;max-height:calc(400px - 180px)}.menu-header{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--spacing-lg) var(--spacing-xl);position:relative;flex-shrink:0;width:100%;border-top:1px solid #dcdfea;border-bottom:1px solid #dcdfea;font-family:var(--font-inter);font-weight:600;line-height:0;color:#404968;font-size:14px;line-height:20px}.menu-item-container{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;padding:var(--spacing-xxs) var(--spacing-sm);position:relative;flex-shrink:0;width:100%}.menu-item{flex-basis:0;box-sizing:border-box;display:flex;flex-grow:1;align-items:center;justify-content:flex-start;min-height:1px;min-width:1px;overflow:hidden;padding:var(--spacing-md) var(--spacing-lg);position:relative;border-radius:var(--radius-sm);flex-shrink:0;font-family:var(--font-inter);font-weight:500;line-height:0;color:#404968;font-size:14px;line-height:20px;background:none;border:none;cursor:pointer;text-align:left;width:100%;transition:all 0.2s ease}.menu-item:hover{background-color:#f9f9fb;color:#30374f}.menu-item.selected{background-color:#f9f9fb;color:#30374f}.menu-item-portfolio{font-weight:600;color:#2642cf}.menu-item-portfolio:hover{color:#1a2bb8}.menu-item-region{font-weight:500;padding-left:26px;color:#404968;font-size:13px}.menu-item-property{color:#5d6b98;font-size:13px}";
+
+const BhPopover = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhItemSelect = index.createEvent(this, "bhItemSelect");
+        this.bhPortfolioClick = index.createEvent(this, "bhPortfolioClick");
+        this.bhSearchChange = index.createEvent(this, "bhSearchChange");
+    }
+    /**
+     * Title displayed in the header
+     */
+    popoverTitle = 'Brand Name';
+    /**
+     * Text for the portfolio link
+     */
+    viewPortfolioText = 'view portfolio';
+    /**
+     * Placeholder text for search input
+     */
+    searchPlaceholder = 'Search by name or region';
+    /**
+     * Width of the popover
+     */
+    width = '240px';
+    /**
+     * Whether to show search input
+     */
+    showSearch = true;
+    /**
+     * Whether to show avatar section
+     */
+    showAvatar = true;
+    /**
+     * Avatar image source URL
+     */
+    avatarSrc;
+    /**
+     * Menu items array (JSON string or array)
+     */
+    items = [];
+    searchTerm = '';
+    /**
+     * Event emitted when a menu item is selected
+     */
+    bhItemSelect;
+    /**
+     * Event emitted when portfolio link is clicked
+     */
+    bhPortfolioClick;
+    /**
+     * Event emitted when search input changes
+     */
+    bhSearchChange;
+    get parsedItems() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.items || [];
+    }
+    handleItemClick = (item) => {
+        if (item.type !== 'header') {
+            this.bhItemSelect.emit(item);
+        }
+    };
+    handlePortfolioClick = () => {
+        this.bhPortfolioClick.emit();
+    };
+    handleSearchInput = (event) => {
+        const target = event.target;
+        this.searchTerm = target.value;
+        this.bhSearchChange.emit(this.searchTerm);
+    };
+    getItemClasses(item) {
+        return {
+            'menu-item': true,
+            'selected': !!item.selected,
+            'menu-item-portfolio': item.type === 'portfolio',
+            'menu-item-region': item.type === 'region',
+            'menu-item-property': item.type === 'property',
+        };
+    }
+    render() {
+        const items = this.parsedItems;
+        return (index.h(index.Host, { key: 'a7558db0c7b23e4ec142ec3ec5e37e5e43ecaf3c' }, index.h("div", { key: '096623edfec8b24ce671855023676ba9e724141c', class: "popover", style: { width: this.width } }, index.h("div", { key: '901ff94955110af56d627e145784771975b3b5f8', class: "popover-content" }, index.h("div", { key: '0948fe57cdbbed592c5f93e8b12536c501cd5e27', class: "popover-menu" }, this.showAvatar && (index.h("div", { key: '6d0cb4e23fc4ceda1dd68b5d89216c6e50c4c18a', class: "popover-header" }, index.h("div", { key: '9411bf1f7ada776fe571db95648bb0805e627ede', class: "avatar-group" }, index.h("div", { key: '5408e5fd2506587cc6fd4899f83094441101dfc3', class: "avatar" }, this.avatarSrc ? (index.h("img", { src: this.avatarSrc, alt: this.popoverTitle, class: "avatar-image" })) : (index.h("slot", { name: "avatar" }))), index.h("div", { key: '9b30791b5bb664c7fcdcf10799b133fa649da830', class: "brand-info" }, index.h("div", { key: 'cc2304d4e9189485ac3e7f7f7a7bf3b321f99f16', class: "brand-name" }, this.popoverTitle), this.viewPortfolioText && (index.h("button", { key: 'b3b002ebf605618453618cfdb773c35b3355011a', class: "portfolio-link", onClick: this.handlePortfolioClick, type: "button" }, this.viewPortfolioText)))))), this.showSearch && (index.h("div", { key: '04798ef99a65da73afbe794250a11dec659868ed', class: "search-container" }, index.h("div", { key: 'e90f1d2137036da8ba4ad8b02d747892958164c3', class: "search-input" }, index.h("div", { key: '0efa8b359b1b523c2afd3dc26aa86ce3c86c38f7', class: "search-content" }, index.h("span", { key: '90d4054abc0c3bb758b3a43b0e21835609ac3b5e', class: "material-symbols-outlined search-icon" }, "search"), index.h("input", { key: 'abfd05266b12e5599ff3d7c3c79af659e5085584', type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, class: "search-field" }))))), index.h("div", { key: '82906cd547356049aa9a7541b89152e1a8268cb5', class: "menu-items" }, items.map((item) => (index.h("div", { key: item.id }, item.type === 'header' && (index.h("div", { class: "menu-header" }, item.label)), item.type !== 'header' && (index.h("div", { class: "menu-item-container" }, index.h("button", { class: this.getItemClasses(item), onClick: () => this.handleItemClick(item), type: "button" }, item.label))))))))))));
+    }
+};
+BhPopover.style = bhPopoverCss;
+
+exports.bh_popover = BhPopover;
+//# sourceMappingURL=bh-popover.entry.cjs.js.map

package/cjs/bh-popover.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-popover.entry.cjs.js","sources":["src/components/bh-popover/bh-popover.css?tag=bh-popover&encapsulation=shadow","src/components/bh-popover/bh-popover.tsx"],"sourcesContent":["/* Popover Container */\n.popover {\n  position: relative;\n  border-radius: var(--radius-md);\n  width: 320px;\n}\n\n.popover-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.popover-menu {\n  background-color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  position: relative;\n  border-radius: var(--radius-md);\n  flex-shrink: 0;\n  width: 100%;\n  max-height: 400px;\n  border: 1px solid #dcdfea;\n  box-shadow: var(--shadow-popover);\n}\n\n/* Header */\n.popover-header {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  padding: var(--spacing-lg) var(--spacing-xl);\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n  border-bottom: 1px solid #dcdfea;\n}\n\n.avatar-group {\n  display: flex;\n  gap: var(--spacing-lg);\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n}\n\n.avatar {\n  background-color: #ffffff;\n  position: relative;\n  border-radius: var(--radius-full);\n  flex-shrink: 0;\n  width: 40px;\n  height: 40px;\n  border: 0.75px solid rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.avatar-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.brand-info {\n  flex-basis: 0;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  align-items: flex-start;\n  justify-content: flex-start;\n  line-height: 0;\n  min-height: 1px;\n  min-width: 1px;\n  position: relative;\n  flex-shrink: 0;\n}\n\n.brand-name {\n  font-family: var(--font-inter);\n  font-weight: 600;\n  position: relative;\n  flex-shrink: 0;\n  color: #404968;\n  font-size: 14px;\n  line-height: 20px;\n  width: 100%;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.portfolio-link {\n  font-family: var(--font-inter);\n  font-weight: 400;\n  position: relative;\n  flex-shrink: 0;\n  color: #2642cf;\n  font-size: 14px;\n  line-height: 20px;\n  width: 100%;\n  text-decoration: underline;\n  text-decoration-skip-ink: none;\n  text-underline-position: from-font;\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  padding: 0;\n}\n\n.portfolio-link:hover {\n  color: #1a2bb8;\n}\n\n/* Search Container */\n.search-container {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  align-items: center;\n  justify-content: center;\n  overflow: visible;\n  padding: 0;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n}\n\n.search-input {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-sm);\n  padding: var(--spacing-xs) var(--spacing-none) var(--spacing-none) var(--spacing-lg);\n  align-items: flex-start;\n  justify-content: flex-start;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n}\n\n.search-content {\n  background-color: #ffffff;\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--spacing-md);\n  height: var(--spacing-4xl);\n  align-items: center;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: var(--spacing-none);\n  position: relative;\n  border-radius: var(--radius-md);\n  flex-shrink: 0;\n  width: 100%;\n  border: none;\n}\n\n.search-icon {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  color: #5d6b98;\n}\n\n.search-field {\n  flex-basis: 0;\n  font-family: var(--font-inter);\n  font-weight: 500;\n  flex-grow: 1;\n  line-height: 0;\n  min-height: 1px;\n  min-width: 1px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: relative;\n  flex-shrink: 0;\n  color: #404968;\n  font-size: 14px;\n  line-height: 20px;\n  white-space: nowrap;\n  border: none;\n  outline: none;\n  background: none;\n}\n\n.search-field::placeholder {\n  color: #5d6b98;\n}\n\n/* Menu Items */\n.menu-items {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow-y: auto;\n  padding: var(--spacing-xs) var(--spacing-none);\n  position: relative;\n  flex-grow: 1;\n  width: 100%;\n  max-height: calc(400px - 180px);\n}\n\n.menu-header {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  padding: var(--spacing-lg) var(--spacing-xl);\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n  border-top: 1px solid #dcdfea;\n  border-bottom: 1px solid #dcdfea;\n  font-family: var(--font-inter);\n  font-weight: 600;\n  line-height: 0;\n  color: #404968;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.menu-item-container {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: var(--spacing-xxs) var(--spacing-sm);\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n}\n\n.menu-item {\n  flex-basis: 0;\n  box-sizing: border-box;\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: flex-start;\n  min-height: 1px;\n  min-width: 1px;\n  overflow: hidden;\n  padding: var(--spacing-md) var(--spacing-lg);\n  position: relative;\n  border-radius: var(--radius-sm);\n  flex-shrink: 0;\n  font-family: var(--font-inter);\n  font-weight: 500;\n  line-height: 0;\n  color: #404968;\n  font-size: 14px;\n  line-height: 20px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: all 0.2s ease;\n}\n\n.menu-item:hover {\n  background-color: #f9f9fb;\n  color: #30374f;\n}\n\n.menu-item.selected {\n  background-color: #f9f9fb;\n  color: #30374f;\n}\n\n/* Property Type Styling */\n.menu-item-portfolio {\n  font-weight: 600;\n  color: #2642cf;\n}\n\n.menu-item-portfolio:hover {\n  color: #1a2bb8;\n}\n\n.menu-item-region {\n  font-weight: 500;\n  padding-left: 26px;\n  color: #404968;\n  font-size: 13px;\n}\n\n.menu-item-property {\n  color: #5d6b98;\n  font-size: 13px;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport interface PopoverItem {\n  id: string;\n  label: string;\n  type?: 'portfolio' | 'region' | 'property' | 'header';\n  selected?: boolean;\n}\n\n@Component({\n  tag: 'bh-popover',\n  styleUrl: 'bh-popover.css',\n  shadow: true,\n})\nexport class BhPopover {\n  /**\n   * Title displayed in the header\n   */\n  @Prop() popoverTitle: string = 'Brand Name';\n\n  /**\n   * Text for the portfolio link\n   */\n  @Prop() viewPortfolioText: string = 'view portfolio';\n\n  /**\n   * Placeholder text for search input\n   */\n  @Prop() searchPlaceholder: string = 'Search by name or region';\n\n  /**\n   * Width of the popover\n   */\n  @Prop() width: string = '240px';\n\n  /**\n   * Whether to show search input\n   */\n  @Prop() showSearch: boolean = true;\n\n  /**\n   * Whether to show avatar section\n   */\n  @Prop() showAvatar: boolean = true;\n\n  /**\n   * Avatar image source URL\n   */\n  @Prop() avatarSrc?: string;\n\n  /**\n   * Menu items array (JSON string or array)\n   */\n  @Prop() items: PopoverItem[] | string = [];\n\n  @State() searchTerm: string = '';\n\n  /**\n   * Event emitted when a menu item is selected\n   */\n  @Event() bhItemSelect!: EventEmitter<PopoverItem>;\n\n  /**\n   * Event emitted when portfolio link is clicked\n   */\n  @Event() bhPortfolioClick!: EventEmitter<void>;\n\n  /**\n   * Event emitted when search input changes\n   */\n  @Event() bhSearchChange!: EventEmitter<string>;\n\n  private get parsedItems(): PopoverItem[] {\n    if (typeof this.items === 'string') {\n      try {\n        return JSON.parse(this.items);\n      } catch {\n        return [];\n      }\n    }\n    return this.items || [];\n  }\n\n  private handleItemClick = (item: PopoverItem) => {\n    if (item.type !== 'header') {\n      this.bhItemSelect.emit(item);\n    }\n  };\n\n  private handlePortfolioClick = () => {\n    this.bhPortfolioClick.emit();\n  };\n\n  private handleSearchInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.searchTerm = target.value;\n    this.bhSearchChange.emit(this.searchTerm);\n  };\n\n  private getItemClasses(item: PopoverItem): Record<string, boolean> {\n    return {\n      'menu-item': true,\n      'selected': !!item.selected,\n      'menu-item-portfolio': item.type === 'portfolio',\n      'menu-item-region': item.type === 'region',\n      'menu-item-property': item.type === 'property',\n    };\n  }\n\n  render() {\n    const items = this.parsedItems;\n\n    return (\n      <Host>\n        <div class=\"popover\" style={{ width: this.width }}>\n          <div class=\"popover-content\">\n            <div class=\"popover-menu\">\n              {/* Header with Brand/Avatar */}\n              {this.showAvatar && (\n                <div class=\"popover-header\">\n                  <div class=\"avatar-group\">\n                    <div class=\"avatar\">\n                      {this.avatarSrc ? (\n                        <img src={this.avatarSrc} alt={this.popoverTitle} class=\"avatar-image\" />\n                      ) : (\n                        <slot name=\"avatar\" />\n                      )}\n                    </div>\n                    <div class=\"brand-info\">\n                      <div class=\"brand-name\">{this.popoverTitle}</div>\n                      {this.viewPortfolioText && (\n                        <button\n                          class=\"portfolio-link\"\n                          onClick={this.handlePortfolioClick}\n                          type=\"button\"\n                        >\n                          {this.viewPortfolioText}\n                        </button>\n                      )}\n                    </div>\n                  </div>\n                </div>\n              )}\n\n              {/* Search Input */}\n              {this.showSearch && (\n                <div class=\"search-container\">\n                  <div class=\"search-input\">\n                    <div class=\"search-content\">\n                      <span class=\"material-symbols-outlined search-icon\">search</span>\n                      <input\n                        type=\"text\"\n                        placeholder={this.searchPlaceholder}\n                        value={this.searchTerm}\n                        onInput={this.handleSearchInput}\n                        class=\"search-field\"\n                      />\n                    </div>\n                  </div>\n                </div>\n              )}\n\n              {/* Menu Items */}\n              <div class=\"menu-items\">\n                {items.map((item) => (\n                  <div key={item.id}>\n                    {/* Header Item */}\n                    {item.type === 'header' && (\n                      <div class=\"menu-header\">{item.label}</div>\n                    )}\n\n                    {/* Regular Item */}\n                    {item.type !== 'header' && (\n                      <div class=\"menu-item-container\">\n                        <button\n                          class={this.getItemClasses(item)}\n                          onClick={() => this.handleItemClick(item)}\n                          type=\"button\"\n                        >\n                          {item.label}\n                        </button>\n                      </div>\n                    )}\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}