@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-property-switcher/bh-property-switcher.css

@@ -0,0 +1,346 @@
+.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 */
+.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 */
+.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 */
+.dropdown-content {
+  max-height: 360px;
+  overflow-y: auto;
+}
+
+/* Flat List Container */
+.flat-list-container {
+  padding: var(--spacing-xs) 0;
+}
+
+/* Groups Container */
+.groups-container {
+  padding: var(--spacing-xs) 0;
+}
+
+/* Property Group */
+.property-group {
+  border-bottom: 1px solid var(--color-neutral-100);
+}
+
+.property-group:last-child {
+  border-bottom: none;
+}
+
+/* Group Header */
+.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 */
+.group-properties {
+  padding: var(--spacing-xs) 0;
+}
+
+/* Property Item */
+.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 */
+.menu-divider {
+  height: 1px;
+  background-color: var(--color-neutral-150);
+  margin: var(--spacing-xs) var(--spacing-md);
+}
+
+/* Empty State */
+.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);
+}
+
+/* Legacy dropdown menu container (for backwards compatibility) */
+.dropdown-menu-container {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  margin-top: var(--spacing-xs);
+  max-height: 320px;
+}
+
+/* Legacy popover animations */
+.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)));
+  }
+}

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

@@ -0,0 +1,360 @@
+import { h, Host } from "@stencil/core";
+export class BhPropertySwitcher {
+    /**
+     * 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 is() { return "bh-property-switcher"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-property-switcher.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-property-switcher.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectedProperty": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected property name to display (initial value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-property",
+                "defaultValue": "'Select a property'"
+            },
+            "properties": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PropertyOption[]",
+                    "resolved": "PropertyOption[]",
+                    "references": {
+                        "PropertyOption": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-property-switcher/bh-property-switcher.tsx",
+                            "id": "src/components/bh-property-switcher/bh-property-switcher.tsx::PropertyOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of property options"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "grouped": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to group properties by their group field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "grouped",
+                "defaultValue": "false"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for search input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-placeholder",
+                "defaultValue": "'Search properties...'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {},
+            "searchQuery": {},
+            "expandedGroups": {},
+            "internalSelectedProperty": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhPropertyChange",
+                "name": "bhPropertyChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a property is selected"
+                },
+                "complexType": {
+                    "original": "PropertyOption",
+                    "resolved": "PropertyOption",
+                    "references": {
+                        "PropertyOption": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-property-switcher/bh-property-switcher.tsx",
+                            "id": "src/components/bh-property-switcher/bh-property-switcher.tsx::PropertyOption"
+                        }
+                    }
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=bh-property-switcher.js.map