@actabldesign/bellhop-core 0.0.3

package/components/bh-property-switcher.js

@@ -0,0 +1,261 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-9a7sQzad.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$1 = /*@__PURE__*/ proxyCustomElement(class BhPropertySwitcher extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        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: 'acbc21dd3af3bfe9fef74a34e89c212cd74751c5' }, h("div", { key: '39b5a9e97a2858534f11a37dc0f3a5ba92159337', ref: (el) => (this.switcherRef = el), class: containerClasses }, h("button", { key: 'c145f14ca4171755e1487a4aa4c411fd6b871d55', class: "property-selector", onClick: () => this.handleToggle(), "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-label": `Property selector: ${displayName}` }, selectedProp && (h("span", { key: '028e958900c9091f67df8e2262fc0e62f8b76f1f', class: "material-symbols-outlined selector-icon" }, this.getPropertyIcon(selectedProp.type))), h("span", { key: 'd6838a7ec2abdb24b31dd720e6c6ed3eff80213a', class: "property-name" }, displayName), h("span", { key: '17de4b63b32f9309008897a25e81a4c5c5126fa7', 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: 'e53dc331066b4999dcc132b8ace1f24fc48b79b8', class: "dropdown-panel" }, this.renderSearchInput(), h("div", { key: 'b6b591d56b4bd04452298d145029e4bc150c1537', class: "dropdown-content" }, this.grouped
+            ? this.renderGroupedView()
+            : this.renderFlatView()))))));
+    }
+    static get style() { return bhPropertySwitcherCss; }
+}, [769, "bh-property-switcher", {
+        "selectedProperty": [1, "selected-property"],
+        "properties": [16],
+        "grouped": [4],
+        "searchPlaceholder": [1, "search-placeholder"],
+        "isExpanded": [32],
+        "searchQuery": [32],
+        "expandedGroups": [32],
+        "internalSelectedProperty": [32]
+    }, [[4, "click", "handleDocumentClick"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-property-switcher"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-property-switcher":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhPropertySwitcher$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhPropertySwitcher = BhPropertySwitcher$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhPropertySwitcher, defineCustomElement };
+//# sourceMappingURL=bh-property-switcher.js.map
+
+//# sourceMappingURL=bh-property-switcher.js.map

package/components/bh-property-switcher.js.map

@@ -0,0 +1 @@
+{"file":"bh-property-switcher.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,i2KAAi2K;;MC2Bl3KA,oBAAkB,iBAAAC,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAC7B;;AAEG;IACK,gBAAgB,GAAW,mBAAmB;AAEtD;;AAEG;IACK,UAAU,GAAqB,EAAE;AAEzC;;AAEG;IACK,OAAO,GAAY,KAAK;AAEhC;;AAEG;IACK,iBAAiB,GAAW,sBAAsB;AAE1D;;AAEG;AACM,IAAA,gBAAgB;IAEhB,UAAU,GAAY,KAAK;IAC3B,WAAW,GAAW,EAAE;AACxB,IAAA,cAAc,GAAgB,IAAI,GAAG,EAAE;IACvC,wBAAwB,GAAW,EAAE;AAEtC,IAAA,WAAW;AACX,IAAA,cAAc;IAEtB,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,gBAAgB;;AAIvD,IAAA,mBAAmB,CAAC,KAAiB,EAAA;AACnC,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB;;;AAIF,QAAA,MAAM,aAAa,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAkB,CAAC;QAE5E,IAAI,CAAC,aAAa,EAAE;AAClB,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;;;IAInB,YAAY,GAAG,MAAK;AAC1B,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU;AAClC,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,IAAI,CAAC,WAAW,GAAG,EAAE;;AAErB,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,gBAAA,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,EAAE;AACvC,gBAAA,IAAI,CAAC,cAAc,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;;;YAGtD,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,oBAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;;aAE9B,EAAE,EAAE,CAAC;;AAEV,KAAC;AAEO,IAAA,iBAAiB,GAAG,CAAC,KAAY,KAAI;AAC3C,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,QAAA,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK;AACjC,KAAC;AAEO,IAAA,iBAAiB,GAAG,CAAC,OAAe,KAAI;QAC9C,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;AAC3C,QAAA,IAAI,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AACvB,YAAA,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;;aACjB;AACL,YAAA,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC;;AAErB,QAAA,IAAI,CAAC,cAAc,GAAG,MAAM;AAC9B,KAAC;AAEO,IAAA,oBAAoB,GAAG,CAAC,QAAwB,KAAI;AAC1D,QAAA,IAAI,CAAC,wBAAwB,GAAG,QAAQ,CAAC,IAAI;AAC7C,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC;AACpC,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,QAAA,IAAI,CAAC,WAAW,GAAG,EAAE;AACvB,KAAC;IAEO,iBAAiB,GAAG,MAAsB;AAChD,QAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,EAA4B;QACpD,MAAM,SAAS,GAAqB,EAAE;QAEtC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAI;AACnC,YAAA,IAAI,QAAQ,CAAC,KAAK,EAAE;AAClB,gBAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE;AACnD,gBAAA,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;gBACvB,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC;;iBACjC;AACL,gBAAA,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAE5B,SAAC,CAAC;QAEF,MAAM,MAAM,GAAoB,EAAE;QAElC,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,IAAI,KAAI;YACpC,MAAM,CAAC,IAAI,CAAC;gBACV,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC;gBAC3C,IAAI;gBACJ,UAAU;AACX,aAAA,CAAC;AACJ,SAAC,CAAC;;AAGF,QAAA,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;YACxB,MAAM,CAAC,IAAI,CAAC;AACV,gBAAA,EAAE,EAAE,WAAW;AACf,gBAAA,IAAI,EAAE,OAAO;AACb,gBAAA,UAAU,EAAE,SAAS;AACtB,aAAA,CAAC;;AAGJ,QAAA,OAAO,MAAM;AACf,KAAC;AAEO,IAAA,gBAAgB,GAAG,CAAC,UAA4B,KAAsB;QAC5E,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE;AAC5B,YAAA,OAAO,UAAU;;QAEnB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE;QAC5C,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,KACzB,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CACrC;AACH,KAAC;AAEO,IAAA,YAAY,GAAG,CAAC,MAAuB,KAAqB;QAClE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE;AAC5B,YAAA,OAAO,MAAM;;QAEf,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE;AAE5C,QAAA,OAAO;AACJ,aAAA,GAAG,CAAC,CAAC,KAAK,KAAI;;AAEb,YAAA,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC;;YAE7D,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,KACnD,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CACrC;;YAGD,IAAI,YAAY,EAAE;AAChB,gBAAA,OAAO,EAAE,GAAG,KAAK,EAAE,CAAC;;AACf,iBAAA,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;gBACxC,OAAO,EAAE,GAAG,KAAK,EAAE,UAAU,EAAE,kBAAkB,EAAE;;AAErD,YAAA,OAAO,IAAI;AACb,SAAC;aACA,MAAM,CAAC,CAAC,CAAC,KAAyB,CAAC,KAAK,IAAI,CAAC;AAClD,KAAC;AAEO,IAAA,eAAe,GAAG,CAAC,IAA4B,KAAY;QACjE,QAAQ,IAAI;AACV,YAAA,KAAK,WAAW;AACd,gBAAA,OAAO,UAAU;AACnB,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,QAAQ;AACjB,YAAA,KAAK,UAAU;AACf,YAAA;AACE,gBAAA,OAAO,aAAa;;AAE1B,KAAC;IAEO,iBAAiB,GAAA;QACvB,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,uCAAuC,EAAc,EAAA,QAAA,CAAA,EACjE,CACE,CAAA,OAAA,EAAA,EAAA,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACvC,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,cAAc,EACpB,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,EACnC,CAAA,EACD,IAAI,CAAC,WAAW,KACf,cACE,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAI;gBACb,CAAC,CAAC,eAAe,EAAE;AACnB,gBAAA,IAAI,CAAC,WAAW,GAAG,EAAE;AACrB,gBAAA,IAAI,CAAC,cAAc,EAAE,KAAK,EAAE;aAC7B,gBACU,cAAc,EAAA,EAEzB,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EAAA,OAAA,CAAa,CAC7C,CACV,CACG;;AAIF,IAAA,kBAAkB,CAAC,QAAwB,EAAA;QACjD,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,wBAAwB;AAClE,QAAA,QACE,CACE,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,UAAU,EAAE,UAAU;AACvB,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAA,EAElD,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,yCAAyC,EAAA,EAClD,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,CAC/B,EACP,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,oBAAoB,EAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,EAAA,EAClD,QAAQ,CAAC,IAAI,CACT,EACN,UAAU,KACT,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,sCAAsC,EAAa,EAAA,OAAA,CAAA,CAChE,CACM;;IAIL,iBAAiB,GAAA;AACvB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,EAAE;QACvC,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;AAEhD,QAAA,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;AAC/B,YAAA,OAAO,IAAI,CAAC,gBAAgB,EAAE;;AAGhC,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC1B,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;AAC5B,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACpD,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAA,EACvC,CAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAE;AACL,oBAAA,cAAc,EAAE,IAAI;AACpB,oBAAA,UAAU,EAAE,UAAU;AACvB,iBAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC,EAAA,eAAA,EAChC,UAAU,GAAG,MAAM,GAAG,OAAO,EAAA,EAE5C,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,6CAA6C,EAAA,EACtD,UAAU,GAAG,aAAa,GAAG,eAAe,CACxC,EACP,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,YAAY,IAAE,KAAK,CAAC,IAAI,CAAQ,EAC5C,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAE,EAAA,KAAK,CAAC,UAAU,CAAC,MAAM,CAAQ,CACnD,EACR,UAAU,KACT,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAC1B,EAAA,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,MAC7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,QAAQ,CAAC,EAAE,EAClB,EAAA,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAC9B,CACP,CAAC,CACE,CACP,CACG;SAET,CAAC,CACE;;IAIF,cAAc,GAAA;QACpB,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC;AAEjE,QAAA,IAAI,kBAAkB,CAAC,MAAM,KAAK,CAAC,EAAE;AACnC,YAAA,OAAO,IAAI,CAAC,gBAAgB,EAAE;;;QAIhC,MAAM,KAAK,GAA2C,EAAE;AAExD,QAAA,kBAAkB,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAI;AACtC,YAAA,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;AACjC,gBAAA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;gBACpB,KAAK,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;AACxB,iBAAA,IAAI,QAAQ,CAAC,IAAI,KAAK,UAAU,EAAE;AACvC,gBAAA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAExB,SAAC,CAAC;QAEF,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,qBAAqB,EAC7B,EAAA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACzB,YAAA,IAAI,SAAS,IAAI,IAAI,EAAE;AACrB,gBAAA,OAAO,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,CAAW,QAAA,EAAA,KAAK,CAAE,CAAA,EAAA,CAAI;;YAE9D,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,EAAE,EAAA,EACd,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAC1B;SAET,CAAC,CACE;;IAIF,gBAAgB,GAAA;AACtB,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACtB,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,sCAAsC,EAAkB,EAAA,YAAA,CAAA,EACpE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,YAAY,EAA2B,EAAA,qBAAA,CAAA,CAC/C;;IAIF,mBAAmB,GAAA;AACzB,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,wBAAwB,CAAC;;IAG5E,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,mBAAmB,EAAE,IAAI;YACzB,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B;AAED,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE;QAC/C,MAAM,WAAW,GAAG,IAAI,CAAC,wBAAwB,IAAI,IAAI,CAAC,gBAAgB;QAE1E,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,KAAK,EAAE,gBAAgB,EAAA,EAEvB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAAA,eAAA,EACnB,IAAI,CAAC,UAAU,GAAG,MAAM,GAAG,OAAO,EAAA,YAAA,EACrC,CAAsB,mBAAA,EAAA,WAAW,EAAE,EAAA,EAE9C,YAAY,KACX,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,yCAAyC,EAClD,EAAA,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,CACnC,CACR,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EAAE,WAAW,CAAQ,EAChD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,uCAAuC,EAAA,YAAA,EACjC,IAAI,CAAC,UAAU,GAAG,kBAAkB,GAAG,gBAAgB,EAAA,EAElE,IAAI,CAAC,UAAU,GAAG,aAAa,GAAG,aAAa,CAC3C,CACA,EAER,IAAI,CAAC,UAAU,KACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACxB,IAAI,CAAC,iBAAiB,EAAE,EACzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAC1B,EAAA,IAAI,CAAC;AACJ,cAAE,IAAI,CAAC,iBAAiB;cACtB,IAAI,CAAC,cAAc,EAAE,CAErB,CACF,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BhPropertySwitcher","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-property-switcher/bh-property-switcher.css?tag=bh-property-switcher&encapsulation=shadow","src/components/bh-property-switcher/bh-property-switcher.tsx"],"sourcesContent":[".property-switcher {\n  position: relative;\n  display: inline-block;\n  width: 220px;\n}\n\n.property-selector {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--spacing-xs);\n  padding: var(--spacing-xs) var(--spacing-sm);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: var(--radius-sm);\n  transition: background-color 0.2s ease;\n  width: 100%;\n  height: 36px;\n  min-width: 0;\n}\n\n.property-selector:hover {\n  background-color: var(--color-neutral-100);\n}\n\n.selector-icon {\n  font-size: 18px;\n  color: var(--color-neutral-500);\n  flex-shrink: 0;\n}\n\n.property-name {\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-700);\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  flex-grow: 1;\n  min-width: 0;\n  text-align: left;\n}\n\n.expand-icon {\n  font-size: 18px;\n  flex-shrink: 0;\n  color: var(--color-neutral-400);\n  transition: color 0.2s ease;\n}\n\n/* Dropdown Panel */\n.dropdown-panel {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  margin-top: var(--spacing-xs);\n  background-color: var(--color-white);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-lg);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);\n  min-width: 280px;\n  max-width: 360px;\n  animation: dropdownSlideIn 0.15s ease-out;\n  overflow: hidden;\n}\n\n@keyframes dropdownSlideIn {\n  0% {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Search Container */\n.search-container {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n  padding: var(--spacing-sm);\n  background-color: var(--color-white);\n  border-bottom: 1px solid var(--color-neutral-200);\n}\n\n.search-icon {\n  font-size: 20px;\n  color: var(--color-neutral-500);\n  flex-shrink: 0;\n}\n\n.search-input {\n  flex: 1;\n  border: none;\n  outline: none;\n  font-family: var(--font-inter);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-900);\n  background: transparent;\n  min-width: 0;\n}\n\n.search-input::placeholder {\n  color: var(--color-neutral-400);\n}\n\n.clear-search {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: var(--radius-sm);\n  color: var(--color-neutral-400);\n  transition: color 0.15s ease, background-color 0.15s ease;\n}\n\n.clear-search:hover {\n  color: var(--color-neutral-600);\n  background-color: var(--color-neutral-200);\n}\n\n.clear-search .material-symbols-outlined {\n  font-size: 18px;\n}\n\n/* Dropdown Content */\n.dropdown-content {\n  max-height: 360px;\n  overflow-y: auto;\n}\n\n/* Flat List Container */\n.flat-list-container {\n  padding: var(--spacing-xs) 0;\n}\n\n/* Groups Container */\n.groups-container {\n  padding: var(--spacing-xs) 0;\n}\n\n/* Property Group */\n.property-group {\n  border-bottom: 1px solid var(--color-neutral-100);\n}\n\n.property-group:last-child {\n  border-bottom: none;\n}\n\n/* Group Header */\n.group-header {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n  width: 100%;\n  padding: var(--spacing-sm) var(--spacing-md);\n  border: none;\n  background: var(--color-neutral-50);\n  cursor: pointer;\n  font-family: var(--font-inter);\n  font-size: var(--text-xs-size);\n  font-weight: var(--weight-semibold);\n  color: var(--color-neutral-600);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  transition: background-color 0.15s ease;\n}\n\n.group-header:hover {\n  background-color: var(--color-neutral-200);\n}\n\n.group-expand-icon {\n  font-size: 18px;\n  color: var(--color-neutral-500);\n  transition: transform 0.15s ease;\n}\n\n.group-name {\n  flex: 1;\n  text-align: left;\n}\n\n.group-count {\n  font-size: 11px;\n  font-weight: var(--weight-semibold);\n  color: var(--color-neutral-500);\n  background-color: var(--color-neutral-200);\n  padding: 2px 8px;\n  border-radius: var(--radius-full);\n  min-width: 20px;\n  text-align: center;\n}\n\n/* Group Properties */\n.group-properties {\n  padding: var(--spacing-xs) 0;\n}\n\n/* Property Item */\n.property-item {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-sm);\n  width: 100%;\n  padding: var(--spacing-sm) var(--spacing-md);\n  padding-left: calc(var(--spacing-md) + 26px);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-family: var(--font-inter);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-700);\n  text-align: left;\n  transition: background-color 0.15s ease;\n}\n\n.flat-list-container .property-item {\n  padding-left: var(--spacing-md);\n}\n\n.property-item:hover {\n  background-color: var(--color-neutral-100);\n}\n\n.property-item.selected {\n  background-color: var(--color-brand-50);\n  color: var(--color-brand-700);\n}\n\n.property-item.selected .property-icon {\n  color: var(--color-brand-600);\n}\n\n.property-icon {\n  font-size: 20px;\n  color: var(--color-neutral-400);\n  flex-shrink: 0;\n}\n\n.property-item-name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: var(--weight-regular);\n}\n\n.property-item.selected .property-item-name {\n  font-weight: var(--weight-medium);\n}\n\n.check-icon {\n  font-size: 18px;\n  color: var(--color-brand-600);\n  flex-shrink: 0;\n}\n\n/* Menu Divider */\n.menu-divider {\n  height: 1px;\n  background-color: var(--color-neutral-150);\n  margin: var(--spacing-xs) var(--spacing-md);\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-2xl) var(--spacing-lg);\n  gap: var(--spacing-sm);\n}\n\n.empty-icon {\n  font-size: 40px;\n  color: var(--color-neutral-300);\n}\n\n.empty-text {\n  font-family: var(--font-inter);\n  font-size: var(--text-sm-size);\n  color: var(--color-neutral-500);\n}\n\n/* Legacy dropdown menu container (for backwards compatibility) */\n.dropdown-menu-container {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  margin-top: var(--spacing-xs);\n  max-height: 320px;\n}\n\n/* Legacy popover animations */\n.popover-container {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  margin-top: var(--spacing-xs);\n  animation: popoverSlideIn 0.3s ease-out;\n  transform-origin: top center;\n}\n\n@keyframes popoverSlideIn {\n  0% {\n    opacity: 0;\n    transform: translateY(calc(-1 * var(--spacing-lg)));\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.popover-container.closing {\n  animation: popoverSlideOut 0.2s ease-in forwards;\n}\n\n@keyframes popoverSlideOut {\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(calc(-1 * var(--spacing-lg)));\n  }\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Host, Listen } from '@stencil/core';\n\nexport interface PropertyOption {\n  id: string;\n  name: string;\n  type: 'portfolio' | 'region' | 'property';\n  group?: string;\n}\n\nexport interface PropertyGroup {\n  id: string;\n  name: string;\n  properties: PropertyOption[];\n}\n\nexport interface DropdownMenuItem {\n  id: string;\n  label?: string;\n  icon?: string;\n  divider?: boolean;\n}\n\n@Component({\n  tag: 'bh-property-switcher',\n  styleUrl: 'bh-property-switcher.css',\n  shadow: true,\n})\nexport class BhPropertySwitcher {\n  /**\n   * Selected property name to display (initial value)\n   */\n  @Prop() selectedProperty: string = 'Select a property';\n\n  /**\n   * Array of property options\n   */\n  @Prop() properties: PropertyOption[] = [];\n\n  /**\n   * Whether to group properties by their group field\n   */\n  @Prop() grouped: boolean = false;\n\n  /**\n   * Placeholder text for search input\n   */\n  @Prop() searchPlaceholder: string = 'Search properties...';\n\n  /**\n   * Event emitted when a property is selected\n   */\n  @Event() bhPropertyChange!: EventEmitter<PropertyOption>;\n\n  @State() isExpanded: boolean = false;\n  @State() searchQuery: string = '';\n  @State() expandedGroups: Set<string> = new Set();\n  @State() internalSelectedProperty: string = '';\n\n  private switcherRef?: HTMLDivElement;\n  private searchInputRef?: HTMLInputElement;\n\n  componentWillLoad() {\n    this.internalSelectedProperty = this.selectedProperty;\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    if (!this.isExpanded) {\n      return;\n    }\n\n    // Check if click is on this component or inside it using composedPath for Shadow DOM\n    const clickedInside = event.composedPath().includes(this.switcherRef as any);\n\n    if (!clickedInside) {\n      this.isExpanded = false;\n    }\n  }\n\n  private handleToggle = () => {\n    this.isExpanded = !this.isExpanded;\n    if (this.isExpanded) {\n      this.searchQuery = '';\n      // Initialize all groups as expanded when opening\n      if (this.grouped) {\n        const groups = this.getPropertyGroups();\n        this.expandedGroups = new Set(groups.map(g => g.id));\n      }\n      // Focus search input when opening\n      setTimeout(() => {\n        if (this.searchInputRef) {\n          this.searchInputRef.focus();\n        }\n      }, 50);\n    }\n  }\n\n  private handleSearchInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.searchQuery = target.value;\n  }\n\n  private handleGroupToggle = (groupId: string) => {\n    const newSet = new Set(this.expandedGroups);\n    if (newSet.has(groupId)) {\n      newSet.delete(groupId);\n    } else {\n      newSet.add(groupId);\n    }\n    this.expandedGroups = newSet;\n  }\n\n  private handlePropertySelect = (property: PropertyOption) => {\n    this.internalSelectedProperty = property.name;\n    this.bhPropertyChange.emit(property);\n    this.isExpanded = false;\n    this.searchQuery = '';\n  }\n\n  private getPropertyGroups = (): PropertyGroup[] => {\n    const groupMap = new Map<string, PropertyOption[]>();\n    const ungrouped: PropertyOption[] = [];\n\n    this.properties.forEach((property) => {\n      if (property.group) {\n        const existing = groupMap.get(property.group) || [];\n        existing.push(property);\n        groupMap.set(property.group, existing);\n      } else {\n        ungrouped.push(property);\n      }\n    });\n\n    const groups: PropertyGroup[] = [];\n\n    groupMap.forEach((properties, name) => {\n      groups.push({\n        id: name.toLowerCase().replace(/\\s+/g, '-'),\n        name,\n        properties,\n      });\n    });\n\n    // Add ungrouped properties as a special group if any exist\n    if (ungrouped.length > 0) {\n      groups.push({\n        id: 'ungrouped',\n        name: 'Other',\n        properties: ungrouped,\n      });\n    }\n\n    return groups;\n  }\n\n  private filterProperties = (properties: PropertyOption[]): PropertyOption[] => {\n    if (!this.searchQuery.trim()) {\n      return properties;\n    }\n    const query = this.searchQuery.toLowerCase();\n    return properties.filter((p) =>\n      p.name.toLowerCase().includes(query)\n    );\n  }\n\n  private filterGroups = (groups: PropertyGroup[]): PropertyGroup[] => {\n    if (!this.searchQuery.trim()) {\n      return groups;\n    }\n    const query = this.searchQuery.toLowerCase();\n\n    return groups\n      .map((group) => {\n        // Check if group name matches\n        const groupMatches = group.name.toLowerCase().includes(query);\n        // Filter properties within the group\n        const filteredProperties = group.properties.filter((p) =>\n          p.name.toLowerCase().includes(query)\n        );\n\n        // Include group if group name matches (show all properties) or if any properties match\n        if (groupMatches) {\n          return { ...group }; // Return group with all properties\n        } else if (filteredProperties.length > 0) {\n          return { ...group, properties: filteredProperties };\n        }\n        return null;\n      })\n      .filter((g): g is PropertyGroup => g !== null);\n  }\n\n  private getPropertyIcon = (type: PropertyOption['type']): string => {\n    switch (type) {\n      case 'portfolio':\n        return 'business';\n      case 'region':\n        return 'public';\n      case 'property':\n      default:\n        return 'location_on';\n    }\n  }\n\n  private renderSearchInput() {\n    return (\n      <div class=\"search-container\">\n        <span class=\"material-symbols-outlined search-icon\">search</span>\n        <input\n          ref={(el) => (this.searchInputRef = el)}\n          type=\"text\"\n          class=\"search-input\"\n          placeholder={this.searchPlaceholder}\n          value={this.searchQuery}\n          onInput={this.handleSearchInput}\n          onClick={(e) => e.stopPropagation()}\n        />\n        {this.searchQuery && (\n          <button\n            class=\"clear-search\"\n            onClick={(e) => {\n              e.stopPropagation();\n              this.searchQuery = '';\n              this.searchInputRef?.focus();\n            }}\n            aria-label=\"Clear search\"\n          >\n            <span class=\"material-symbols-outlined\">close</span>\n          </button>\n        )}\n      </div>\n    );\n  }\n\n  private renderPropertyItem(property: PropertyOption) {\n    const isSelected = property.name === this.internalSelectedProperty;\n    return (\n      <button\n        class={{\n          'property-item': true,\n          'selected': isSelected,\n        }}\n        onClick={() => this.handlePropertySelect(property)}\n      >\n        <span class=\"material-symbols-outlined property-icon\">\n          {this.getPropertyIcon(property.type)}\n        </span>\n        <span class=\"property-item-name\" title={property.name}>\n          {property.name}\n        </span>\n        {isSelected && (\n          <span class=\"material-symbols-outlined check-icon\">check</span>\n        )}\n      </button>\n    );\n  }\n\n  private renderGroupedView() {\n    const groups = this.getPropertyGroups();\n    const filteredGroups = this.filterGroups(groups);\n\n    if (filteredGroups.length === 0) {\n      return this.renderEmptyState();\n    }\n\n    return (\n      <div class=\"groups-container\">\n        {filteredGroups.map((group) => {\n          const isExpanded = this.expandedGroups.has(group.id);\n          return (\n            <div class=\"property-group\" key={group.id}>\n              <button\n                class={{\n                  'group-header': true,\n                  'expanded': isExpanded,\n                }}\n                onClick={() => this.handleGroupToggle(group.id)}\n                aria-expanded={isExpanded ? 'true' : 'false'}\n              >\n                <span class=\"material-symbols-outlined group-expand-icon\">\n                  {isExpanded ? 'expand_more' : 'chevron_right'}\n                </span>\n                <span class=\"group-name\">{group.name}</span>\n                <span class=\"group-count\">{group.properties.length}</span>\n              </button>\n              {isExpanded && (\n                <div class=\"group-properties\">\n                  {group.properties.map((property) => (\n                    <div key={property.id}>\n                      {this.renderPropertyItem(property)}\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n\n  private renderFlatView() {\n    const filteredProperties = this.filterProperties(this.properties);\n\n    if (filteredProperties.length === 0) {\n      return this.renderEmptyState();\n    }\n\n    // Legacy behavior: render portfolios with dividers, skip regions\n    const items: (PropertyOption | { divider: true })[] = [];\n\n    filteredProperties.forEach((property) => {\n      if (property.type === 'portfolio') {\n        items.push(property);\n        items.push({ divider: true });\n      } else if (property.type === 'property') {\n        items.push(property);\n      }\n    });\n\n    return (\n      <div class=\"flat-list-container\">\n        {items.map((item, index) => {\n          if ('divider' in item) {\n            return <div class=\"menu-divider\" key={`divider-${index}`} />;\n          }\n          return (\n            <div key={item.id}>\n              {this.renderPropertyItem(item)}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n\n  private renderEmptyState() {\n    return (\n      <div class=\"empty-state\">\n        <span class=\"material-symbols-outlined empty-icon\">search_off</span>\n        <span class=\"empty-text\">No properties found</span>\n      </div>\n    );\n  }\n\n  private getSelectedProperty(): PropertyOption | undefined {\n    return this.properties.find(p => p.name === this.internalSelectedProperty);\n  }\n\n  render() {\n    const containerClasses = {\n      'property-switcher': true,\n      'expanded': this.isExpanded,\n    };\n\n    const selectedProp = this.getSelectedProperty();\n    const displayName = this.internalSelectedProperty || this.selectedProperty;\n\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.switcherRef = el)}\n          class={containerClasses}\n        >\n          <button\n            class=\"property-selector\"\n            onClick={() => this.handleToggle()}\n            aria-expanded={this.isExpanded ? 'true' : 'false'}\n            aria-label={`Property selector: ${displayName}`}\n          >\n            {selectedProp && (\n              <span class=\"material-symbols-outlined selector-icon\">\n                {this.getPropertyIcon(selectedProp.type)}\n              </span>\n            )}\n            <span class=\"property-name\">{displayName}</span>\n            <span\n              class=\"material-symbols-outlined expand-icon\"\n              aria-label={this.isExpanded ? 'Collapse Options' : 'Expand Options'}\n            >\n              {this.isExpanded ? 'unfold_less' : 'unfold_more'}\n            </span>\n          </button>\n\n          {this.isExpanded && (\n            <div class=\"dropdown-panel\">\n              {this.renderSearchInput()}\n              <div class=\"dropdown-content\">\n                {this.grouped\n                  ? this.renderGroupedView()\n                  : this.renderFlatView()\n                }\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/bh-radio-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BhRadioButton extends Components.BhRadioButton, HTMLElement {}
+export const BhRadioButton: {
+    prototype: BhRadioButton;
+    new (): BhRadioButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bh-radio-button.js

@@ -0,0 +1,9 @@
+import { B as BhRadioButton$1, d as defineCustomElement$1 } from './p-B3doeS-4.js';
+
+const BhRadioButton = BhRadioButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhRadioButton, defineCustomElement };
+//# sourceMappingURL=bh-radio-button.js.map
+
+//# sourceMappingURL=bh-radio-button.js.map

package/components/bh-radio-button.js.map

@@ -0,0 +1 @@
+{"file":"bh-radio-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/bh-sidebar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BhSidebar extends Components.BhSidebar, HTMLElement {}
+export const BhSidebar: {
+    prototype: BhSidebar;
+    new (): BhSidebar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bh-sidebar.js

@@ -0,0 +1,195 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-9a7sQzad.js';
+import { d as defineCustomElement$a } from './p-YJm8-pxX.js';
+import { d as defineCustomElement$9 } from './p-DTgHvmlL.js';
+import { d as defineCustomElement$8 } from './p-D3OkBDd3.js';
+import { d as defineCustomElement$7 } from './p-DVhHZCku.js';
+import { d as defineCustomElement$6 } from './p-ghuDbZwh.js';
+import { d as defineCustomElement$5 } from './p-Bbo_Dwmk.js';
+import { d as defineCustomElement$4 } from './p-DfXkVfrE.js';
+import { d as defineCustomElement$3 } from './p-D_DKZMpk.js';
+import { d as defineCustomElement$2 } from './p-HEcFS8Jc.js';
+
+const bhSidebarCss = ".sidebar-container{width:fit-content;height:100vh;background-color:var(--color-white);position:relative;display:flex}.navigation{background-color:var(--color-white);display:flex;height:100%;align-items:flex-start;justify-content:flex-start;position:relative;border-right:1px solid var(--color-neutral-200);z-index:100}.gradient-bar{position:relative;width:var(--spacing-xs);height:100%;flex-shrink:0}.detail-bar{position:absolute;background:linear-gradient(\n    180deg,\n    var(--color-accent-300) 0%,\n    var(--color-brand-400) 51%,\n    var(--color-brand-800) 100%\n  );inset:0}.sidebar-content{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--spacing-2xl);height:100%;align-items:center;justify-content:flex-start;padding:var(--spacing-md) var(--spacing-md) var(--spacing-lg)\n    var(--spacing-md);position:relative;flex-shrink:0;width:60px}.navigation-section{flex:1 1 0%;display:flex;flex-direction:column;gap:var(--spacing-xl);flex-grow:1;align-items:center;justify-content:flex-start;min-height:0;position:relative;flex-shrink:0;width:100%;overflow-y:auto;overflow-x:hidden}.search-container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex-shrink:0;width:100%}.nav-items{display:flex;flex-direction:column;gap:var(--spacing-xs);align-items:center;justify-content:flex-start;position:relative;flex-shrink:0;width:100%}.sidebar-footer{display:flex;flex-direction:column;gap:var(--spacing-lg);align-items:center;justify-content:end;position:relative;flex-shrink:0;width:100%}.footer-navigation{display:flex;flex-direction:column;gap:var(--spacing-xs);align-items:center;justify-content:center;position:relative;flex-shrink:0;width:100%}.sidebar-collapsed .sidebar-content{width:60px}.sidebar-collapsed .nav-item-label{display:none}.navigation-section::-webkit-scrollbar{width:4px}.navigation-section::-webkit-scrollbar-track{background:transparent}.navigation-section::-webkit-scrollbar-thumb{background:var(--color-neutral-200);border-radius:var(--radius-xs)}.navigation-section::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-300)}.navigation-section{scrollbar-width:thin;scrollbar-color:var(--color-neutral-200) transparent}.sidebar-expanded .sidebar-content{width:240px}.sidebar-expanded .nav-items{align-items:flex-start}.sidebar-expanded .nav-item{width:100%;flex-direction:row;justify-content:flex-start;gap:var(--spacing-md)}.sidebar-expanded .nav-item-label{display:block;text-align:left;font-size:var(--text-sm-size);height:auto;line-height:var(--text-sm-line)}";
+
+const BhSidebar$1 = /*@__PURE__*/ proxyCustomElement(class BhSidebar extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhMenuItemClick = createEvent(this, "bhMenuItemClick");
+        this.bhSearchClick = createEvent(this, "bhSearchClick");
+        this.bhAvatarMenuClick = createEvent(this, "bhAvatarMenuClick");
+    }
+    /**
+     * Type of logo to display
+     */
+    logoType = 'actabl';
+    /**
+     * Avatar image URL
+     */
+    avatarUrl;
+    /**
+     * Avatar initials (used if avatarUrl is not provided)
+     */
+    avatarInitials = 'DM';
+    /**
+     * Avatar name for dropdown
+     */
+    avatarName = 'Daniel Mobara';
+    /**
+     * Avatar email for dropdown
+     */
+    avatarEmail = 'daniel@solsticehospitality.com';
+    /**
+     * Main menu navigation items
+     */
+    menuItems = [
+        { label: 'Dashboard', icon: 'dashboard', isActive: true },
+        { label: 'Analytics', icon: 'analytics', isActive: false },
+        { label: 'Reports', icon: 'assessment', isActive: false },
+        { label: 'Calendar', icon: 'calendar_today', isActive: false },
+        { label: 'Messages', icon: 'message', isActive: false },
+        { label: 'Contacts', icon: 'contacts', isActive: false },
+        { label: 'Files', icon: 'folder', isActive: false },
+    ];
+    /**
+     * Footer navigation items
+     */
+    footerItems = [
+        { label: 'Help', icon: 'help_outline' },
+        { label: 'Settings', icon: 'settings' },
+    ];
+    /**
+     * Whether sidebar is collapsed
+     */
+    collapsed = false;
+    /**
+     * Event emitted when a menu item is clicked
+     */
+    bhMenuItemClick;
+    /**
+     * Event emitted when search button is clicked
+     */
+    bhSearchClick;
+    /**
+     * Event emitted when avatar menu item is clicked
+     */
+    bhAvatarMenuClick;
+    activeItem = '';
+    componentWillLoad() {
+        const activeMenuItem = this.menuItems.find(item => item.isActive);
+        this.activeItem = activeMenuItem?.label || '';
+    }
+    handleNavItemClick = (label) => {
+        this.activeItem = label;
+        this.bhMenuItemClick.emit(label);
+    };
+    handleSearchClick = () => {
+        this.bhSearchClick.emit();
+    };
+    handleAvatarMenuClick = (event) => {
+        this.bhAvatarMenuClick.emit(event.detail);
+    };
+    render() {
+        const sidebarClasses = {
+            'sidebar-container': true,
+            'sidebar-collapsed': this.collapsed,
+        };
+        const avatarMenuItems = [
+            { id: '1', label: 'View profile', icon: 'person', shortcut: '⌘P' },
+            { id: '2', label: 'Account settings', icon: 'settings', shortcut: '⌘,' },
+            { id: '3', label: 'Notifications', icon: 'notifications', shortcut: '⌘N' },
+            { id: '4', label: 'Privacy & Security', icon: 'shield', shortcut: '⌘S' },
+            { id: '5', divider: true },
+            { id: '6', label: 'Billing', icon: 'credit_card', shortcut: '⌘B' },
+            { id: '7', label: 'Team management', icon: 'group', shortcut: '⌘T' },
+            { id: '8', label: 'Integrations', icon: 'extension', shortcut: '⌘I' },
+            { id: '9', divider: true },
+            { id: '10', label: 'Help center', icon: 'help', shortcut: '⌘H' },
+            { id: '11', label: 'Keyboard shortcuts', icon: 'keyboard', shortcut: '?' },
+            { id: '12', divider: true },
+            { id: '13', label: 'Sign out', icon: 'logout', shortcut: '⇧⌘Q' },
+        ];
+        return (h(Host, { key: '14f483d75df70a5bfbda0731fe7d82aaf20d551b' }, h("div", { key: '8ea1b342688f955b401a77a808561b76164f0d0e', class: sidebarClasses }, h("div", { key: '931c6ba45580b069dbf7e96119e3ee914d05ce78', class: "navigation" }, h("div", { key: '9b39938bfe77ff84a68830de2bd8392ab3a3c1b2', class: "gradient-bar" }, h("div", { key: 'b196a1b459740323a927b1a5fee2ab65f596ed24', class: "detail-bar" })), h("div", { key: '00af6a0d4e4747b1026fa7d19b6c7a6a96457207', class: "sidebar-content" }, h("bh-logo-box", { key: '4032fc97e8965a77027ec269b87de5d2585be348', logoType: this.logoType }), h("div", { key: 'add8f2396ec79e7b7765cca6a42519c867f30ee7', class: "navigation-section" }, h("div", { key: '5c8116a117a7b406bb52d0cc0da2d51d472c4431', class: "search-container" }, h("bh-button-icon", { key: '024ce4ab04cf6404a05a7cae07f9f1a832a173e8', hierarchy: "secondary", size: "sm", iconName: "search", onClick: this.handleSearchClick })), h("div", { key: 'e3d90a44f3ab91348cd0b516548588b1fae2aa92', class: "nav-items" }, this.menuItems.map((item) => (h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: this.activeItem === item.label, onBhClick: () => this.handleNavItemClick(item.label) }))))), h("div", { key: '447d84326d1f56d53e75190ed8d85c428769c5ce', class: "sidebar-footer" }, h("div", { key: '1ef5c3d1fbe579a7da66cba2ea436c7e9639ff95', class: "footer-navigation" }, this.footerItems.map((item) => (h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: false, onBhClick: () => this.handleNavItemClick(item.label) })))), h("bh-dropdown", { key: 'aef26cfc2faa17043588054c36bcb2f8a9008cc1', variant: "avatar", size: "md", avatarSize: "md", avatarSrc: this.avatarUrl, avatarName: this.avatarName, avatarEmail: this.avatarEmail, menuItems: avatarMenuItems, showIcons: true, onBhItemClick: this.handleAvatarMenuClick })))))));
+    }
+    static get style() { return bhSidebarCss; }
+}, [769, "bh-sidebar", {
+        "logoType": [1, "logo-type"],
+        "avatarUrl": [1, "avatar-url"],
+        "avatarInitials": [1, "avatar-initials"],
+        "avatarName": [1, "avatar-name"],
+        "avatarEmail": [1, "avatar-email"],
+        "menuItems": [16],
+        "footerItems": [16],
+        "collapsed": [4],
+        "activeItem": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-sidebar", "bh-avatar", "bh-button", "bh-button-icon", "bh-dropdown", "bh-dropdown-menu", "bh-loader-spinner", "bh-logo-box", "bh-nav-item", "bh-product-switcher"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-sidebar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhSidebar$1);
+            }
+            break;
+        case "bh-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "bh-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "bh-button-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "bh-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "bh-dropdown-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "bh-loader-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "bh-logo-box":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bh-nav-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-product-switcher":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhSidebar = BhSidebar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhSidebar, defineCustomElement };
+//# sourceMappingURL=bh-sidebar.js.map
+
+//# sourceMappingURL=bh-sidebar.js.map

package/components/bh-sidebar.js.map

@@ -0,0 +1 @@
+{"file":"bh-sidebar.js","mappings":"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","names":["BhSidebar","__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}

package/components/bh-skeleton-loader.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BhSkeletonLoader extends Components.BhSkeletonLoader, HTMLElement {}
+export const BhSkeletonLoader: {
+    prototype: BhSkeletonLoader;
+    new (): BhSkeletonLoader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;