@actabldesign/bellhop-core 0.0.3 → 0.0.6

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

@@ -1,280 +0,0 @@
-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: '6e08d27c86b66d352cb0af60a7c53a50bbfdbb68' }, h("div", { key: '6ea7a66cc1294f69e2757f54ace875ebd08613ed', class: "pie-chart-container", style: { width: `${this.size}px`, height: `${this.size}px` } }, h("svg", { key: 'd777cd322d93bf0d419213b87729c2cb94346362', width: this.size, height: this.size, viewBox: "0 0 160 160", class: "pie-chart-svg" }, h("circle", { key: 'bb77a5913fb0d8a849d27bf1e854c1f1ae690c4d', 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: '00e9cc73e53b04d9cee1df1bcdb2c7b1a2dad5b9', cx: "80", cy: "80", r: innerRadius, fill: "white", class: "pie-inner-hole" })))), h("bh-chart-tooltip", { key: 'a6c2652bf3c556ea6aaa5f8fcd2963abdc8322f6', 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": "/home/runner/work/bellhopos/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": "/home/runner/work/bellhopos/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/collection/components/bh-popover/bh-popover.js

@@ -1,326 +0,0 @@
-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: 'a7558db0c7b23e4ec142ec3ec5e37e5e43ecaf3c' }, h("div", { key: '096623edfec8b24ce671855023676ba9e724141c', class: "popover", style: { width: this.width } }, h("div", { key: '901ff94955110af56d627e145784771975b3b5f8', class: "popover-content" }, h("div", { key: '0948fe57cdbbed592c5f93e8b12536c501cd5e27', class: "popover-menu" }, this.showAvatar && (h("div", { key: '6d0cb4e23fc4ceda1dd68b5d89216c6e50c4c18a', class: "popover-header" }, h("div", { key: '9411bf1f7ada776fe571db95648bb0805e627ede', class: "avatar-group" }, h("div", { key: '5408e5fd2506587cc6fd4899f83094441101dfc3', class: "avatar" }, this.avatarSrc ? (h("img", { src: this.avatarSrc, alt: this.popoverTitle, class: "avatar-image" })) : (h("slot", { name: "avatar" }))), h("div", { key: '9b30791b5bb664c7fcdcf10799b133fa649da830', class: "brand-info" }, h("div", { key: 'cc2304d4e9189485ac3e7f7f7a7bf3b321f99f16', class: "brand-name" }, this.popoverTitle), this.viewPortfolioText && (h("button", { key: 'b3b002ebf605618453618cfdb773c35b3355011a', class: "portfolio-link", onClick: this.handlePortfolioClick, type: "button" }, this.viewPortfolioText)))))), this.showSearch && (h("div", { key: '04798ef99a65da73afbe794250a11dec659868ed', class: "search-container" }, h("div", { key: 'e90f1d2137036da8ba4ad8b02d747892958164c3', class: "search-input" }, h("div", { key: '0efa8b359b1b523c2afd3dc26aa86ce3c86c38f7', class: "search-content" }, h("span", { key: '90d4054abc0c3bb758b3a43b0e21835609ac3b5e', class: "material-symbols-outlined search-icon" }, "search"), h("input", { key: 'abfd05266b12e5599ff3d7c3c79af659e5085584', type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, class: "search-field" }))))), h("div", { key: '82906cd547356049aa9a7541b89152e1a8268cb5', 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": "/home/runner/work/bellhopos/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": "/home/runner/work/bellhopos/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