@actabldesign/bellhop-core 0.0.3 → 0.0.6

package/dist/esm/bh-pie-chart.entry.js

@@ -0,0 +1,155 @@
+import { r as registerInstance, h, H as Host } from './index-DXAL-jSE.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) {
+        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 (h(Host, { key: 'b0778f7ed499f578b25907f73be6e7ddbbd9fa17' }, h("div", { key: '440259b95d6e65282452619ee2a0cfc890f45443', class: "pie-chart-container", style: { width: `${this.size}px`, height: `${this.size}px` } }, h("svg", { key: '183c562c5a65095667964dc5a80b84fdf28d7704', width: this.size, height: this.size, viewBox: "0 0 160 160", class: "pie-chart-svg" }, h("circle", { key: '1afac01e292252211943372018476565dabefbb2', cx: "80", cy: "80", r: "80", fill: "transparent", class: "pie-background" }), segments.map((segment, index) => (h("g", { key: index, class: "pie-segment-group" }, h("path", { d: segment.path, fill: segment.color, class: { 'pie-segment': true, animated: this.animated }, style: { animationDelay: this.animated ? `${index * 0.03}s` : '0s' }, onMouseEnter: (e) => this.handleSegmentHover(e, segment), onMouseLeave: this.handleSegmentLeave })))), this.hole !== 'none' && (h("circle", { key: 'bb64355e6be750e413926fca053c2bc100aa821e', cx: "80", cy: "80", r: innerRadius, fill: "white", class: "pie-inner-hole" })))), h("bh-chart-tooltip", { key: '1760b14f54066a4ae146e9802a9888e7f44bce19', 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;
+
+export { BhPieChart as bh_pie_chart };
+//# sourceMappingURL=bh-pie-chart.entry.js.map

package/dist/esm/bh-popover.entry.js

@@ -0,0 +1,98 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DXAL-jSE.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) {
+        registerInstance(this, hostRef);
+        this.bhItemSelect = createEvent(this, "bhItemSelect");
+        this.bhPortfolioClick = createEvent(this, "bhPortfolioClick");
+        this.bhSearchChange = 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 (h(Host, { key: '25499890c1864435bae214a37f7fc8d565d8f3da' }, h("div", { key: 'de6ade64a6cdf7ab299d0ee9187b676d2841d89c', class: "popover", style: { width: this.width } }, h("div", { key: '19d68a071d41a928dde7070ce17ef61ef0770118', class: "popover-content" }, h("div", { key: '103181dbb1ff47314cff71869bb84ad06c78de78', class: "popover-menu" }, this.showAvatar && (h("div", { key: 'd6b413cd6c726078e414174cfc75d5e95ffacddc', class: "popover-header" }, h("div", { key: '4cdad2a1457d4b8df7baeb0f04d849f47471a727', class: "avatar-group" }, h("div", { key: '7c59b44499eaba8da0982939dacef30899273c02', class: "avatar" }, this.avatarSrc ? (h("img", { src: this.avatarSrc, alt: this.popoverTitle, class: "avatar-image" })) : (h("slot", { name: "avatar" }))), h("div", { key: 'bfab1ee98a218d4ee75055872542135fbf179069', class: "brand-info" }, h("div", { key: '9eed24402c23ba99fa9fbcaf4b0a430ea01fe263', class: "brand-name" }, this.popoverTitle), this.viewPortfolioText && (h("button", { key: '2056c40e002bd029545f2f2fb898eed39f8f93db', class: "portfolio-link", onClick: this.handlePortfolioClick, type: "button" }, this.viewPortfolioText)))))), this.showSearch && (h("div", { key: 'd8b487b553522f4c5a0e9e74755c53fb7ff5dc1b', class: "search-container" }, h("div", { key: 'a20d988fa3f86e7c26a1b31ed04b4adfa34a7a36', class: "search-input" }, h("div", { key: 'd75a244d37324a84a8ae8501f334f84a52fe9b0e', class: "search-content" }, h("span", { key: '394b2c5f23949c72109ca5c441ef3069a6424530', class: "material-symbols-outlined search-icon" }, "search"), h("input", { key: '1887ff5e6d3b3c857b5e980d33d8adc0076b23a1', type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, class: "search-field" }))))), h("div", { key: 'e2b6ff5f6b7ba5929db7a9d1401ae2cfc1089eb7', class: "menu-items" }, items.map((item) => (h("div", { key: item.id }, item.type === 'header' && (h("div", { class: "menu-header" }, item.label)), item.type !== 'header' && (h("div", { class: "menu-item-container" }, h("button", { class: this.getItemClasses(item), onClick: () => this.handleItemClick(item), type: "button" }, item.label))))))))))));
+    }
+};
+BhPopover.style = bhPopoverCss;
+
+export { BhPopover as bh_popover };
+//# sourceMappingURL=bh-popover.entry.js.map

package/dist/esm/bh-product-switcher.entry.js

@@ -0,0 +1,100 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DXAL-jSE.js';
+
+const bhProductSwitcherCss = ".product-switcher-container{position:fixed;z-index:10000;animation:popoverSlideIn 0.3s ease-out;transform-origin:top center}.product-switcher-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:transparent;z-index:9999}.product-switcher-popover{background:rgba(255, 255, 255, 0.9);border:1px solid var(--color-neutral-100);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(3px);box-shadow:0px 24px 48px -12px rgba(64, 73, 104, 0.1);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md);min-width:250px;position:relative;z-index:10001}@keyframes popoverSlideIn{0%{opacity:0;transform:translateY(-12px)}100%{opacity:1;transform:translateY(0)}}.product-switcher-container.closing{animation:popoverSlideOut 0.2s ease-in forwards}@keyframes popoverSlideOut{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-12px)}}.product-item{display:flex;align-items:center;gap:var(--spacing-lg);width:100%;padding:var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;transition:background-color 0.2s ease}.product-item:hover{background-color:var(--color-neutral-100)}.product-item.current{background-color:var(--color-brand-50)}.product-icon-container{width:36px;height:36px;background:var(--color-white);border:1px solid var(--color-neutral-100);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:var(--spacing-xs)}.product-icon{width:100%;height:100%;object-fit:contain;object-position:center;filter:invert(25%) sepia(190%) saturate(210%) hue-rotate(190deg) brightness(120%) contrast(210%)}.product-icon svg path{fill:var(--color-brand-600)}.product-info{display:flex;flex-direction:column;flex:1}.product-name{font-weight:var(--weight-semibold);font-size:var(--text-md-size);line-height:var(--text-md-line);color:var(--color-neutral-900)}.product-description{font-weight:var(--weight-regular);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-600)}";
+
+const BhProductSwitcher = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhClose = createEvent(this, "bhClose");
+        this.bhProductSelect = createEvent(this, "bhProductSelect");
+    }
+    /**
+     * Whether the product switcher is open
+     */
+    isOpen = false;
+    /**
+     * Position to anchor the popover
+     */
+    anchorPosition = { top: 0, left: 0 };
+    /**
+     * Array of products to display
+     */
+    products = [
+        {
+            id: 'alice',
+            name: 'Alice',
+            description: 'Housekeeping & Guest Services',
+            logo: './assets/logos/AL.svg',
+        },
+        {
+            id: 'hotel-effectiveness',
+            name: 'Hotel Effectiveness',
+            description: 'Labor planning',
+            logo: './assets/logos/HE.svg',
+        },
+        {
+            id: 'profit-sword',
+            name: 'ProfitSword',
+            description: 'B.I and Finance',
+            logo: './assets/logos/PS.svg',
+        },
+        {
+            id: 'transcendent',
+            name: 'Transcendent',
+            description: 'Asset Management & CapEx',
+            logo: './assets/logos/TR.svg',
+        },
+    ];
+    /**
+     * Event emitted when the switcher should close
+     */
+    bhClose;
+    /**
+     * Event emitted when a product is selected
+     */
+    bhProductSelect;
+    isClosing = false;
+    containerRef;
+    handleDocumentClick(event) {
+        const target = event.target;
+        if (this.isOpen &&
+            this.containerRef &&
+            !this.containerRef.contains(target) &&
+            !target.closest('.logo-active')) {
+            this.handleClose();
+        }
+    }
+    handleClose = () => {
+        this.isClosing = true;
+        setTimeout(() => {
+            this.bhClose.emit();
+            this.isClosing = false;
+        }, 200);
+    };
+    handleProductClick = (product) => {
+        this.bhProductSelect.emit(product);
+        this.handleClose();
+    };
+    render() {
+        if (!this.isOpen)
+            return null;
+        const containerClasses = {
+            'product-switcher-container': true,
+            'closing': this.isClosing,
+        };
+        return (h(Host, null, h("div", { class: "product-switcher-backdrop", onClick: this.handleClose }), h("div", { ref: (el) => this.containerRef = el, class: containerClasses, style: {
+                top: `${this.anchorPosition.top}px`,
+                left: `${this.anchorPosition.left}px`,
+            } }, h("div", { class: "product-switcher-popover" }, this.products.map((product) => {
+            const itemClasses = {
+                'product-item': true,
+                'current': product.current || false,
+            };
+            return (h("div", { key: product.id, class: itemClasses, onClick: () => this.handleProductClick(product) }, h("div", { class: "product-icon-container" }, h("img", { src: product.logo, alt: `${product.name} logo`, class: "product-icon" })), h("div", { class: "product-info" }, h("div", { class: "product-name" }, product.name), h("div", { class: "product-description" }, product.description))));
+        })))));
+    }
+};
+BhProductSwitcher.style = bhProductSwitcherCss;
+
+export { BhProductSwitcher as bh_product_switcher };
+//# sourceMappingURL=bh-product-switcher.entry.js.map

