@actabldesign/bellhop-core 0.0.3 → 0.0.4

package/dist/collection/components/bh-pie-chart/bh-pie-chart.js

@@ -0,0 +1,280 @@
+import { h, Host } from "@stencil/core";
+const DEFAULT_COLORS = [
+    '#2642CF', // Blue
+    '#8E4B9B', // Purple
+    '#BB81BA', // Light Purple
+    '#E14C94', // Pink
+    '#E47789', // Coral
+    '#E9AAAE', // Light Coral
+    '#BACEFC', // Light Blue
+];
+export class BhPieChart {
+    /**
+     * Chart data containing series
+     */
+    data = {
+        series: [
+            { name: 'Series 1', value: 30, color: '#2642CF' },
+            { name: 'Series 2', value: 25, color: '#8E4B9B' },
+            { name: 'Series 3', value: 20, color: '#BB81BA' },
+            { name: 'Series 4', value: 15, color: '#E14C94' },
+            { name: 'Series 5', value: 10, color: '#E47789' },
+        ],
+    };
+    /**
+     * Size of the donut hole
+     */
+    hole = 'none';
+    /**
+     * Size of the chart in pixels
+     */
+    size = 160;
+    /**
+     * Whether to animate the chart
+     */
+    animated = true;
+    /**
+     * Gap between segments in degrees
+     */
+    gap = 0;
+    tooltipVisible = false;
+    tooltipX = 0;
+    tooltipY = 0;
+    tooltipSegment = null;
+    getInnerRadius() {
+        switch (this.hole) {
+            case '25%':
+                return 20;
+            case '50%':
+                return 40;
+            case '75%':
+                return 60;
+            case '85%':
+                return 68;
+            default:
+                return 0;
+        }
+    }
+    createArcPath(centerX, centerY, outerRadius, innerRadius, startAngle, endAngle) {
+        const startAngleRad = (startAngle * Math.PI) / 180;
+        const endAngleRad = (endAngle * Math.PI) / 180;
+        const outerStartX = centerX + outerRadius * Math.cos(startAngleRad);
+        const outerStartY = centerY + outerRadius * Math.sin(startAngleRad);
+        const outerEndX = centerX + outerRadius * Math.cos(endAngleRad);
+        const outerEndY = centerY + outerRadius * Math.sin(endAngleRad);
+        const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;
+        if (innerRadius === 0) {
+            return [
+                'M', centerX, centerY,
+                'L', outerStartX, outerStartY,
+                'A', outerRadius, outerRadius, 0, largeArcFlag, 1, outerEndX, outerEndY,
+                'Z',
+            ].join(' ');
+        }
+        else {
+            const innerStartX = centerX + innerRadius * Math.cos(startAngleRad);
+            const innerStartY = centerY + innerRadius * Math.sin(startAngleRad);
+            const innerEndX = centerX + innerRadius * Math.cos(endAngleRad);
+            const innerEndY = centerY + innerRadius * Math.sin(endAngleRad);
+            return [
+                'M', outerStartX, outerStartY,
+                'A', outerRadius, outerRadius, 0, largeArcFlag, 1, outerEndX, outerEndY,
+                'L', innerEndX, innerEndY,
+                'A', innerRadius, innerRadius, 0, largeArcFlag, 0, innerStartX, innerStartY,
+                'Z',
+            ].join(' ');
+        }
+    }
+    getSegments() {
+        if (!this.data.series?.length) {
+            return [];
+        }
+        const total = this.data.series.reduce((sum, item) => sum + item.value, 0);
+        if (total === 0) {
+            return [];
+        }
+        const segments = [];
+        let currentAngle = -90;
+        const radius = 80;
+        const centerX = 80;
+        const centerY = 80;
+        const innerRadius = this.getInnerRadius();
+        const totalGaps = this.data.series.length * this.gap;
+        const availableAngle = 360 - totalGaps;
+        this.data.series.forEach((item, index) => {
+            const percentage = (item.value / total) * 100;
+            const angleSize = (item.value / total) * availableAngle;
+            const startAngle = currentAngle;
+            const endAngle = currentAngle + angleSize;
+            const path = this.createArcPath(centerX, centerY, radius, innerRadius, startAngle, endAngle);
+            segments.push({
+                value: item.value,
+                percentage,
+                startAngle,
+                endAngle,
+                color: item.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length],
+                name: item.name,
+                path,
+            });
+            currentAngle = endAngle + this.gap;
+        });
+        return segments;
+    }
+    handleSegmentHover = (event, segment) => {
+        this.tooltipVisible = true;
+        this.tooltipX = event.clientX;
+        this.tooltipY = event.clientY;
+        this.tooltipSegment = segment;
+    };
+    handleSegmentLeave = () => {
+        this.tooltipVisible = false;
+    };
+    render() {
+        const segments = this.getSegments();
+        const innerRadius = this.getInnerRadius();
+        return (h(Host, { key: 'b0778f7ed499f578b25907f73be6e7ddbbd9fa17' }, h("div", { key: '440259b95d6e65282452619ee2a0cfc890f45443', class: "pie-chart-container", style: { width: `${this.size}px`, height: `${this.size}px` } }, h("svg", { key: '183c562c5a65095667964dc5a80b84fdf28d7704', width: this.size, height: this.size, viewBox: "0 0 160 160", class: "pie-chart-svg" }, h("circle", { key: '1afac01e292252211943372018476565dabefbb2', cx: "80", cy: "80", r: "80", fill: "transparent", class: "pie-background" }), segments.map((segment, index) => (h("g", { key: index, class: "pie-segment-group" }, h("path", { d: segment.path, fill: segment.color, class: { 'pie-segment': true, animated: this.animated }, style: { animationDelay: this.animated ? `${index * 0.03}s` : '0s' }, onMouseEnter: (e) => this.handleSegmentHover(e, segment), onMouseLeave: this.handleSegmentLeave })))), this.hole !== 'none' && (h("circle", { key: 'bb64355e6be750e413926fca053c2bc100aa821e', cx: "80", cy: "80", r: innerRadius, fill: "white", class: "pie-inner-hole" })))), h("bh-chart-tooltip", { key: '1760b14f54066a4ae146e9802a9888e7f44bce19', visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY, items: this.tooltipSegment
+                ? [
+                    {
+                        label: this.tooltipSegment.name,
+                        value: `${this.tooltipSegment.percentage.toFixed(0)}%`,
+                        color: this.tooltipSegment.color,
+                    },
+                ]
+                : [] })));
+    }
+    static get is() { return "bh-pie-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-pie-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-pie-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PieChartData",
+                    "resolved": "PieChartData",
+                    "references": {
+                        "PieChartData": {
+                            "location": "local",
+                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-pie-chart/bh-pie-chart.tsx",
+                            "id": "src/components/bh-pie-chart/bh-pie-chart.tsx::PieChartData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chart data containing series"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\n    series: [\n      { name: 'Series 1', value: 30, color: '#2642CF' },\n      { name: 'Series 2', value: 25, color: '#8E4B9B' },\n      { name: 'Series 3', value: 20, color: '#BB81BA' },\n      { name: 'Series 4', value: 15, color: '#E14C94' },\n      { name: 'Series 5', value: 10, color: '#E47789' },\n    ],\n  }"
+            },
+            "hole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PieChartHole",
+                    "resolved": "\"25%\" | \"50%\" | \"75%\" | \"85%\" | \"none\"",
+                    "references": {
+                        "PieChartHole": {
+                            "location": "local",
+                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-pie-chart/bh-pie-chart.tsx",
+                            "id": "src/components/bh-pie-chart/bh-pie-chart.tsx::PieChartHole"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the donut hole"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hole",
+                "defaultValue": "'none'"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the chart in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "160"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to animate the chart"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "true"
+            },
+            "gap": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Gap between segments in degrees"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tooltipVisible": {},
+            "tooltipX": {},
+            "tooltipY": {},
+            "tooltipSegment": {}
+        };
+    }
+}
+//# sourceMappingURL=bh-pie-chart.js.map

