@actabldesign/bellhop-core 0.0.3 → 0.0.6

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

@@ -0,0 +1,316 @@
+import { h, Host } from "@stencil/core";
+const DEFAULT_COLORS = [
+    'var(--color-brand-600)',
+    'var(--color-orange-500)',
+    'var(--color-success-500)',
+    'var(--color-purple-600)',
+    'var(--color-accent-500)',
+    'var(--color-teal-500)',
+    'var(--color-lime-500)',
+    'var(--color-amber-500)',
+];
+export class BhBarChart {
+    /**
+     * Chart data
+     */
+    data = {
+        series: [
+            { name: 'Series 1', values: [30, 45, 20, 35, 50, 40, 60, 35, 25, 55, 40], color: '#94a3b8' },
+            { name: 'Series 2', values: [20, 25, 40, 30, 35, 45, 25, 30, 40, 20, 50], color: '#2563eb' },
+            { name: 'Series 3', values: [25, 15, 35, 20, 15, 20, 30, 25, 30, 35, 25], color: '#7c3aed' },
+        ],
+    };
+    /**
+     * Chart type: simple or stacked
+     */
+    type = 'stacked';
+    /**
+     * Chart orientation: vertical or horizontal
+     */
+    orientation = 'vertical';
+    /**
+     * Whether to animate the chart
+     */
+    animated = true;
+    /**
+     * Maximum height for vertical bars
+     */
+    maxHeight = 150;
+    /**
+     * Maximum width for horizontal bars
+     */
+    maxWidth = 200;
+    tooltipVisible = false;
+    tooltipX = 0;
+    tooltipY = 0;
+    tooltipHeader = '';
+    tooltipItems = [];
+    tooltipTotal = '';
+    showTooltipTotal = false;
+    processData() {
+        if (!this.data.series?.length || !this.data.series[0].values.length) {
+            return [];
+        }
+        const bars = [];
+        if (this.type === 'simple') {
+            const values = this.data.series[0].values;
+            const maxValue = Math.max(...values);
+            for (let i = 0; i < values.length; i++) {
+                const value = values[i] || 0;
+                const segments = [];
+                if (value > 0) {
+                    const height = (value / maxValue) * this.maxHeight;
+                    const width = (value / maxValue) * this.maxWidth;
+                    segments.push({
+                        value,
+                        height,
+                        width,
+                        color: DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+                        seriesName: this.data.categories?.[i] || `Bar ${i + 1}`,
+                    });
+                }
+                bars.push({
+                    segments,
+                    totalValue: value,
+                    category: this.data.categories?.[i],
+                });
+            }
+        }
+        else {
+            const numBars = this.data.series[0].values.length;
+            const maxTotal = Math.max(...Array.from({ length: numBars }, (_, i) => this.data.series.reduce((sum, series) => sum + (series.values[i] || 0), 0)));
+            for (let barIndex = 0; barIndex < numBars; barIndex++) {
+                const segments = [];
+                let totalValue = 0;
+                for (const series of this.data.series) {
+                    const value = series.values[barIndex] || 0;
+                    totalValue += value;
+                    if (value > 0) {
+                        const height = (value / maxTotal) * this.maxHeight;
+                        const width = (value / maxTotal) * this.maxWidth;
+                        segments.push({
+                            value,
+                            height,
+                            width,
+                            color: series.color || '#64748b',
+                            seriesName: series.name,
+                        });
+                    }
+                }
+                bars.push({
+                    segments,
+                    totalValue,
+                    category: this.data.categories?.[barIndex],
+                });
+            }
+        }
+        return bars;
+    }
+    handleColumnHover = (event, bar, columnIndex) => {
+        this.tooltipVisible = true;
+        this.tooltipX = event.clientX;
+        this.tooltipY = event.clientY;
+        this.tooltipHeader = bar.category || `Column ${columnIndex + 1}`;
+        const items = [];
+        bar.segments.forEach((segment) => {
+            if (segment.seriesName && segment.value > 0) {
+                items.push({
+                    color: segment.color,
+                    label: segment.seriesName,
+                    value: segment.value.toString(),
+                });
+            }
+        });
+        this.tooltipItems = items;
+        this.tooltipTotal = bar.totalValue.toString();
+        this.showTooltipTotal = items.length > 1;
+    };
+    handleColumnMove = (event) => {
+        if (this.tooltipVisible) {
+            this.tooltipX = event.clientX;
+            this.tooltipY = event.clientY;
+        }
+    };
+    handleColumnLeave = () => {
+        this.tooltipVisible = false;
+    };
+    render() {
+        const processedData = this.processData();
+        return (h(Host, { key: 'f851ed646c231a9c1c8e6757d0a46e2d9363f942' }, h("div", { key: 'c306d4f127c52ec87b0b470286491d928b6b6337', class: {
+                'bar-chart': true,
+                [this.type]: true,
+                [this.orientation]: true,
+                'bar-chart-animated': this.animated,
+            } }, this.orientation === 'vertical' ? (h("div", { class: "vertical-container" }, processedData.map((bar, i) => (h("div", { key: i, class: "bar-column vertical", onMouseEnter: (e) => this.handleColumnHover(e, bar, i), onMouseMove: this.handleColumnMove, onMouseLeave: this.handleColumnLeave }, bar.segments.map((segment, segIndex) => (h("div", { key: segIndex, class: "bar-segment vertical", style: {
+                height: `${segment.height}px`,
+                backgroundColor: segment.color,
+            } })))))))) : (h("div", { class: "horizontal-container" }, processedData.map((bar, i) => (h("div", { key: i, class: "bar-row horizontal", onMouseEnter: (e) => this.handleColumnHover(e, bar, i), onMouseMove: this.handleColumnMove, onMouseLeave: this.handleColumnLeave }, bar.segments.map((segment, segIndex) => (h("div", { key: segIndex, class: "bar-segment horizontal", style: {
+                width: `${(segment.value / bar.totalValue) * 100}%`,
+                backgroundColor: segment.color,
+            } }))))))))), h("bh-chart-tooltip", { key: '765ff842c48a11ec414615846f6404b642b29933', visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY, header: this.tooltipHeader, items: this.tooltipItems, total: this.tooltipTotal, showTotal: this.showTooltipTotal })));
+    }
+    static get is() { return "bh-bar-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-bar-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-bar-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BarChartData",
+                    "resolved": "BarChartData",
+                    "references": {
+                        "BarChartData": {
+                            "location": "local",
+                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-bar-chart/bh-bar-chart.tsx",
+                            "id": "src/components/bh-bar-chart/bh-bar-chart.tsx::BarChartData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chart data"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\n    series: [\n      { name: 'Series 1', values: [30, 45, 20, 35, 50, 40, 60, 35, 25, 55, 40], color: '#94a3b8' },\n      { name: 'Series 2', values: [20, 25, 40, 30, 35, 45, 25, 30, 40, 20, 50], color: '#2563eb' },\n      { name: 'Series 3', values: [25, 15, 35, 20, 15, 20, 30, 25, 30, 35, 25], color: '#7c3aed' },\n    ],\n  }"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BarChartType",
+                    "resolved": "\"simple\" | \"stacked\"",
+                    "references": {
+                        "BarChartType": {
+                            "location": "local",
+                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-bar-chart/bh-bar-chart.tsx",
+                            "id": "src/components/bh-bar-chart/bh-bar-chart.tsx::BarChartType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chart type: simple or stacked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'stacked'"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BarChartOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BarChartOrientation": {
+                            "location": "local",
+                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-bar-chart/bh-bar-chart.tsx",
+                            "id": "src/components/bh-bar-chart/bh-bar-chart.tsx::BarChartOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chart orientation: vertical or horizontal"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            },
+            "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"
+            },
+            "maxHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum height for vertical bars"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-height",
+                "defaultValue": "150"
+            },
+            "maxWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width for horizontal bars"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "200"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tooltipVisible": {},
+            "tooltipX": {},
+            "tooltipY": {},
+            "tooltipHeader": {},
+            "tooltipItems": {},
+            "tooltipTotal": {},
+            "showTooltipTotal": {}
+        };
+    }
+}
+//# sourceMappingURL=bh-bar-chart.js.map

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