package/dist/esm/bh-property-switcher.entry.js

@@ -0,0 +1,229 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DXAL-jSE.js';
+
+const bhPropertySwitcherCss = ".property-switcher{position:relative;display:inline-block;width:220px}.property-selector{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm);transition:background-color 0.2s ease;width:100%;height:36px;min-width:0}.property-selector:hover{background-color:var(--color-neutral-100)}.selector-icon{font-size:18px;color:var(--color-neutral-500);flex-shrink:0}.property-name{font-family:var(--font-inter);font-weight:var(--weight-medium);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-700);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;flex-grow:1;min-width:0;text-align:left}.expand-icon{font-size:18px;flex-shrink:0;color:var(--color-neutral-400);transition:color 0.2s ease}.dropdown-panel{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--spacing-xs);background-color:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);min-width:280px;max-width:360px;animation:dropdownSlideIn 0.15s ease-out;overflow:hidden}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}}.search-container{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm);background-color:var(--color-white);border-bottom:1px solid var(--color-neutral-200)}.search-icon{font-size:20px;color:var(--color-neutral-500);flex-shrink:0}.search-input{flex:1;border:none;outline:none;font-family:var(--font-inter);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-900);background:transparent;min-width:0}.search-input::placeholder{color:var(--color-neutral-400)}.clear-search{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm);color:var(--color-neutral-400);transition:color 0.15s ease, background-color 0.15s ease}.clear-search:hover{color:var(--color-neutral-600);background-color:var(--color-neutral-200)}.clear-search .material-symbols-outlined{font-size:18px}.dropdown-content{max-height:360px;overflow-y:auto}.flat-list-container{padding:var(--spacing-xs) 0}.groups-container{padding:var(--spacing-xs) 0}.property-group{border-bottom:1px solid var(--color-neutral-100)}.property-group:last-child{border-bottom:none}.group-header{display:flex;align-items:center;gap:var(--spacing-xs);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:var(--color-neutral-50);cursor:pointer;font-family:var(--font-inter);font-size:var(--text-xs-size);font-weight:var(--weight-semibold);color:var(--color-neutral-600);text-transform:uppercase;letter-spacing:0.5px;transition:background-color 0.15s ease}.group-header:hover{background-color:var(--color-neutral-200)}.group-expand-icon{font-size:18px;color:var(--color-neutral-500);transition:transform 0.15s ease}.group-name{flex:1;text-align:left}.group-count{font-size:11px;font-weight:var(--weight-semibold);color:var(--color-neutral-500);background-color:var(--color-neutral-200);padding:2px 8px;border-radius:var(--radius-full);min-width:20px;text-align:center}.group-properties{padding:var(--spacing-xs) 0}.property-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);padding-left:calc(var(--spacing-md) + 26px);border:none;background:transparent;cursor:pointer;font-family:var(--font-inter);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-700);text-align:left;transition:background-color 0.15s ease}.flat-list-container .property-item{padding-left:var(--spacing-md)}.property-item:hover{background-color:var(--color-neutral-100)}.property-item.selected{background-color:var(--color-brand-50);color:var(--color-brand-700)}.property-item.selected .property-icon{color:var(--color-brand-600)}.property-icon{font-size:20px;color:var(--color-neutral-400);flex-shrink:0}.property-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--weight-regular)}.property-item.selected .property-item-name{font-weight:var(--weight-medium)}.check-icon{font-size:18px;color:var(--color-brand-600);flex-shrink:0}.menu-divider{height:1px;background-color:var(--color-neutral-150);margin:var(--spacing-xs) var(--spacing-md)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl) var(--spacing-lg);gap:var(--spacing-sm)}.empty-icon{font-size:40px;color:var(--color-neutral-300)}.empty-text{font-family:var(--font-inter);font-size:var(--text-sm-size);color:var(--color-neutral-500)}.dropdown-menu-container{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--spacing-xs);max-height:320px}.popover-container{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--spacing-xs);animation:popoverSlideIn 0.3s ease-out;transform-origin:top center}@keyframes popoverSlideIn{0%{opacity:0;transform:translateY(calc(-1 * var(--spacing-lg)))}100%{opacity:1;transform:translateY(0)}}.popover-container.closing{animation:popoverSlideOut 0.2s ease-in forwards}@keyframes popoverSlideOut{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(calc(-1 * var(--spacing-lg)))}}";
+
+const BhPropertySwitcher = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhPropertyChange = createEvent(this, "bhPropertyChange");
+    }
+    /**
+     * Selected property name to display (initial value)
+     */
+    selectedProperty = 'Select a property';
+    /**
+     * Array of property options
+     */
+    properties = [];
+    /**
+     * Whether to group properties by their group field
+     */
+    grouped = false;
+    /**
+     * Placeholder text for search input
+     */
+    searchPlaceholder = 'Search properties...';
+    /**
+     * Event emitted when a property is selected
+     */
+    bhPropertyChange;
+    isExpanded = false;
+    searchQuery = '';
+    expandedGroups = new Set();
+    internalSelectedProperty = '';
+    switcherRef;
+    searchInputRef;
+    componentWillLoad() {
+        this.internalSelectedProperty = this.selectedProperty;
+    }
+    handleDocumentClick(event) {
+        if (!this.isExpanded) {
+            return;
+        }
+        // Check if click is on this component or inside it using composedPath for Shadow DOM
+        const clickedInside = event.composedPath().includes(this.switcherRef);
+        if (!clickedInside) {
+            this.isExpanded = false;
+        }
+    }
+    handleToggle = () => {
+        this.isExpanded = !this.isExpanded;
+        if (this.isExpanded) {
+            this.searchQuery = '';
+            // Initialize all groups as expanded when opening
+            if (this.grouped) {
+                const groups = this.getPropertyGroups();
+                this.expandedGroups = new Set(groups.map(g => g.id));
+            }
+            // Focus search input when opening
+            setTimeout(() => {
+                if (this.searchInputRef) {
+                    this.searchInputRef.focus();
+                }
+            }, 50);
+        }
+    };
+    handleSearchInput = (event) => {
+        const target = event.target;
+        this.searchQuery = target.value;
+    };
+    handleGroupToggle = (groupId) => {
+        const newSet = new Set(this.expandedGroups);
+        if (newSet.has(groupId)) {
+            newSet.delete(groupId);
+        }
+        else {
+            newSet.add(groupId);
+        }
+        this.expandedGroups = newSet;
+    };
+    handlePropertySelect = (property) => {
+        this.internalSelectedProperty = property.name;
+        this.bhPropertyChange.emit(property);
+        this.isExpanded = false;
+        this.searchQuery = '';
+    };
+    getPropertyGroups = () => {
+        const groupMap = new Map();
+        const ungrouped = [];
+        this.properties.forEach((property) => {
+            if (property.group) {
+                const existing = groupMap.get(property.group) || [];
+                existing.push(property);
+                groupMap.set(property.group, existing);
+            }
+            else {
+                ungrouped.push(property);
+            }
+        });
+        const groups = [];
+        groupMap.forEach((properties, name) => {
+            groups.push({
+                id: name.toLowerCase().replace(/\s+/g, '-'),
+                name,
+                properties,
+            });
+        });
+        // Add ungrouped properties as a special group if any exist
+        if (ungrouped.length > 0) {
+            groups.push({
+                id: 'ungrouped',
+                name: 'Other',
+                properties: ungrouped,
+            });
+        }
+        return groups;
+    };
+    filterProperties = (properties) => {
+        if (!this.searchQuery.trim()) {
+            return properties;
+        }
+        const query = this.searchQuery.toLowerCase();
+        return properties.filter((p) => p.name.toLowerCase().includes(query));
+    };
+    filterGroups = (groups) => {
+        if (!this.searchQuery.trim()) {
+            return groups;
+        }
+        const query = this.searchQuery.toLowerCase();
+        return groups
+            .map((group) => {
+            // Check if group name matches
+            const groupMatches = group.name.toLowerCase().includes(query);
+            // Filter properties within the group
+            const filteredProperties = group.properties.filter((p) => p.name.toLowerCase().includes(query));
+            // Include group if group name matches (show all properties) or if any properties match
+            if (groupMatches) {
+                return { ...group }; // Return group with all properties
+            }
+            else if (filteredProperties.length > 0) {
+                return { ...group, properties: filteredProperties };
+            }
+            return null;
+        })
+            .filter((g) => g !== null);
+    };
+    getPropertyIcon = (type) => {
+        switch (type) {
+            case 'portfolio':
+                return 'business';
+            case 'region':
+                return 'public';
+            case 'property':
+            default:
+                return 'location_on';
+        }
+    };
+    renderSearchInput() {
+        return (h("div", { class: "search-container" }, h("span", { class: "material-symbols-outlined search-icon" }, "search"), h("input", { ref: (el) => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.searchQuery && (h("button", { class: "clear-search", onClick: (e) => {
+                e.stopPropagation();
+                this.searchQuery = '';
+                this.searchInputRef?.focus();
+            }, "aria-label": "Clear search" }, h("span", { class: "material-symbols-outlined" }, "close")))));
+    }
+    renderPropertyItem(property) {
+        const isSelected = property.name === this.internalSelectedProperty;
+        return (h("button", { class: {
+                'property-item': true,
+                'selected': isSelected,
+            }, onClick: () => this.handlePropertySelect(property) }, h("span", { class: "material-symbols-outlined property-icon" }, this.getPropertyIcon(property.type)), h("span", { class: "property-item-name", title: property.name }, property.name), isSelected && (h("span", { class: "material-symbols-outlined check-icon" }, "check"))));
+    }
+    renderGroupedView() {
+        const groups = this.getPropertyGroups();
+        const filteredGroups = this.filterGroups(groups);
+        if (filteredGroups.length === 0) {
+            return this.renderEmptyState();
+        }
+        return (h("div", { class: "groups-container" }, filteredGroups.map((group) => {
+            const isExpanded = this.expandedGroups.has(group.id);
+            return (h("div", { class: "property-group", key: group.id }, h("button", { class: {
+                    'group-header': true,
+                    'expanded': isExpanded,
+                }, onClick: () => this.handleGroupToggle(group.id), "aria-expanded": isExpanded ? 'true' : 'false' }, h("span", { class: "material-symbols-outlined group-expand-icon" }, isExpanded ? 'expand_more' : 'chevron_right'), h("span", { class: "group-name" }, group.name), h("span", { class: "group-count" }, group.properties.length)), isExpanded && (h("div", { class: "group-properties" }, group.properties.map((property) => (h("div", { key: property.id }, this.renderPropertyItem(property))))))));
+        })));
+    }
+    renderFlatView() {
+        const filteredProperties = this.filterProperties(this.properties);
+        if (filteredProperties.length === 0) {
+            return this.renderEmptyState();
+        }
+        // Legacy behavior: render portfolios with dividers, skip regions
+        const items = [];
+        filteredProperties.forEach((property) => {
+            if (property.type === 'portfolio') {
+                items.push(property);
+                items.push({ divider: true });
+            }
+            else if (property.type === 'property') {
+                items.push(property);
+            }
+        });
+        return (h("div", { class: "flat-list-container" }, items.map((item, index) => {
+            if ('divider' in item) {
+                return h("div", { class: "menu-divider", key: `divider-${index}` });
+            }
+            return (h("div", { key: item.id }, this.renderPropertyItem(item)));
+        })));
+    }
+    renderEmptyState() {
+        return (h("div", { class: "empty-state" }, h("span", { class: "material-symbols-outlined empty-icon" }, "search_off"), h("span", { class: "empty-text" }, "No properties found")));
+    }
+    getSelectedProperty() {
+        return this.properties.find(p => p.name === this.internalSelectedProperty);
+    }
+    render() {
+        const containerClasses = {
+            'property-switcher': true,
+            'expanded': this.isExpanded,
+        };
+        const selectedProp = this.getSelectedProperty();
+        const displayName = this.internalSelectedProperty || this.selectedProperty;
+        return (h(Host, { key: '02541bacd9b48dbf5c8939ed6b4f9a08393e788c' }, h("div", { key: 'cb0f6de5ee67caa19e6a7022ec89347d81dbda7e', ref: (el) => (this.switcherRef = el), class: containerClasses }, h("button", { key: '4fc5cd736389e8707d4c86ae319a721e685dc88a', class: "property-selector", onClick: () => this.handleToggle(), "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-label": `Property selector: ${displayName}` }, selectedProp && (h("span", { key: 'dfe3c36f344113c8edb18c234dc0e9d81fbed9ef', class: "material-symbols-outlined selector-icon" }, this.getPropertyIcon(selectedProp.type))), h("span", { key: 'e83cbe7b26f6d8b94557003da87580dd00053acc', class: "property-name" }, displayName), h("span", { key: '4f6d01218d1d60afaa148d375d911d2701d9b5bd', class: "material-symbols-outlined expand-icon", "aria-label": this.isExpanded ? 'Collapse Options' : 'Expand Options' }, this.isExpanded ? 'unfold_less' : 'unfold_more')), this.isExpanded && (h("div", { key: '9c6ee765cd36535305b9236d46ba96657aeac308', class: "dropdown-panel" }, this.renderSearchInput(), h("div", { key: '5433d7a5ad985549a332cd7df7070d123ce98153', class: "dropdown-content" }, this.grouped
+            ? this.renderGroupedView()
+            : this.renderFlatView()))))));
+    }
+};
+BhPropertySwitcher.style = bhPropertySwitcherCss;
+
+export { BhPropertySwitcher as bh_property_switcher };
+//# sourceMappingURL=bh-property-switcher.entry.js.map