package/dist/collection/components/bh-popover/bh-popover.js

@@ -0,0 +1,326 @@
+import { h, Host } from "@stencil/core";
+export class BhPopover {
+    /**
+     * Title displayed in the header
+     */
+    popoverTitle = 'Brand Name';
+    /**
+     * Text for the portfolio link
+     */
+    viewPortfolioText = 'view portfolio';
+    /**
+     * Placeholder text for search input
+     */
+    searchPlaceholder = 'Search by name or region';
+    /**
+     * Width of the popover
+     */
+    width = '240px';
+    /**
+     * Whether to show search input
+     */
+    showSearch = true;
+    /**
+     * Whether to show avatar section
+     */
+    showAvatar = true;
+    /**
+     * Avatar image source URL
+     */
+    avatarSrc;
+    /**
+     * Menu items array (JSON string or array)
+     */
+    items = [];
+    searchTerm = '';
+    /**
+     * Event emitted when a menu item is selected
+     */
+    bhItemSelect;
+    /**
+     * Event emitted when portfolio link is clicked
+     */
+    bhPortfolioClick;
+    /**
+     * Event emitted when search input changes
+     */
+    bhSearchChange;
+    get parsedItems() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.items || [];
+    }
+    handleItemClick = (item) => {
+        if (item.type !== 'header') {
+            this.bhItemSelect.emit(item);
+        }
+    };
+    handlePortfolioClick = () => {
+        this.bhPortfolioClick.emit();
+    };
+    handleSearchInput = (event) => {
+        const target = event.target;
+        this.searchTerm = target.value;
+        this.bhSearchChange.emit(this.searchTerm);
+    };
+    getItemClasses(item) {
+        return {
+            'menu-item': true,
+            'selected': !!item.selected,
+            'menu-item-portfolio': item.type === 'portfolio',
+            'menu-item-region': item.type === 'region',
+            'menu-item-property': item.type === 'property',
+        };
+    }
+    render() {
+        const items = this.parsedItems;
+        return (h(Host, { key: '25499890c1864435bae214a37f7fc8d565d8f3da' }, h("div", { key: 'de6ade64a6cdf7ab299d0ee9187b676d2841d89c', class: "popover", style: { width: this.width } }, h("div", { key: '19d68a071d41a928dde7070ce17ef61ef0770118', class: "popover-content" }, h("div", { key: '103181dbb1ff47314cff71869bb84ad06c78de78', class: "popover-menu" }, this.showAvatar && (h("div", { key: 'd6b413cd6c726078e414174cfc75d5e95ffacddc', class: "popover-header" }, h("div", { key: '4cdad2a1457d4b8df7baeb0f04d849f47471a727', class: "avatar-group" }, h("div", { key: '7c59b44499eaba8da0982939dacef30899273c02', class: "avatar" }, this.avatarSrc ? (h("img", { src: this.avatarSrc, alt: this.popoverTitle, class: "avatar-image" })) : (h("slot", { name: "avatar" }))), h("div", { key: 'bfab1ee98a218d4ee75055872542135fbf179069', class: "brand-info" }, h("div", { key: '9eed24402c23ba99fa9fbcaf4b0a430ea01fe263', class: "brand-name" }, this.popoverTitle), this.viewPortfolioText && (h("button", { key: '2056c40e002bd029545f2f2fb898eed39f8f93db', class: "portfolio-link", onClick: this.handlePortfolioClick, type: "button" }, this.viewPortfolioText)))))), this.showSearch && (h("div", { key: 'd8b487b553522f4c5a0e9e74755c53fb7ff5dc1b', class: "search-container" }, h("div", { key: 'a20d988fa3f86e7c26a1b31ed04b4adfa34a7a36', class: "search-input" }, h("div", { key: 'd75a244d37324a84a8ae8501f334f84a52fe9b0e', class: "search-content" }, h("span", { key: '394b2c5f23949c72109ca5c441ef3069a6424530', class: "material-symbols-outlined search-icon" }, "search"), h("input", { key: '1887ff5e6d3b3c857b5e980d33d8adc0076b23a1', type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, class: "search-field" }))))), h("div", { key: 'e2b6ff5f6b7ba5929db7a9d1401ae2cfc1089eb7', class: "menu-items" }, items.map((item) => (h("div", { key: item.id }, item.type === 'header' && (h("div", { class: "menu-header" }, item.label)), item.type !== 'header' && (h("div", { class: "menu-item-container" }, h("button", { class: this.getItemClasses(item), onClick: () => this.handleItemClick(item), type: "button" }, item.label))))))))))));
+    }
+    static get is() { return "bh-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-popover.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "popoverTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title displayed in the header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popover-title",
+                "defaultValue": "'Brand Name'"
+            },
+            "viewPortfolioText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for the portfolio link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "view-portfolio-text",
+                "defaultValue": "'view portfolio'"
+            },
+            "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 by name or region'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the popover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'240px'"
+            },
+            "showSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show search input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-search",
+                "defaultValue": "true"
+            },
+            "showAvatar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show avatar section"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-avatar",
+                "defaultValue": "true"
+            },
+            "avatarSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar image source URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-src"
+            },
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopoverItem[] | string",
+                    "resolved": "PopoverItem[] | string",
+                    "references": {
+                        "PopoverItem": {
+                            "location": "local",
+                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-popover/bh-popover.tsx",
+                            "id": "src/components/bh-popover/bh-popover.tsx::PopoverItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu items array (JSON string or array)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "searchTerm": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhItemSelect",
+                "name": "bhItemSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a menu item is selected"
+                },
+                "complexType": {
+                    "original": "PopoverItem",
+                    "resolved": "PopoverItem",
+                    "references": {
+                        "PopoverItem": {
+                            "location": "local",
+                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-popover/bh-popover.tsx",
+                            "id": "src/components/bh-popover/bh-popover.tsx::PopoverItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "bhPortfolioClick",
+                "name": "bhPortfolioClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when portfolio link is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhSearchChange",
+                "name": "bhSearchChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when search input changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bh-popover.js.map