npm - @actabldesign/bellhop-core - Versions diffs - 0.0.7 → 0.0.12 - Mend

@actabldesign/bellhop-core 0.0.7 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (474) hide show

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

@@ -90,11 +90,11 @@ const BhPageNavigationMultiLevel = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'db478fe5c9492c19a41acf68577cb78a00ebdc4f' }, index.h("div", { key: 'a968be18bbdac5bc39d45cf59b544e5384f7cdfc', class: this.getItemClasses() }, index.h("div", { key: 'da3f4a3b6246f50b27d2657080488135b85719be', class: "page-navigation-multi-level-parent", onClick: this.handleParentClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, index.h("div", { key: '64933e8c68ae1238581e4c81f3cae937e3199b1f', class: "page-navigation-item-content" }, !this.isHovered && (index.h("span", { key: 'd8369d06118533f5cdb2e228bc72cc0aafc71b79', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon)), this.isHovered && (index.h("span", { key: '852f49d37fa5d47d656aad732c46f23a4438be95', class: {
+        return (index.h(index.Host, { key: 'a87bd5e1926673b22bbac28ae94f0694269f3f07' }, index.h("div", { key: '8feec4d248ee32f4d2085e728990db1f9f2d14b2', class: this.getItemClasses() }, index.h("div", { key: 'aeaeae5646262b697dc151ee4996930db392234a', class: "page-navigation-multi-level-parent", onClick: this.handleParentClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, index.h("div", { key: '72c0fb3fe1f681c484a0a5e17551d09dd068f03a', class: "page-navigation-item-content" }, !this.isHovered && (index.h("span", { key: '622878b142a39d2b5b8fa69865b55ecce0b85f47', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon)), this.isHovered && (index.h("span", { key: '4844c5fe0c69a225804ecebdef091887237d4667', class: {
                 'page-navigation-chevron-icon': true,
                 'material-symbols-outlined': true,
                 'expanded': this.isExpanded,
-            } }, "expand_more")), index.h("span", { key: '5737917e070122fe1b74ff693ed7afceb262ca1d', class: "page-navigation-item-label" }, this.label), index.h("bh-button", { key: 'b3e29f3b6e7b64daa42a6a9a541cf0278b7dc6b5', hierarchy: "tertiary", icon: "only", size: "xs", iconName: "add", onClick: this.handleAddClick }))), (this.isExpanded || this.isAnimating) && (index.h("div", { key: 'e9f386ef6ca8757d6aad84d4e90c776e9ee82be8', 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) }))))))));
+            } }, "expand_more")), index.h("span", { key: '347a59718d412ab1f930ea565fb33c4f6a8be0f0', class: "page-navigation-item-label" }, this.label), index.h("bh-button", { key: '117a5ee32f65dbd9afdf499d4cc4438c9ab6a3c9', hierarchy: "tertiary", icon: "only", size: "xs", iconName: "add", onClick: this.handleAddClick }))), (this.isExpanded || this.isAnimating) && (index.h("div", { key: '56cbc14fbc61c335dfbd3a22c20a11b928ce04bd', 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"]
@@ -136,7 +136,7 @@ const BhPageNavigationSingleLevel = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '1f58160e16d18bfe049035d33b48f14b11b676ae' }, index.h("div", { key: 'c5c44e67354359238f67df33c67e81ec2bbaf478', class: this.getItemClasses(), onClick: () => this.handleClick() }, index.h("div", { key: 'c3c3b27eaeb65d8325e5e92c428831af58a48448', class: "page-navigation-item-content" }, index.h("span", { key: 'e0e5315088e7f1c820fad38d2ae095494dc581bb', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon), index.h("span", { key: '37d30adc75791076a84c58f92fd93ad7c16267f0', class: "page-navigation-item-label" }, this.label)))));
+        return (index.h(index.Host, { key: '5b3997d17859a74a8b564e348b8c81a440cb7776' }, index.h("div", { key: 'c34fa8060ff6baf90361a39615b344352d34ce59', class: this.getItemClasses(), onClick: () => this.handleClick() }, index.h("div", { key: 'e6dd19e247dda5dd1f957610453539cf8143440c', class: "page-navigation-item-content" }, index.h("span", { key: '3df9dacf7dc53e3afd443984e0953cb3843793c7', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon), index.h("span", { key: '857b837aaa75cbcb678f7b9eb21b35be873085d1', class: "page-navigation-item-label" }, this.label)))));
     }
 };
 BhPageNavigationSingleLevel.style = bhPageNavigationSingleLevelCss;

package/dist/cjs/bh-page-navigation.cjs.entry.js CHANGED Viewed

@@ -60,7 +60,7 @@ const BhPageNavigation = class {
         this.bhItemClick.emit({ itemId, childIndex });
     };
     render() {
-        return (index.h(index.Host, { key: 'e45e8ce3b4f0357f3e9a388083483a710b1480da' }, index.h("div", { key: 'fd2b83db1152ee0da4a3700c54bc19eb442e9b7b', class: "page-navigation" }, index.h("div", { key: 'f0ad1b96f3f1e04e38d4d9d440d3e5efe0d172a4', class: "page-navigation-header" }, index.h("h2", { key: 'd015280380f4caad460fbb919e82c774d812db98', class: "page-navigation-title" }, this.navTitle)), index.h("nav", { key: 'ac52f5b69c75376db23ce23de1ee76656cc392f3', 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) })))))));
+        return (index.h(index.Host, { key: '96e305381a9f4148c9adaaefd27c7deca8071bfb' }, index.h("div", { key: '5f00d8f3c967ba122b987fe414c8a9f48a86c4ae', class: "page-navigation" }, index.h("div", { key: 'c4d5cd5413aee68055cf864a1f5b2b54159b7249', class: "page-navigation-header" }, index.h("h2", { key: '1c5e9d38b17e7ed63f3b69fd324fec86aa806a6b', class: "page-navigation-title" }, this.navTitle)), index.h("nav", { key: '3db056f1d9d6e607cc69d27df7ff25e6fbaac8c1', 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"]

package/dist/cjs/bh-pie-chart.cjs.entry.js CHANGED Viewed

@@ -140,7 +140,7 @@ const BhPieChart = class {
     render() {
         const segments = this.getSegments();
         const innerRadius = this.getInnerRadius();
-        return (index.h(index.Host, { key: 'b0778f7ed499f578b25907f73be6e7ddbbd9fa17' }, index.h("div", { key: '440259b95d6e65282452619ee2a0cfc890f45443', class: "pie-chart-container", style: { width: `${this.size}px`, height: `${this.size}px` } }, index.h("svg", { key: '183c562c5a65095667964dc5a80b84fdf28d7704', width: this.size, height: this.size, viewBox: "0 0 160 160", class: "pie-chart-svg" }, index.h("circle", { key: '1afac01e292252211943372018476565dabefbb2', 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: 'bb64355e6be750e413926fca053c2bc100aa821e', cx: "80", cy: "80", r: innerRadius, fill: "white", class: "pie-inner-hole" })))), index.h("bh-chart-tooltip", { key: '1760b14f54066a4ae146e9802a9888e7f44bce19', visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY, items: this.tooltipSegment
+        return (index.h(index.Host, { key: '0bd86f47684f8fa73b3460af4d245337136fc319' }, index.h("div", { key: '9a7c0944d029a7065735ff647f1e2502af2bb783', class: "pie-chart-container", style: { width: `${this.size}px`, height: `${this.size}px` } }, index.h("svg", { key: 'c272bad8a5050cbc28ac803ea68b27b7179f1d1a', width: this.size, height: this.size, viewBox: "0 0 160 160", class: "pie-chart-svg" }, index.h("circle", { key: '21503d47d3ad7976bc2c2b5926785c2144d579ea', 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: 'f42c781fc5378af859f7a460ac0665cfd3360599', cx: "80", cy: "80", r: innerRadius, fill: "white", class: "pie-inner-hole" })))), index.h("bh-chart-tooltip", { key: '179c0d15c9895199dc6d169e400c6f4ff832215b', visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY, items: this.tooltipSegment
                 ? [
                     {
                         label: this.tooltipSegment.name,

package/dist/cjs/bh-popover.cjs.entry.js CHANGED Viewed

@@ -2,96 +2,34 @@
 var index = require('./index-DQwSUT6k.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 bhPopoverCss = ":host{display:inline-block;position:relative}.popover-wrapper{position:absolute;left:50%;transform:translateX(-50%);z-index:1000;width:max-content;width:-webkit-max-content;max-width:var(--max-width, 285px);flex-direction:column;align-items:center;gap:0;padding:0}.popover-wrapper.top{bottom:100%;margin-bottom:10px}.popover-wrapper.bottom{top:100%;margin-top:10px}.popover-content{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:0;border-radius:var(--radius-md, 8px);background-color:var(--color-white, #ffffff);box-shadow:var(--shadow-md);overflow:hidden}.popover-text{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:var(--sp-3, 12px)}.popover-text.with-title{padding:var(--sp-3, 12px);border-radius:var(--radius-md, 8px);overflow:hidden}.content-text{font-family:var(--font-family-body, 'Inter', sans-serif);font-size:var(--text-sm-size, 14px);font-weight:var(--weight-medium, 500);line-height:var(--text-xs-line, 18px);letter-spacing:0;color:var(--color-neutral-600, #4a5578);margin:0;white-space:pre-wrap}.popover-header{display:flex;flex-direction:column;align-items:center;gap:0;padding:0;width:100%;overflow:hidden}.header-content{display:flex;gap:var(--sp-4, 16px);align-items:flex-start;padding:var(--sp-3, 12px);width:100%}.header-text{display:flex;flex-direction:column;flex:1;gap:var(--sp-1, 4px);align-items:flex-start;min-height:1px;min-width:1px;padding:0}.title-text{font-family:var(--font-family-body, 'Inter', sans-serif);font-size:var(--text-sm-size, 14px);font-weight:var(--weight-semibold, 600);line-height:var(--text-sm-line, 20px);letter-spacing:0;color:var(--color-neutral-900, #111322);margin:0;width:100%;white-space:pre-wrap}.divider{width:100%;height:1px;background-color:var(--color-neutral-200, #dcdfea)}";
 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
+     * Optional title for the popover. If provided, displays "With title" variant
+     * Named popoverTitle to avoid conflict with HTMLElement.title
      */
-    popoverTitle = 'Brand Name';
+    popoverTitle;
     /**
-     * Text for the portfolio link
+     * Content text for the popover
      */
-    viewPortfolioText = 'view portfolio';
+    content;
     /**
-     * Placeholder text for search input
+     * Maximum width of the popover
      */
-    searchPlaceholder = 'Search by name or region';
+    maxWidth = '285px';
     /**
-     * Width of the popover
+     * Position of the popover relative to the trigger element
      */
-    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',
-        };
-    }
+    position = 'top'; // Default to top
     render() {
-        const items = this.parsedItems;
-        return (index.h(index.Host, { key: '25499890c1864435bae214a37f7fc8d565d8f3da' }, index.h("div", { key: 'de6ade64a6cdf7ab299d0ee9187b676d2841d89c', class: "popover", style: { width: this.width } }, index.h("div", { key: '19d68a071d41a928dde7070ce17ef61ef0770118', class: "popover-content" }, index.h("div", { key: '103181dbb1ff47314cff71869bb84ad06c78de78', class: "popover-menu" }, this.showAvatar && (index.h("div", { key: 'd6b413cd6c726078e414174cfc75d5e95ffacddc', class: "popover-header" }, index.h("div", { key: '4cdad2a1457d4b8df7baeb0f04d849f47471a727', class: "avatar-group" }, index.h("div", { key: '7c59b44499eaba8da0982939dacef30899273c02', 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: 'bfab1ee98a218d4ee75055872542135fbf179069', class: "brand-info" }, index.h("div", { key: '9eed24402c23ba99fa9fbcaf4b0a430ea01fe263', class: "brand-name" }, this.popoverTitle), this.viewPortfolioText && (index.h("button", { key: '2056c40e002bd029545f2f2fb898eed39f8f93db', class: "portfolio-link", onClick: this.handlePortfolioClick, type: "button" }, this.viewPortfolioText)))))), this.showSearch && (index.h("div", { key: 'd8b487b553522f4c5a0e9e74755c53fb7ff5dc1b', class: "search-container" }, index.h("div", { key: 'a20d988fa3f86e7c26a1b31ed04b4adfa34a7a36', class: "search-input" }, index.h("div", { key: 'd75a244d37324a84a8ae8501f334f84a52fe9b0e', class: "search-content" }, index.h("span", { key: '394b2c5f23949c72109ca5c441ef3069a6424530', class: "material-symbols-outlined search-icon" }, "search"), index.h("input", { key: '1887ff5e6d3b3c857b5e980d33d8adc0076b23a1', type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, class: "search-field" }))))), index.h("div", { key: 'e2b6ff5f6b7ba5929db7a9d1401ae2cfc1089eb7', 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))))))))))));
+        const hasTitle = !!this.popoverTitle;
+        return (
+        // Move the style here so it controls the entire popover window
+        index.h("div", { key: '8e25b3b1975a401c7c3b227bd9d9bd0a9e58d9e8', class: `popover-wrapper ${this.position}`, style: { maxWidth: this.maxWidth } }, index.h("div", { key: 'e982c62eb6f595d28405c22218127aac02a2b18d', class: "popover-content" }, hasTitle && (index.h("div", { key: '6317cf01a6b6a8cc5ec1ff6b25494bb87bf61d38', class: "popover-header" }, index.h("div", { key: 'd1adadc130346c805f483b5383212a865c4bf816', class: "header-content" }, index.h("div", { key: 'bd19b1f54fcee4af8efc3e1078dfa8e455a34ca9', class: "header-text" }, index.h("p", { key: '2a22f82dea6194a7b0fce24c317e8e7fe00fcec0', class: "title-text" }, this.popoverTitle))), index.h("div", { key: 'f72dda514238a1736913301a52a095f264d67d79', class: "divider" }))), index.h("div", { key: '6469027a70e22c5d80275d9816f50b351e572573', class: hasTitle ? 'popover-text with-title' : 'popover-text' }, this.content ? (index.h("p", { class: "content-text" }, this.content)) : (index.h("slot", null))))));
     }
 };
 BhPopover.style = bhPopoverCss;

package/dist/cjs/bh-popover.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
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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"}
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":["/* ==========================================================================\n BH-POPOVER COMPONENT STYLES\n ========================================================================== /\n\n:host {\n display: inline-block;\n position: relative;\n}\n\n/ Popover Wrapper /\n.popover-wrapper {\n position: absolute;\n left: 50%;\n transform: translateX(-50%); / Centers the popover horizontally /\n z-index: 1000;\n width: max-content;\n width: -webkit-max-content;\n max-width: var(--max-width, 285px);\n flex-direction: column;\n align-items: center;\n gap: 0;\n padding: 0;\n}\n\n.popover-wrapper.top {\n bottom: 100%;\n margin-bottom: 10px;\n}\n\n.popover-wrapper.bottom {\n top: 100%;\n margin-top: 10px;\n}\n\n/ Popover Content Container /\n.popover-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n gap: 0;\n border-radius: var(--radius-md, 8px);\n background-color: var(--color-white, #ffffff);\n box-shadow: var(--shadow-md);\n overflow: hidden;\n}\n\n/ ==========================================================================\n Popover Text (Default Variant)\n ========================================================================== /\n\n.popover-text {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 0;\n padding: var(--sp-3, 12px);\n}\n\n.popover-text.with-title {\n padding: var(--sp-3, 12px);\n border-radius: var(--radius-md, 8px);\n overflow: hidden;\n}\n\n.content-text {\n font-family: var(--font-family-body, 'Inter', sans-serif);\n font-size: var(--text-sm-size, 14px);\n font-weight: var(--weight-medium, 500);\n line-height: var(--text-xs-line, 18px);\n letter-spacing: 0;\n color: var(--color-neutral-600, #4a5578);\n margin: 0;\n white-space: pre-wrap;\n}\n\n/ ==========================================================================\n Popover Header (With Title Variant)\n ========================================================================== /\n\n.popover-header {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0;\n padding: 0;\n width: 100%;\n overflow: hidden;\n}\n\n.header-content {\n display: flex;\n gap: var(--sp-4, 16px);\n align-items: flex-start;\n padding: var(--sp-3, 12px);\n width: 100%;\n}\n\n.header-text {\n display: flex;\n flex-direction: column;\n flex: 1;\n gap: var(--sp-1, 4px);\n align-items: flex-start;\n min-height: 1px;\n min-width: 1px;\n padding: 0;\n}\n\n.title-text {\n font-family: var(--font-family-body, 'Inter', sans-serif);\n font-size: var(--text-sm-size, 14px);\n font-weight: var(--weight-semibold, 600);\n line-height: var(--text-sm-line, 20px);\n letter-spacing: 0;\n color: var(--color-neutral-900, #111322);\n margin: 0;\n width: 100%;\n white-space: pre-wrap;\n}\n\n/ Divider /\n.divider {\n width: 100%;\n height: 1px;\n background-color: var(--color-neutral-200, #dcdfea);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'bh-popover',\n styleUrl: 'bh-popover.css',\n shadow: true,\n})\nexport class BhPopover {\n /\n Optional title for the popover. If provided, displays \"With title\" variant\n * Named popoverTitle to avoid conflict with HTMLElement.title\n /\n @Prop() popoverTitle?: string;\n\n /\n Content text for the popover\n /\n @Prop() content?: string;\n\n /\n Maximum width of the popover\n /\n @Prop() maxWidth: string = '285px';\n\n /\n Position of the popover relative to the trigger element\n */\n @Prop() position: 'top' \| 'bottom' = 'top'; // Default to top\n\n render() {\n const hasTitle = !!this.popoverTitle;\n\n return (\n // Move the style here so it controls the entire popover window\n <div\n class={`popover-wrapper ${this.position}`}\n style={{ maxWidth: this.maxWidth }}\n >\n <div class=\"popover-content\">\n {hasTitle && (\n <div class=\"popover-header\">\n <div class=\"header-content\">\n <div class=\"header-text\">\n <p class=\"title-text\">{this.popoverTitle}</p>\n </div>\n </div>\n <div class=\"divider\"></div>\n </div>\n )}\n\n <div class={hasTitle ? 'popover-text with-title' : 'popover-text'}>\n {this.content ? (\n <p class=\"content-text\">{this.content}</p>\n ) : (\n <slot />\n )}\n </div>\n </div>\n </div>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,0vDAA0vD;;MCOlwD,SAAS,GAAA,MAAA;;;;AACpB;;;AAGG;AACK,IAAA,YAAY;AAEpB;;AAEG;AACK,IAAA,OAAO;AAEf;;AAEG;IACK,QAAQ,GAAW,OAAO;AAElC;;AAEG;AACK,IAAA,QAAQ,GAAqB,KAAK,CAAC;IAE3C,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY;QAEpC;;AAEE,QAAAA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA,CAAE,EACzC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAA,EAElCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EACzB,QAAQ,KACPA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,YAAY,CAAK,CACzC,CACF,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,CAAO,CACvB,CACP,EAEDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,QAAQ,GAAG,yBAAyB,GAAG,cAAc,EAC9D,EAAA,IAAI,CAAC,OAAO,IACXA,OAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,OAAO,CAAK,KAE1CA,OAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACT,CACG,CACF,CACF;;;;;;;"}

package/dist/cjs/bh-property-switcher.cjs.entry.js CHANGED Viewed

@@ -220,7 +220,7 @@ const BhPropertySwitcher = class {
         };
         const selectedProp = this.getSelectedProperty();
         const displayName = this.internalSelectedProperty || this.selectedProperty;
-        return (index.h(index.Host, { key: '02541bacd9b48dbf5c8939ed6b4f9a08393e788c' }, index.h("div", { key: 'cb0f6de5ee67caa19e6a7022ec89347d81dbda7e', ref: (el) => (this.switcherRef = el), class: containerClasses }, index.h("button", { key: '4fc5cd736389e8707d4c86ae319a721e685dc88a', class: "property-selector", onClick: () => this.handleToggle(), "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-label": `Property selector: ${displayName}` }, selectedProp && (index.h("span", { key: 'dfe3c36f344113c8edb18c234dc0e9d81fbed9ef', class: "material-symbols-outlined selector-icon" }, this.getPropertyIcon(selectedProp.type))), index.h("span", { key: 'e83cbe7b26f6d8b94557003da87580dd00053acc', class: "property-name" }, displayName), index.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 && (index.h("div", { key: '9c6ee765cd36535305b9236d46ba96657aeac308', class: "dropdown-panel" }, this.renderSearchInput(), index.h("div", { key: '5433d7a5ad985549a332cd7df7070d123ce98153', class: "dropdown-content" }, this.grouped
+        return (index.h(index.Host, { key: '7e3609a6aaf8106b84cf44bb14341d52577b9440' }, index.h("div", { key: 'ec38e607ef107488e0a82ff4a26f281ffb76671f', ref: (el) => (this.switcherRef = el), class: containerClasses }, index.h("button", { key: 'e6690cf6fe84ae83d918311e94216d9433447878', class: "property-selector", onClick: () => this.handleToggle(), "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-label": `Property selector: ${displayName}` }, selectedProp && (index.h("span", { key: 'f1f90104f3f3a105eeeb1ed3ea4ce9dd4b685f6a', class: "material-symbols-outlined selector-icon" }, this.getPropertyIcon(selectedProp.type))), index.h("span", { key: 'c7b8b1eeb3f7d757e5758eb8a56057f6ef0b1734', class: "property-name" }, displayName), index.h("span", { key: 'ad1e8c8d784e23a17a71b8c826d8929e3caf833d', class: "material-symbols-outlined expand-icon", "aria-label": this.isExpanded ? 'Collapse Options' : 'Expand Options' }, this.isExpanded ? 'unfold_less' : 'unfold_more')), this.isExpanded && (index.h("div", { key: '76b349f2a94edfc69a17c3c58f4b7d3c5f1e3c64', class: "dropdown-panel" }, this.renderSearchInput(), index.h("div", { key: 'a10135c8a9f3b7962045a2eda1226ea5b104470d', class: "dropdown-content" }, this.grouped
             ? this.renderGroupedView()
             : this.renderFlatView()))))));
     }

package/dist/cjs/bh-sidebar.cjs.entry.js CHANGED Viewed

@@ -15,6 +15,15 @@ const BhSidebar = class {
      * Type of logo to display
      */
     logoType = 'actabl';
+    /**
+     * Custom logo source URL. If provided, overrides the default logo path.
+     */
+    logoSrc;
+    /**
+     * Base path for asset URLs. Useful for CDN usage.
+     * @example "https://cdn.jsdelivr.net/npm/@actabldesign/bellhop-assets@0.0.7"
+     */
+    assetBasePath;
     /**
      * Avatar image URL
      */
@@ -101,7 +110,7 @@ const BhSidebar = class {
             { id: '12', divider: true },
             { id: '13', label: 'Sign out', icon: 'logout', shortcut: '⇧⌘Q' },
         ];
-        return (index.h(index.Host, { key: '8ea6a230d0b50bac6868a43f2f4c3b4cb89f147d' }, index.h("div", { key: '152c63b3a7a61ea13ca78b05ef3077b135cc4638', class: sidebarClasses }, index.h("div", { key: '13fdf8adc8c29bf947a43ab05b4cbd67bab9bc82', class: "navigation" }, index.h("div", { key: 'fd4960f7b232bdfff7bb80d98f718d5bdeddd5a3', class: "gradient-bar" }, index.h("div", { key: '5304c3a6b81a9941491105233770977c64e06586', class: "detail-bar" })), index.h("div", { key: '000cad8051add1dbabfe2454579c22ffa371ebc0', class: "sidebar-content" }, index.h("bh-logo-box", { key: 'ca59b066c4d1053824443a8dd63702d285a66b7c', logoType: this.logoType }), index.h("div", { key: 'a8b8fc37101b5a8ad83c309dbbf8dbd45b9227f9', class: "navigation-section" }, index.h("div", { key: '10dda65730b5c23d2a13f0a27636192da1c9b21a', class: "search-container" }, index.h("bh-button-icon", { key: '52379a2f1fbf04ff494e7cff1b33aca99ce809fb', hierarchy: "secondary", size: "sm", iconName: "search", onClick: this.handleSearchClick })), index.h("div", { key: '85b26cfcd1b91e4d96be801e654acba45f3649a5', class: "nav-items" }, this.menuItems.map((item) => (index.h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: this.activeItem === item.label, onBhClick: () => this.handleNavItemClick(item.label) }))))), index.h("div", { key: '82647befc09ce326032e6b034189180e826fb7f6', class: "sidebar-footer" }, index.h("div", { key: '0d8a12f59003ff31b97430ccc017fdd9bfa6636f', class: "footer-navigation" }, this.footerItems.map((item) => (index.h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: false, onBhClick: () => this.handleNavItemClick(item.label) })))), index.h("bh-dropdown", { key: '4016dd4b427aba6b25d8f1d7e04c90236a97d28a', variant: "avatar", size: "md", avatarSize: "md", avatarSrc: this.avatarUrl, avatarName: this.avatarName, avatarEmail: this.avatarEmail, menuItems: avatarMenuItems, showIcons: true, onBhItemClick: this.handleAvatarMenuClick })))))));
+        return (index.h(index.Host, { key: 'a691fab176445fef65c964390d5277f41b0a6989' }, index.h("div", { key: '99bb35a4e97512d3cf973e6ed73baf44a0a9e71d', class: sidebarClasses }, index.h("div", { key: '74c23339a793aa9e16b9da18f7aa522d8f6b200e', class: "navigation" }, index.h("div", { key: '24e19625c3a9673881bf9b43a37d159250a516b0', class: "gradient-bar" }, index.h("div", { key: '8fbed7913283af8e79f3eea81d074631bb9362d3', class: "detail-bar" })), index.h("div", { key: 'a0063e7c8ca350d68ce51123e60d7783c0fac205', class: "sidebar-content" }, index.h("bh-logo-box", { key: 'cc95c2c8b47d13a2ead0dc412d4cc78ec8493c96', logoType: this.logoType, logoSrc: this.logoSrc, assetBasePath: this.assetBasePath }), index.h("div", { key: 'd58db9cca5be94792b6c7d8894736ba892a567c7', class: "navigation-section" }, index.h("div", { key: '0fabbe81f1f9caf658206cfaed30d712fbdb80a0', class: "search-container" }, index.h("bh-button-icon", { key: '5b57dc0af93d7012c61e4af2e4bd9e0a65d361cd', hierarchy: "secondary", size: "sm", iconName: "search", onClick: this.handleSearchClick })), index.h("div", { key: '11ce9862b88cbc7a416b7ff2005017cb8235d254', class: "nav-items" }, this.menuItems.map((item) => (index.h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: this.activeItem === item.label, onBhClick: () => this.handleNavItemClick(item.label) }))))), index.h("div", { key: '8f5e98d9a323da0db57a4e0d972d37fb6f6668d3', class: "sidebar-footer" }, index.h("div", { key: '605a964cee526b95b41080e6914ca58b8ab7dbd1', class: "footer-navigation" }, this.footerItems.map((item) => (index.h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: false, onBhClick: () => this.handleNavItemClick(item.label) })))), index.h("bh-dropdown", { key: '0d6026fcbe9fa91e202743beafed2137a7685b8c', variant: "avatar", size: "md", avatarSize: "md", avatarSrc: this.avatarUrl, avatarName: this.avatarName, avatarEmail: this.avatarEmail, menuItems: avatarMenuItems, showIcons: true, onBhItemClick: this.handleAvatarMenuClick })))))));
     }
 };
 BhSidebar.style = bhSidebarCss;

package/dist/cjs/bh-sidebar.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bh-sidebar.entry.cjs.js","sources":["src/components/bh-sidebar/bh-sidebar.css?tag=bh-sidebar&encapsulation=shadow","src/components/bh-sidebar/bh-sidebar.tsx"],"sourcesContent":["/* ==========================================================================\n SIDEBAR COMPONENT\n Vertical navigation sidebar with gradient bar\n ========================================================================== /\n\n.sidebar-container {\n width: fit-content;\n height: 100vh;\n background-color: var(--color-white);\n position: relative;\n display: flex;\n}\n\n.navigation {\n background-color: var(--color-white);\n display: flex;\n height: 100%;\n align-items: flex-start;\n justify-content: flex-start;\n position: relative;\n border-right: 1px solid var(--color-neutral-200);\n z-index: 100;\n}\n\n/ Gradient bar on the left edge /\n.gradient-bar {\n position: relative;\n width: var(--spacing-xs);\n height: 100%;\n flex-shrink: 0;\n}\n\n.detail-bar {\n position: absolute;\n background: linear-gradient(\n 180deg,\n var(--color-accent-300) 0%,\n var(--color-brand-400) 51%,\n var(--color-brand-800) 100%\n );\n inset: 0;\n}\n\n/ Main sidebar content /\n.sidebar-content {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2xl);\n height: 100%;\n align-items: center;\n justify-content: flex-start;\n padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg)\n var(--spacing-md);\n position: relative;\n flex-shrink: 0;\n width: 60px;\n}\n\n/ Navigation section that contains search and nav items /\n.navigation-section {\n flex: 1 1 0%;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xl);\n flex-grow: 1;\n align-items: center;\n justify-content: flex-start;\n min-height: 0;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/ Search container /\n.search-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n/ Nav items container /\n.nav-items {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs);\n align-items: center;\n justify-content: flex-start;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n/ Footer section with footer nav and avatar /\n.sidebar-footer {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-lg);\n align-items: center;\n justify-content: end;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n.footer-navigation {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs);\n align-items: center;\n justify-content: center;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n/ Collapsed state /\n.sidebar-collapsed .sidebar-content {\n width: 60px;\n}\n\n.sidebar-collapsed .nav-item-label {\n display: none;\n}\n\n/ Scrollbar styling for navigation section /\n.navigation-section::-webkit-scrollbar {\n width: 4px;\n}\n\n.navigation-section::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.navigation-section::-webkit-scrollbar-thumb {\n background: var(--color-neutral-200);\n border-radius: var(--radius-xs);\n}\n\n.navigation-section::-webkit-scrollbar-thumb:hover {\n background: var(--color-neutral-300);\n}\n\n/ Firefox scrollbar /\n.navigation-section {\n scrollbar-width: thin;\n scrollbar-color: var(--color-neutral-200) transparent;\n}\n\n/ Expanded state (optional future enhancement) /\n.sidebar-expanded .sidebar-content {\n width: 240px;\n}\n\n.sidebar-expanded .nav-items {\n align-items: flex-start;\n}\n\n.sidebar-expanded .nav-item {\n width: 100%;\n flex-direction: row;\n justify-content: flex-start;\n gap: var(--spacing-md);\n}\n\n.sidebar-expanded .nav-item-label {\n display: block;\n text-align: left;\n font-size: var(--text-sm-size);\n height: auto;\n line-height: var(--text-sm-line);\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Host } from '@stencil/core';\nimport { LogoType } from '../bh-logo-box/bh-logo-box';\n\nexport interface MenuItem {\n label: string;\n icon: string;\n isActive?: boolean;\n}\n\nexport interface FooterItem {\n label: string;\n icon: string;\n}\n\nexport interface DropdownMenuItem {\n id: string;\n label?: string;\n icon?: string;\n shortcut?: string;\n divider?: boolean;\n}\n\n@Component({\n tag: 'bh-sidebar',\n styleUrl: 'bh-sidebar.css',\n shadow: true,\n})\nexport class BhSidebar {\n /\n Type of logo to display\n /\n @Prop() logoType: LogoType = 'actabl';\n\n /\n Avatar image URL\n /\n @Prop() avatarUrl?: string;\n\n /\n Avatar initials (used if avatarUrl is not provided)\n /\n @Prop() avatarInitials: string = 'DM';\n\n /\n Avatar name for dropdown\n /\n @Prop() avatarName: string = 'Daniel Mobara';\n\n /\n Avatar email for dropdown\n /\n @Prop() avatarEmail: string = 'daniel@solsticehospitality.com';\n\n /\n Main menu navigation items\n /\n @Prop() menuItems: MenuItem[] = [\n { label: 'Dashboard', icon: 'dashboard', isActive: true },\n { label: 'Analytics', icon: 'analytics', isActive: false },\n { label: 'Reports', icon: 'assessment', isActive: false },\n { label: 'Calendar', icon: 'calendar_today', isActive: false },\n { label: 'Messages', icon: 'message', isActive: false },\n { label: 'Contacts', icon: 'contacts', isActive: false },\n { label: 'Files', icon: 'folder', isActive: false },\n ];\n\n /\n Footer navigation items\n /\n @Prop() footerItems: FooterItem[] = [\n { label: 'Help', icon: 'help_outline' },\n { label: 'Settings', icon: 'settings' },\n ];\n\n /\n Whether sidebar is collapsed\n /\n @Prop() collapsed: boolean = false;\n\n /\n Event emitted when a menu item is clicked\n /\n @Event() bhMenuItemClick!: EventEmitter<string>;\n\n /\n Event emitted when search button is clicked\n /\n @Event() bhSearchClick!: EventEmitter<void>;\n\n /\n Event emitted when avatar menu item is clicked\n /\n @Event() bhAvatarMenuClick!: EventEmitter<DropdownMenuItem>;\n\n @State() activeItem: string = '';\n\n componentWillLoad() {\n const activeMenuItem = this.menuItems.find(item => item.isActive);\n this.activeItem = activeMenuItem?.label \|\| '';\n }\n\n private handleNavItemClick = (label: string) => {\n this.activeItem = label;\n this.bhMenuItemClick.emit(label);\n };\n\n private handleSearchClick = () => {\n this.bhSearchClick.emit();\n };\n\n private handleAvatarMenuClick = (event: CustomEvent<DropdownMenuItem>) => {\n this.bhAvatarMenuClick.emit(event.detail);\n };\n\n render() {\n const sidebarClasses = {\n 'sidebar-container': true,\n 'sidebar-collapsed': this.collapsed,\n };\n\n const avatarMenuItems: DropdownMenuItem[] = [\n { id: '1', label: 'View profile', icon: 'person', shortcut: '⌘P' },\n { id: '2', label: 'Account settings', icon: 'settings', shortcut: '⌘,' },\n { id: '3', label: 'Notifications', icon: 'notifications', shortcut: '⌘N' },\n { id: '4', label: 'Privacy & Security', icon: 'shield', shortcut: '⌘S' },\n { id: '5', divider: true },\n { id: '6', label: 'Billing', icon: 'credit_card', shortcut: '⌘B' },\n { id: '7', label: 'Team management', icon: 'group', shortcut: '⌘T' },\n { id: '8', label: 'Integrations', icon: 'extension', shortcut: '⌘I' },\n { id: '9', divider: true },\n { id: '10', label: 'Help center', icon: 'help', shortcut: '⌘H' },\n { id: '11', label: 'Keyboard shortcuts', icon: 'keyboard', shortcut: '?' },\n { id: '12', divider: true },\n { id: '13', label: 'Sign out', icon: 'logout', shortcut: '⇧⌘Q' },\n ];\n\n return (\n <Host>\n <div class={sidebarClasses}>\n <div class=\"navigation\">\n {/ Gradient bar /}\n <div class=\"gradient-bar\">\n <div class=\"detail-bar\"></div>\n </div>\n\n {/ Main content /}\n <div class=\"sidebar-content\">\n {/ Logo box /}\n <bh-logo-box logoType={this.logoType}></bh-logo-box>\n\n {/ Navigation section /}\n <div class=\"navigation-section\">\n {/ Search /}\n <div class=\"search-container\">\n <bh-button-icon\n hierarchy=\"secondary\"\n size=\"sm\"\n iconName=\"search\"\n onClick={this.handleSearchClick}\n ></bh-button-icon>\n </div>\n\n {/ Nav items /}\n <div class=\"nav-items\">\n {this.menuItems.map((item) => (\n <bh-nav-item\n key={item.label}\n icon={item.icon}\n label={item.label}\n isActive={this.activeItem === item.label}\n onBhClick={() => this.handleNavItemClick(item.label)}\n ></bh-nav-item>\n ))}\n </div>\n </div>\n\n {/ Footer /}\n <div class=\"sidebar-footer\">\n <div class=\"footer-navigation\">\n {this.footerItems.map((item) => (\n <bh-nav-item\n key={item.label}\n icon={item.icon}\n label={item.label}\n isActive={false}\n onBhClick={() => this.handleNavItemClick(item.label)}\n ></bh-nav-item>\n ))}\n </div>\n\n {/ Avatar Dropdown */}\n <bh-dropdown\n variant=\"avatar\"\n size=\"md\"\n avatarSize=\"md\"\n avatarSrc={this.avatarUrl}\n avatarName={this.avatarName}\n avatarEmail={this.avatarEmail}\n menuItems={avatarMenuItems}\n showIcons={true}\n onBhItemClick={this.handleAvatarMenuClick}\n ></bh-dropdown>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":"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"}
1	+ {"version":3,"file":"bh-sidebar.entry.cjs.js","sources":["src/components/bh-sidebar/bh-sidebar.css?tag=bh-sidebar&encapsulation=shadow","src/components/bh-sidebar/bh-sidebar.tsx"],"sourcesContent":["/* ==========================================================================\n SIDEBAR COMPONENT\n Vertical navigation sidebar with gradient bar\n ========================================================================== /\n\n.sidebar-container {\n width: fit-content;\n height: 100vh;\n background-color: var(--color-white);\n position: relative;\n display: flex;\n}\n\n.navigation {\n background-color: var(--color-white);\n display: flex;\n height: 100%;\n align-items: flex-start;\n justify-content: flex-start;\n position: relative;\n border-right: 1px solid var(--color-neutral-200);\n z-index: 100;\n}\n\n/ Gradient bar on the left edge /\n.gradient-bar {\n position: relative;\n width: var(--spacing-xs);\n height: 100%;\n flex-shrink: 0;\n}\n\n.detail-bar {\n position: absolute;\n background: linear-gradient(\n 180deg,\n var(--color-accent-300) 0%,\n var(--color-brand-400) 51%,\n var(--color-brand-800) 100%\n );\n inset: 0;\n}\n\n/ Main sidebar content /\n.sidebar-content {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2xl);\n height: 100%;\n align-items: center;\n justify-content: flex-start;\n padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg)\n var(--spacing-md);\n position: relative;\n flex-shrink: 0;\n width: 60px;\n}\n\n/ Navigation section that contains search and nav items /\n.navigation-section {\n flex: 1 1 0%;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xl);\n flex-grow: 1;\n align-items: center;\n justify-content: flex-start;\n min-height: 0;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/ Search container /\n.search-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n/ Nav items container /\n.nav-items {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs);\n align-items: center;\n justify-content: flex-start;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n/ Footer section with footer nav and avatar /\n.sidebar-footer {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-lg);\n align-items: center;\n justify-content: end;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n.footer-navigation {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs);\n align-items: center;\n justify-content: center;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n}\n\n/ Collapsed state /\n.sidebar-collapsed .sidebar-content {\n width: 60px;\n}\n\n.sidebar-collapsed .nav-item-label {\n display: none;\n}\n\n/ Scrollbar styling for navigation section /\n.navigation-section::-webkit-scrollbar {\n width: 4px;\n}\n\n.navigation-section::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.navigation-section::-webkit-scrollbar-thumb {\n background: var(--color-neutral-200);\n border-radius: var(--radius-xs);\n}\n\n.navigation-section::-webkit-scrollbar-thumb:hover {\n background: var(--color-neutral-300);\n}\n\n/ Firefox scrollbar /\n.navigation-section {\n scrollbar-width: thin;\n scrollbar-color: var(--color-neutral-200) transparent;\n}\n\n/ Expanded state (optional future enhancement) /\n.sidebar-expanded .sidebar-content {\n width: 240px;\n}\n\n.sidebar-expanded .nav-items {\n align-items: flex-start;\n}\n\n.sidebar-expanded .nav-item {\n width: 100%;\n flex-direction: row;\n justify-content: flex-start;\n gap: var(--spacing-md);\n}\n\n.sidebar-expanded .nav-item-label {\n display: block;\n text-align: left;\n font-size: var(--text-sm-size);\n height: auto;\n line-height: var(--text-sm-line);\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Host } from '@stencil/core';\nimport { LogoType } from '../bh-logo-box/bh-logo-box';\n\nexport interface MenuItem {\n label: string;\n icon: string;\n isActive?: boolean;\n}\n\nexport interface FooterItem {\n label: string;\n icon: string;\n}\n\nexport interface DropdownMenuItem {\n id: string;\n label?: string;\n icon?: string;\n shortcut?: string;\n divider?: boolean;\n}\n\n@Component({\n tag: 'bh-sidebar',\n styleUrl: 'bh-sidebar.css',\n shadow: true,\n})\nexport class BhSidebar {\n /\n Type of logo to display\n /\n @Prop() logoType: LogoType = 'actabl';\n\n /\n Custom logo source URL. If provided, overrides the default logo path.\n /\n @Prop() logoSrc?: string;\n\n /\n Base path for asset URLs. Useful for CDN usage.\n * @example \"https://cdn.jsdelivr.net/npm/@actabldesign/bellhop-assets@0.0.7\"\n /\n @Prop() assetBasePath?: string;\n\n /\n Avatar image URL\n /\n @Prop() avatarUrl?: string;\n\n /\n Avatar initials (used if avatarUrl is not provided)\n /\n @Prop() avatarInitials: string = 'DM';\n\n /\n Avatar name for dropdown\n /\n @Prop() avatarName: string = 'Daniel Mobara';\n\n /\n Avatar email for dropdown\n /\n @Prop() avatarEmail: string = 'daniel@solsticehospitality.com';\n\n /\n Main menu navigation items\n /\n @Prop() menuItems: MenuItem[] = [\n { label: 'Dashboard', icon: 'dashboard', isActive: true },\n { label: 'Analytics', icon: 'analytics', isActive: false },\n { label: 'Reports', icon: 'assessment', isActive: false },\n { label: 'Calendar', icon: 'calendar_today', isActive: false },\n { label: 'Messages', icon: 'message', isActive: false },\n { label: 'Contacts', icon: 'contacts', isActive: false },\n { label: 'Files', icon: 'folder', isActive: false },\n ];\n\n /\n Footer navigation items\n /\n @Prop() footerItems: FooterItem[] = [\n { label: 'Help', icon: 'help_outline' },\n { label: 'Settings', icon: 'settings' },\n ];\n\n /\n Whether sidebar is collapsed\n /\n @Prop() collapsed: boolean = false;\n\n /\n Event emitted when a menu item is clicked\n /\n @Event() bhMenuItemClick!: EventEmitter<string>;\n\n /\n Event emitted when search button is clicked\n /\n @Event() bhSearchClick!: EventEmitter<void>;\n\n /\n Event emitted when avatar menu item is clicked\n /\n @Event() bhAvatarMenuClick!: EventEmitter<DropdownMenuItem>;\n\n @State() activeItem: string = '';\n\n componentWillLoad() {\n const activeMenuItem = this.menuItems.find(item => item.isActive);\n this.activeItem = activeMenuItem?.label \|\| '';\n }\n\n private handleNavItemClick = (label: string) => {\n this.activeItem = label;\n this.bhMenuItemClick.emit(label);\n };\n\n private handleSearchClick = () => {\n this.bhSearchClick.emit();\n };\n\n private handleAvatarMenuClick = (event: CustomEvent<DropdownMenuItem>) => {\n this.bhAvatarMenuClick.emit(event.detail);\n };\n\n render() {\n const sidebarClasses = {\n 'sidebar-container': true,\n 'sidebar-collapsed': this.collapsed,\n };\n\n const avatarMenuItems: DropdownMenuItem[] = [\n { id: '1', label: 'View profile', icon: 'person', shortcut: '⌘P' },\n { id: '2', label: 'Account settings', icon: 'settings', shortcut: '⌘,' },\n { id: '3', label: 'Notifications', icon: 'notifications', shortcut: '⌘N' },\n { id: '4', label: 'Privacy & Security', icon: 'shield', shortcut: '⌘S' },\n { id: '5', divider: true },\n { id: '6', label: 'Billing', icon: 'credit_card', shortcut: '⌘B' },\n { id: '7', label: 'Team management', icon: 'group', shortcut: '⌘T' },\n { id: '8', label: 'Integrations', icon: 'extension', shortcut: '⌘I' },\n { id: '9', divider: true },\n { id: '10', label: 'Help center', icon: 'help', shortcut: '⌘H' },\n { id: '11', label: 'Keyboard shortcuts', icon: 'keyboard', shortcut: '?' },\n { id: '12', divider: true },\n { id: '13', label: 'Sign out', icon: 'logout', shortcut: '⇧⌘Q' },\n ];\n\n return (\n <Host>\n <div class={sidebarClasses}>\n <div class=\"navigation\">\n {/ Gradient bar /}\n <div class=\"gradient-bar\">\n <div class=\"detail-bar\"></div>\n </div>\n\n {/ Main content /}\n <div class=\"sidebar-content\">\n {/ Logo box /}\n <bh-logo-box\n logoType={this.logoType}\n logoSrc={this.logoSrc}\n assetBasePath={this.assetBasePath}\n ></bh-logo-box>\n\n {/ Navigation section /}\n <div class=\"navigation-section\">\n {/ Search /}\n <div class=\"search-container\">\n <bh-button-icon\n hierarchy=\"secondary\"\n size=\"sm\"\n iconName=\"search\"\n onClick={this.handleSearchClick}\n ></bh-button-icon>\n </div>\n\n {/ Nav items /}\n <div class=\"nav-items\">\n {this.menuItems.map((item) => (\n <bh-nav-item\n key={item.label}\n icon={item.icon}\n label={item.label}\n isActive={this.activeItem === item.label}\n onBhClick={() => this.handleNavItemClick(item.label)}\n ></bh-nav-item>\n ))}\n </div>\n </div>\n\n {/ Footer /}\n <div class=\"sidebar-footer\">\n <div class=\"footer-navigation\">\n {this.footerItems.map((item) => (\n <bh-nav-item\n key={item.label}\n icon={item.icon}\n label={item.label}\n isActive={false}\n onBhClick={() => this.handleNavItemClick(item.label)}\n ></bh-nav-item>\n ))}\n </div>\n\n {/ Avatar Dropdown */}\n <bh-dropdown\n variant=\"avatar\"\n size=\"md\"\n avatarSize=\"md\"\n avatarSrc={this.avatarUrl}\n avatarName={this.avatarName}\n avatarEmail={this.avatarEmail}\n menuItems={avatarMenuItems}\n showIcons={true}\n onBhItemClick={this.handleAvatarMenuClick}\n ></bh-dropdown>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/bh-tab-item.cjs.entry.js CHANGED Viewed

@@ -41,11 +41,11 @@ const BhTabItem = class {
             'tab-button-active': this.active,
             'tab-button-disabled': this.disabled,
         };
-        return (index.h(index.Host, { key: 'ef47c62d9595bb0f5648bacb3d4c8e1585d35a91', class: {
+        return (index.h(index.Host, { key: '4ad8e3e786f4a4c8a2c38e518e66ef2ded4c04ca', class: {
                 'tab-item': true,
                 'tab-item-active': this.active,
                 'tab-item-disabled': this.disabled,
-            } }, index.h("button", { key: 'a2e2130bc0cb369c456b9898732cd90350b69a79', class: buttonClasses, part: "button", role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', disabled: this.disabled, onClick: this.handleClick, type: "button" }, index.h("span", { key: '2c415f19e1901e3d36039b5960b8ba80dd58d545', class: "tab-label", part: "label" }, this.label), index.h("slot", { key: 'd4484b4a489ddd7babdfba449e023370ae9aaea5' }))));
+            } }, index.h("button", { key: 'b149a3ed3cdd49e887545281a5f9a1383443aeca', class: buttonClasses, part: "button", role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', disabled: this.disabled, onClick: this.handleClick, type: "button" }, index.h("span", { key: '03f58f2761a021310a6cd2f811795dbc95e02ea1', class: "tab-label", part: "label" }, this.label), index.h("slot", { key: 'd96a82e89d9d7c64d1f17c65da4a47f4774ed96a' }))));
     }
 };
 BhTabItem.style = bhTabItemCss;

package/dist/cjs/bh-tabs.cjs.entry.js CHANGED Viewed

@@ -43,7 +43,7 @@ const BhTabs = class {
             [`tabs-${this.orientation}`]: true,
             'tabs-full-width': this.fullWidth,
         };
-        return (index.h(index.Host, { key: '93b74ceb1d093513ff2d5a167e3de238209411a4', class: hostClasses }, index.h("div", { key: '290c0e7ce4d1ae84e566237a122786e305522b9f', class: "tabs-container", part: "container" }, index.h("div", { key: '424276b73c8279c24441a389026c0c7db25e55b1', class: "tabs-list", part: "list", role: "tablist", "aria-orientation": this.orientation }, index.h("slot", { key: 'fe8030d885237dccbef3d1a70bc912c338b038c6' })))));
+        return (index.h(index.Host, { key: '915fc9dbab57751d9f6f862e368463a5b50fa30e', class: hostClasses }, index.h("div", { key: 'c552c2792097fb3bf1e619c992820bdce072e3ba', class: "tabs-container", part: "container" }, index.h("div", { key: 'd8b13f39e97ab56717715ef314be003ed7427d2c', class: "tabs-list", part: "list", role: "tablist", "aria-orientation": this.orientation }, index.h("slot", { key: '665f02ddebaa32b818c4d2b627e15eb878a09a30' })))));
     }
 };
 BhTabs.style = bhTabsCss;

package/dist/cjs/bh-textarea.cjs.entry.js CHANGED Viewed

@@ -151,7 +151,7 @@ const BhTextarea = class {
             'textarea': true,
             'textarea-error': this.error,
         };
-        return (index.h("div", { key: 'a822380cef2104a61c1a8f2f79900b9ed9c12063', class: "textarea-wrapper", part: "wrapper" }, index.h("bh-label", { key: 'd8c77f1ddc75f6b42bc47bb8086ada57ca1c3e35', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, index.h("div", { key: '6d92f1c3a0f34729c24677c2a071559b5e7d527f', class: containerClasses }, index.h("div", { key: '9ac271fe196de95b9460eea3bf3cbfd1fd768c13', class: "textarea-content" }, index.h("textarea", { key: '1900eb1a188165ef624a41de391b5d0648d1b8b4', ref: (el) => (this.textareaEl = el), class: textareaClasses, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, rows: this.rows, maxLength: this.maxLength, style: { resize: this.resize }, "aria-label": this.label, "aria-describedby": this.showHintText && this.hintText ? 'hint-text' : undefined, "aria-invalid": String(this.error), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "textarea" })))), this.showHintText && this.hintText && (index.h("div", { key: '2733112bfee45f11e13d92631c5f17518634030b', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
+        return (index.h("div", { key: '3ba4ab7f69578f22fce54ccb4d5155410666ab09', class: "textarea-wrapper", part: "wrapper" }, index.h("bh-label", { key: '745029c57459ed19f51b434913d6a05f549237f4', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, index.h("div", { key: '0fb037fb570636815a56512170f328b398d9160b', class: containerClasses }, index.h("div", { key: '45608d2ef2fe516cc73c6a0a55b8ed206dd619be', class: "textarea-content" }, index.h("textarea", { key: '1fbf1ce8dff28f1d1350a7ce8bd4197a8fd1371e', ref: (el) => (this.textareaEl = el), class: textareaClasses, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, rows: this.rows, maxLength: this.maxLength, style: { resize: this.resize }, "aria-label": this.label, "aria-describedby": this.showHintText && this.hintText ? 'hint-text' : undefined, "aria-invalid": String(this.error), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "textarea" })))), this.showHintText && this.hintText && (index.h("div", { key: '846989dc96f482b76fdb6c11707568b38217782c', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
     }
     static get formAssociated() { return true; }
 };

package/dist/cjs/bh-toggle.cjs.entry.js CHANGED Viewed

@@ -131,7 +131,7 @@ const BhToggle = class {
             'toggle-label': true,
             [`toggle-label-${this.size}`]: true,
         };
-        return (index.h("div", { key: 'd07f9c9302c21ab8ecd3e515fe3f1794c2d689b5', class: wrapperClasses, part: "wrapper" }, index.h("div", { key: 'cfb224564cd11c8dacbf9c2426329acc96b703bd', class: switchClasses, onClick: this.handleToggle, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label || undefined, part: "switch" }, index.h("div", { key: '3e120ce6b54cca6bf06b49ad78784b8f44c5221a', class: buttonClasses, part: "button" })), this.showText && (this.label || this.supportingText) && (index.h("div", { key: 'a4feeb01f7188d35f7871e27cebfb65e72ce580d', class: "toggle-text" }, this.label && (index.h("span", { key: 'dfa097818d779cc768cde6972c0618c26fca10fa', class: labelClasses }, this.label)), this.supportingText && (index.h("div", { key: '332221a6cee6770d1b4026076a35bb6ff53054b1', class: "toggle-supporting-text" }, this.supportingText))))));
+        return (index.h("div", { key: '3ca94d9e9e457008c1b62aa8a0c76ad4823ceb6d', class: wrapperClasses, part: "wrapper" }, index.h("div", { key: 'c7eb0b84e8deb15e3bc9b547992cb465f3dac3f2', class: switchClasses, onClick: this.handleToggle, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label || undefined, part: "switch" }, index.h("div", { key: 'fbdf8fcdacba58134258f6a1dd84f302149a0396', class: buttonClasses, part: "button" })), this.showText && (this.label || this.supportingText) && (index.h("div", { key: '7bd7f0fb7a5305d2c05d3277e2a6ee6d8c10a0b1', class: "toggle-text" }, this.label && (index.h("span", { key: 'a31d48b6dc2ad837be4c3c0f386720e64f0a8715', class: labelClasses }, this.label)), this.supportingText && (index.h("div", { key: '384b2c7b34396fc3da3ba51c96afe2d74c6de096', class: "toggle-supporting-text" }, this.supportingText))))));
     }
     static get formAssociated() { return true; }
 };

package/dist/cjs/bh-trend-chart.cjs.entry.js CHANGED Viewed

@@ -107,12 +107,12 @@ const BhTrendChart = class {
         const strokeColor = this.getStrokeColor();
         const fillColor = this.getFillColor();
         const gradientId = `gradient-${this.trend}`;
-        return (index.h(index.Host, { key: '91f405355ae70923836b9d9e102cbe65421bef39' }, index.h("div", { key: '9f90f66d9ed904c74e1eb7fd2732ad3d32837eff', class: {
+        return (index.h(index.Host, { key: 'a9ae3f68d2c392e6f091629213174150677ed800' }, index.h("div", { key: '2da0f0cb39c640ebc9d742217640165b4ded870a', class: {
                 'trend-chart': true,
                 [`trend-chart-${this.trend}`]: true,
                 [`trend-chart-${this.variant}`]: true,
                 'trend-chart-animated': this.animated,
-            } }, index.h("svg", { key: '09ac67cf6b1d2e86f1551cc519963fcd826293b5', width: this.width, height: this.height, viewBox: `0 0 ${this.width} ${this.height}`, class: "chart-svg" }, index.h("defs", { key: 'cf3cfe308c1582c27798e2a2b63dd37a9f9452c8' }, index.h("linearGradient", { key: '805e2c9765638b0f872871df8444784297b8d7a1', id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%" }, index.h("stop", { key: '88b695ba07624d062cead0dfea06e984b742bc82', offset: "0%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.4 : 0.2 }), index.h("stop", { key: 'b8e060f9d822042766647ae602121d2fd7e1fa8d', offset: "100%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.1 : 0.05 }))), backgroundPath && this.variant !== 'line-only' && (index.h("path", { key: '1866ab67357c0c2fe4c4cda0c0a571a8a0493af4', class: "chart-background", d: backgroundPath, fill: `url(#${gradientId})` })), pathData && this.variant !== 'fill-only' && (index.h("path", { key: '687052b87f652430caae40ac126b69cd2f30e9bc', class: "chart-line", d: pathData, stroke: strokeColor, "stroke-width": "2", fill: "none" }))))));
+            } }, index.h("svg", { key: 'b348daecc48805aa49e2dfc620998ae0f5747d6d', width: this.width, height: this.height, viewBox: `0 0 ${this.width} ${this.height}`, class: "chart-svg" }, index.h("defs", { key: '4c30e217105760d1034116463d2bd50e617fdc5b' }, index.h("linearGradient", { key: 'a58346f9dc4832157c4a1b7dab6df6672e9e110b', id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%" }, index.h("stop", { key: 'ed3025b5a594bf8e8c9f615c65e0841847625800', offset: "0%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.4 : 0.2 }), index.h("stop", { key: 'e6b9c70c81fd46a9798161964ebf9d30695461ed', offset: "100%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.1 : 0.05 }))), backgroundPath && this.variant !== 'line-only' && (index.h("path", { key: 'b474572963d12be707798d0ccdf36af2cd74a19d', class: "chart-background", d: backgroundPath, fill: `url(#${gradientId})` })), pathData && this.variant !== 'fill-only' && (index.h("path", { key: '11044ee1046cc575479d1a3f5d30c70342111054', class: "chart-line", d: pathData, stroke: strokeColor, "stroke-width": "2", fill: "none" }))))));
     }
 };
 BhTrendChart.style = bhTrendChartCss;