@actabldesign/bellhop-core 0.0.3

package/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": "/home/runner/work/bellhopos/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": "/home/runner/work/bellhopos/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

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/bh-breadcrumbs/bh-breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Fragment } from '@stencil/core';\n\nexport interface BreadcrumbItem {\n  label: string;\n  path?: string;\n  isActive?: boolean;\n}\n\n@Component({\n  tag: 'bh-breadcrumbs',\n  styleUrl: 'bh-breadcrumbs.css',\n  shadow: true,\n})\nexport class BhBreadcrumbs {\n  /**\n   * Array of breadcrumb items\n   */\n  @Prop() items: BreadcrumbItem[] | string = [];\n\n  /**\n   * Separator icon name (Material Symbols)\n   */\n  @Prop() separator: string = 'chevron_right';\n\n  /**\n   * Whether to show the home button\n   */\n  @Prop() showHome: boolean = true;\n\n  /**\n   * Maximum number of visible items before collapsing\n   */\n  @Prop() maxVisibleItems: number = 4;\n\n  /**\n   * Event emitted when a breadcrumb item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<BreadcrumbItem>;\n\n  /**\n   * Event emitted when navigating to a path\n   */\n  @Event() bhNavigate!: EventEmitter<string>;\n\n  private get parsedItems(): BreadcrumbItem[] {\n    if (typeof this.items === 'string') {\n      try {\n        return JSON.parse(this.items);\n      } catch {\n        return [];\n      }\n    }\n    return this.items || [];\n  }\n\n  private get displayData() {\n    const items = this.parsedItems;\n    if (!items || items.length <= this.maxVisibleItems) {\n      return {\n        displayItems: items ? [...items] : [],\n        showEllipsis: false,\n        collapsedItems: [],\n      };\n    } else {\n      const lastItems = items.slice(-(this.maxVisibleItems - 2));\n      return {\n        displayItems: [items[0], ...lastItems],\n        showEllipsis: true,\n        collapsedItems: items.slice(1, -(this.maxVisibleItems - 2)),\n      };\n    }\n  }\n\n  private handleItemClick(item: BreadcrumbItem) {\n    if (!item.isActive && item.path) {\n      this.bhItemClick.emit(item);\n      this.bhNavigate.emit(item.path);\n    }\n  }\n\n  private handleHomeClick = () => {\n    const homeItem: BreadcrumbItem = {\n      label: 'Home',\n      path: '/',\n    };\n    this.bhItemClick.emit(homeItem);\n    this.bhNavigate.emit('/');\n  };\n\n  private handleEllipsisClick = () => {\n    const { collapsedItems } = this.displayData;\n    if (collapsedItems.length > 0) {\n      this.handleItemClick(collapsedItems[0]);\n    }\n  };\n\n  private renderBreadcrumbItem(item: BreadcrumbItem, index: number) {\n    if (item.isActive || !item.path) {\n      return (\n        <div\n          key={index}\n          class=\"breadcrumb-button breadcrumb-current\"\n          aria-current=\"page\"\n        >\n          <span class=\"breadcrumb-text\">{item.label}</span>\n        </div>\n      );\n    }\n\n    return (\n      <button\n        key={index}\n        type=\"button\"\n        class=\"breadcrumb-button\"\n        onClick={() => this.handleItemClick(item)}\n      >\n        <span class=\"breadcrumb-text\">{item.label}</span>\n      </button>\n    );\n  }\n\n  private renderSeparator() {\n    return (\n      <div class=\"breadcrumb-separator\">\n        <span class=\"material-symbols-outlined\">{this.separator}</span>\n      </div>\n    );\n  }\n\n  render() {\n    const { displayItems, showEllipsis, collapsedItems } = this.displayData;\n\n    return (\n      <nav class=\"breadcrumbs\" aria-label=\"Breadcrumb\">\n        <div class=\"breadcrumbs-container\">\n          {/* Home button */}\n          {this.showHome && (\n            <div class=\"breadcrumb-item\">\n              <bh-button-icon\n                hierarchy=\"quaternary\"\n                size=\"xs\"\n                iconName=\"cottage\"\n                onClick={this.handleHomeClick}\n                aria-label=\"Home\"\n              />\n            </div>\n          )}\n\n          {/* Separator after home */}\n          {this.showHome && (displayItems.length > 0 || showEllipsis) && this.renderSeparator()}\n\n          {/* With ellipsis */}\n          {showEllipsis && displayItems.length > 0 && (\n            <Fragment>\n              <div class=\"breadcrumb-item\">\n                {this.renderBreadcrumbItem(displayItems[0], 0)}\n              </div>\n\n              {this.renderSeparator()}\n\n              {/* Ellipsis button */}\n              <div class=\"breadcrumb-item\">\n                <button\n                  type=\"button\"\n                  class=\"breadcrumb-button breadcrumb-ellipsis\"\n                  onClick={this.handleEllipsisClick}\n                  title={`Show ${collapsedItems.length} hidden items`}\n                >\n                  <span class=\"breadcrumb-text\">...</span>\n                </button>\n              </div>\n\n              {this.renderSeparator()}\n\n              {/* Remaining items */}\n              {displayItems.slice(1).map((item, index) => (\n                <Fragment>\n                  <div class=\"breadcrumb-item\" key={`item-${index + 1}`}>\n                    {this.renderBreadcrumbItem(item, index + 1)}\n                  </div>\n\n                  {index < displayItems.slice(1).length - 1 && this.renderSeparator()}\n                </Fragment>\n              ))}\n            </Fragment>\n          )}\n\n          {/* Without ellipsis */}\n          {!showEllipsis && displayItems.map((item, index) => (\n            <Fragment>\n              <div class=\"breadcrumb-item\" key={`item-${index}`}>\n                {this.renderBreadcrumbItem(item, index)}\n              </div>\n\n              {index < displayItems.length - 1 && this.renderSeparator()}\n            </Fragment>\n          ))}\n        </div>\n      </nav>\n    );\n  }\n}\n"]}