@actabldesign/bellhop-core 0.0.3

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

@@ -0,0 +1,128 @@
+/* Container wrapper */
+.product-switcher-container {
+  position: fixed;
+  z-index: 10000;
+  animation: popoverSlideIn 0.3s ease-out;
+  transform-origin: top center;
+}
+
+/* Backdrop */
+.product-switcher-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: transparent;
+  z-index: 9999;
+}
+
+/* Product Switcher Popover */
+.product-switcher-popover {
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--color-neutral-100);
+  border-radius: var(--radius-lg);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(3px);
+  box-shadow: 0px 24px 48px -12px rgba(64, 73, 104, 0.1);
+  padding: var(--spacing-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  min-width: 250px;
+  position: relative;
+  z-index: 10001;
+}
+
+@keyframes popoverSlideIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.product-switcher-container.closing {
+  animation: popoverSlideOut 0.2s ease-in forwards;
+}
+
+@keyframes popoverSlideOut {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
+}
+
+/* Product Item */
+.product-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.product-item:hover {
+  background-color: var(--color-neutral-100);
+}
+
+.product-item.current {
+  background-color: var(--color-brand-50);
+}
+
+/* Product Icon Container */
+.product-icon-container {
+  width: 36px;
+  height: 36px;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-100);
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--spacing-xs);
+}
+
+.product-icon {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+  filter: invert(25%) sepia(190%) saturate(210%) hue-rotate(190deg) brightness(120%) contrast(210%);
+}
+
+.product-icon svg path {
+  fill: var(--color-brand-600);
+}
+
+/* Product Info */
+.product-info {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.product-name {
+  font-weight: var(--weight-semibold);
+  font-size: var(--text-md-size);
+  line-height: var(--text-md-line);
+  color: var(--color-neutral-900);
+}
+
+.product-description {
+  font-weight: var(--weight-regular);
+  font-size: var(--text-sm-size);
+  line-height: var(--text-sm-line);
+  color: var(--color-neutral-600);
+}

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

@@ -0,0 +1,226 @@
+import { h, Host } from "@stencil/core";
+export class BhProductSwitcher {
+    /**
+     * Whether the product switcher is open
+     */
+    isOpen = false;
+    /**
+     * Position to anchor the popover
+     */
+    anchorPosition = { top: 0, left: 0 };
+    /**
+     * Array of products to display
+     */
+    products = [
+        {
+            id: 'alice',
+            name: 'Alice',
+            description: 'Housekeeping & Guest Services',
+            logo: './assets/logos/AL.svg',
+        },
+        {
+            id: 'hotel-effectiveness',
+            name: 'Hotel Effectiveness',
+            description: 'Labor planning',
+            logo: './assets/logos/HE.svg',
+        },
+        {
+            id: 'profit-sword',
+            name: 'ProfitSword',
+            description: 'B.I and Finance',
+            logo: './assets/logos/PS.svg',
+        },
+        {
+            id: 'transcendent',
+            name: 'Transcendent',
+            description: 'Asset Management & CapEx',
+            logo: './assets/logos/TR.svg',
+        },
+    ];
+    /**
+     * Event emitted when the switcher should close
+     */
+    bhClose;
+    /**
+     * Event emitted when a product is selected
+     */
+    bhProductSelect;
+    isClosing = false;
+    containerRef;
+    handleDocumentClick(event) {
+        const target = event.target;
+        if (this.isOpen &&
+            this.containerRef &&
+            !this.containerRef.contains(target) &&
+            !target.closest('.logo-active')) {
+            this.handleClose();
+        }
+    }
+    handleClose = () => {
+        this.isClosing = true;
+        setTimeout(() => {
+            this.bhClose.emit();
+            this.isClosing = false;
+        }, 200);
+    };
+    handleProductClick = (product) => {
+        this.bhProductSelect.emit(product);
+        this.handleClose();
+    };
+    render() {
+        if (!this.isOpen)
+            return null;
+        const containerClasses = {
+            'product-switcher-container': true,
+            'closing': this.isClosing,
+        };
+        return (h(Host, null, h("div", { class: "product-switcher-backdrop", onClick: this.handleClose }), h("div", { ref: (el) => this.containerRef = el, class: containerClasses, style: {
+                top: `${this.anchorPosition.top}px`,
+                left: `${this.anchorPosition.left}px`,
+            } }, h("div", { class: "product-switcher-popover" }, this.products.map((product) => {
+            const itemClasses = {
+                'product-item': true,
+                'current': product.current || false,
+            };
+            return (h("div", { key: product.id, class: itemClasses, onClick: () => this.handleProductClick(product) }, h("div", { class: "product-icon-container" }, h("img", { src: product.logo, alt: `${product.name} logo`, class: "product-icon" })), h("div", { class: "product-info" }, h("div", { class: "product-name" }, product.name), h("div", { class: "product-description" }, product.description))));
+        })))));
+    }
+    static get is() { return "bh-product-switcher"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-product-switcher.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-product-switcher.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the product switcher is open"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-open",
+                "defaultValue": "false"
+            },
+            "anchorPosition": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AnchorPosition",
+                    "resolved": "AnchorPosition",
+                    "references": {
+                        "AnchorPosition": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-product-switcher/bh-product-switcher.tsx",
+                            "id": "src/components/bh-product-switcher/bh-product-switcher.tsx::AnchorPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position to anchor the popover"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{ top: 0, left: 0 }"
+            },
+            "products": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BhProduct[]",
+                    "resolved": "BhProduct[]",
+                    "references": {
+                        "BhProduct": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-product-switcher/bh-product-switcher.tsx",
+                            "id": "src/components/bh-product-switcher/bh-product-switcher.tsx::BhProduct"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of products to display"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\n    {\n      id: 'alice',\n      name: 'Alice',\n      description: 'Housekeeping & Guest Services',\n      logo: './assets/logos/AL.svg',\n    },\n    {\n      id: 'hotel-effectiveness',\n      name: 'Hotel Effectiveness',\n      description: 'Labor planning',\n      logo: './assets/logos/HE.svg',\n    },\n    {\n      id: 'profit-sword',\n      name: 'ProfitSword',\n      description: 'B.I and Finance',\n      logo: './assets/logos/PS.svg',\n    },\n    {\n      id: 'transcendent',\n      name: 'Transcendent',\n      description: 'Asset Management & CapEx',\n      logo: './assets/logos/TR.svg',\n    },\n  ]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isClosing": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhClose",
+                "name": "bhClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the switcher should close"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhProductSelect",
+                "name": "bhProductSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a product is selected"
+                },
+                "complexType": {
+                    "original": "BhProduct",
+                    "resolved": "BhProduct",
+                    "references": {
+                        "BhProduct": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-product-switcher/bh-product-switcher.tsx",
+                            "id": "src/components/bh-product-switcher/bh-product-switcher.tsx::BhProduct"
+                        }
+                    }
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=bh-product-switcher.js.map

package/collection/components/bh-product-switcher/bh-product-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-product-switcher.js","sourceRoot":"","sources":["../../../src/components/bh-product-switcher/bh-product-switcher.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, State, h, Host, Listen } from '@stencil/core';\n\nexport interface BhProduct {\n  id: string;\n  name: string;\n  description: string;\n  logo: string;\n  current?: boolean;\n}\n\nexport interface AnchorPosition {\n  top: number;\n  left: number;\n}\n\n@Component({\n  tag: 'bh-product-switcher',\n  styleUrl: 'bh-product-switcher.css',\n  shadow: true,\n})\nexport class BhProductSwitcher {\n  /**\n   * Whether the product switcher is open\n   */\n  @Prop() isOpen: boolean = false;\n\n  /**\n   * Position to anchor the popover\n   */\n  @Prop() anchorPosition: AnchorPosition = { top: 0, left: 0 };\n\n  /**\n   * Array of products to display\n   */\n  @Prop() products: BhProduct[] = [\n    {\n      id: 'alice',\n      name: 'Alice',\n      description: 'Housekeeping & Guest Services',\n      logo: './assets/logos/AL.svg',\n    },\n    {\n      id: 'hotel-effectiveness',\n      name: 'Hotel Effectiveness',\n      description: 'Labor planning',\n      logo: './assets/logos/HE.svg',\n    },\n    {\n      id: 'profit-sword',\n      name: 'ProfitSword',\n      description: 'B.I and Finance',\n      logo: './assets/logos/PS.svg',\n    },\n    {\n      id: 'transcendent',\n      name: 'Transcendent',\n      description: 'Asset Management & CapEx',\n      logo: './assets/logos/TR.svg',\n    },\n  ];\n\n  /**\n   * Event emitted when the switcher should close\n   */\n  @Event() bhClose!: EventEmitter<void>;\n\n  /**\n   * Event emitted when a product is selected\n   */\n  @Event() bhProductSelect!: EventEmitter<BhProduct>;\n\n  @State() isClosing: boolean = false;\n\n  private containerRef?: HTMLDivElement;\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    if (\n      this.isOpen &&\n      this.containerRef &&\n      !this.containerRef.contains(target) &&\n      !target.closest('.logo-active')\n    ) {\n      this.handleClose();\n    }\n  }\n\n  private handleClose = () => {\n    this.isClosing = true;\n    setTimeout(() => {\n      this.bhClose.emit();\n      this.isClosing = false;\n    }, 200);\n  };\n\n  private handleProductClick = (product: BhProduct) => {\n    this.bhProductSelect.emit(product);\n    this.handleClose();\n  };\n\n  render() {\n    if (!this.isOpen) return null;\n\n    const containerClasses = {\n      'product-switcher-container': true,\n      'closing': this.isClosing,\n    };\n\n    return (\n      <Host>\n        {/* Backdrop */}\n        <div class=\"product-switcher-backdrop\" onClick={this.handleClose}></div>\n\n        {/* Product Switcher Container */}\n        <div\n          ref={(el) => this.containerRef = el}\n          class={containerClasses}\n          style={{\n            top: `${this.anchorPosition.top}px`,\n            left: `${this.anchorPosition.left}px`,\n          }}\n        >\n          <div class=\"product-switcher-popover\">\n            {this.products.map((product) => {\n              const itemClasses = {\n                'product-item': true,\n                'current': product.current || false,\n              };\n\n              return (\n                <div\n                  key={product.id}\n                  class={itemClasses}\n                  onClick={() => this.handleProductClick(product)}\n                >\n                  <div class=\"product-icon-container\">\n                    <img\n                      src={product.logo}\n                      alt={`${product.name} logo`}\n                      class=\"product-icon\"\n                    />\n                  </div>\n\n                  <div class=\"product-info\">\n                    <div class=\"product-name\">{product.name}</div>\n                    <div class=\"product-description\">{product.description}</div>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}