@@ -0,0 +1,231 @@
+import { h, Fragment } from "@stencil/core";
+export class BhBreadcrumbs {
+    /**
+     * Array of breadcrumb items
+     */
+    items = [];
+    /**
+     * Separator icon name (Material Symbols)
+     */
+    separator = 'chevron_right';
+    /**
+     * Whether to show the home button
+     */
+    showHome = true;
+    /**
+     * Maximum number of visible items before collapsing
+     */
+    maxVisibleItems = 4;
+    /**
+     * Event emitted when a breadcrumb item is clicked
+     */
+    bhItemClick;
+    /**
+     * Event emitted when navigating to a path
+     */
+    bhNavigate;
+    get parsedItems() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.items || [];
+    }
+    get displayData() {
+        const items = this.parsedItems;
+        if (!items || items.length <= this.maxVisibleItems) {
+            return {
+                displayItems: items ? [...items] : [],
+                showEllipsis: false,
+                collapsedItems: [],
+            };
+        }
+        else {
+            const lastItems = items.slice(-(this.maxVisibleItems - 2));
+            return {
+                displayItems: [items[0], ...lastItems],
+                showEllipsis: true,
+                collapsedItems: items.slice(1, -(this.maxVisibleItems - 2)),
+            };
+        }
+    }
+    handleItemClick(item) {
+        if (!item.isActive && item.path) {
+            this.bhItemClick.emit(item);
+            this.bhNavigate.emit(item.path);
+        }
+    }
+    handleHomeClick = () => {
+        const homeItem = {
+            label: 'Home',
+            path: '/',
+        };
+        this.bhItemClick.emit(homeItem);
+        this.bhNavigate.emit('/');
+    };
+    handleEllipsisClick = () => {
+        const { collapsedItems } = this.displayData;
+        if (collapsedItems.length > 0) {
+            this.handleItemClick(collapsedItems[0]);
+        }
+    };
+    renderBreadcrumbItem(item, index) {
+        if (item.isActive || !item.path) {
+            return (h("div", { key: index, class: "breadcrumb-button breadcrumb-current", "aria-current": "page" }, h("span", { class: "breadcrumb-text" }, item.label)));
+        }
+        return (h("button", { key: index, type: "button", class: "breadcrumb-button", onClick: () => this.handleItemClick(item) }, h("span", { class: "breadcrumb-text" }, item.label)));
+    }
+    renderSeparator() {
+        return (h("div", { class: "breadcrumb-separator" }, h("span", { class: "material-symbols-outlined" }, this.separator)));
+    }
+    render() {
+        const { displayItems, showEllipsis, collapsedItems } = this.displayData;
+        return (h("nav", { key: 'f8fa78dc80f7e0a6d7c2161396348a892f4c9d0b', class: "breadcrumbs", "aria-label": "Breadcrumb" }, h("div", { key: 'b7a5ae9c8206992802c6be37687c41033d452d7b', class: "breadcrumbs-container" }, this.showHome && (h("div", { key: '0e5312f7c42a90f2f979be515a856d60d2ffd733', class: "breadcrumb-item" }, h("bh-button-icon", { key: 'b95e5c59a7a5800c670c0c2b05ffc482d25f084c', hierarchy: "quaternary", size: "xs", iconName: "cottage", onClick: this.handleHomeClick, "aria-label": "Home" }))), this.showHome && (displayItems.length > 0 || showEllipsis) && this.renderSeparator(), showEllipsis && displayItems.length > 0 && (h(Fragment, { key: '510adc7a0db807a4232c2d23bbdbf55de28cc0b0' }, h("div", { key: 'dafefca139a16b4ae71c6577f8885d055e7643dc', class: "breadcrumb-item" }, this.renderBreadcrumbItem(displayItems[0], 0)), this.renderSeparator(), h("div", { key: '0ea0b6c5093c551e9f927b08e3caddd2c85d64d7', class: "breadcrumb-item" }, h("button", { key: 'b14a815428f58d34a753e8b1ae841a6c7a815b15', type: "button", class: "breadcrumb-button breadcrumb-ellipsis", onClick: this.handleEllipsisClick, title: `Show ${collapsedItems.length} hidden items` }, h("span", { key: 'f22204e923c5bb60be5b578861be47c0bb8aacf0', class: "breadcrumb-text" }, "..."))), this.renderSeparator(), displayItems.slice(1).map((item, index) => (h(Fragment, null, h("div", { class: "breadcrumb-item", key: `item-${index + 1}` }, this.renderBreadcrumbItem(item, index + 1)), index < displayItems.slice(1).length - 1 && this.renderSeparator()))))), !showEllipsis && displayItems.map((item, index) => (h(Fragment, null, h("div", { class: "breadcrumb-item", key: `item-${index}` }, this.renderBreadcrumbItem(item, index)), index < displayItems.length - 1 && this.renderSeparator()))))));
+    }
+    static get is() { return "bh-breadcrumbs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-breadcrumbs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-breadcrumbs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BreadcrumbItem[] | string",
+                    "resolved": "BreadcrumbItem[] | string",
+                    "references": {
+                        "BreadcrumbItem": {
+                            "location": "local",
+                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-breadcrumbs/bh-breadcrumbs.tsx",
+                            "id": "src/components/bh-breadcrumbs/bh-breadcrumbs.tsx::BreadcrumbItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of breadcrumb items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "separator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Separator icon name (Material Symbols)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "separator",
+                "defaultValue": "'chevron_right'"
+            },
+            "showHome": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the home button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-home",
+                "defaultValue": "true"
+            },
+            "maxVisibleItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of visible items before collapsing"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-visible-items",
+                "defaultValue": "4"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhItemClick",
+                "name": "bhItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a breadcrumb item is clicked"
+                },
+                "complexType": {
+                    "original": "BreadcrumbItem",
+                    "resolved": "BreadcrumbItem",
+                    "references": {
+                        "BreadcrumbItem": {
+                            "location": "local",
+                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-breadcrumbs/bh-breadcrumbs.tsx",
+                            "id": "src/components/bh-breadcrumbs/bh-breadcrumbs.tsx::BreadcrumbItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "bhNavigate",
+                "name": "bhNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when navigating to a path"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bh-breadcrumbs.js.map