@telesign/boreal-web-components 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/collection/components/navigation/bds-breadcrumb/bds-breadcrumb.js

@@ -0,0 +1,292 @@
+import { h } from "@stencil/core";
+import { inheritAriaAttributes } from "../../../utils/index";
+/**
+ * @summary Breadcrumb navigation container component. Provides a structured navigation trail and
+ * handles overflow using a collapse mechanism when the number of items exceeds `maxItems`.
+ *
+ * @slot - The content of the bds-breadcrumb group. It's meant for multiple `<bds-breadcrumb-item>` elements.
+ */
+export class BdsBreadcrumb {
+    constructor() {
+        this.inheritedAttributes = {};
+        /**
+         * Separator rendered between breadcrumb items.
+         * @default "/"
+         */
+        this.separator = '/';
+        /**
+         * Maximum number of breadcrumb items visible before collapsing.
+         * If set to 0 or undefined, no collapsing is applied.
+         * @default 0
+         */
+        this.maxItems = 0;
+        /**
+         * Number of items visible at the start before collapse occurs.
+         * @default 1
+         */
+        this.itemsBeforeCollapse = 1;
+        /**
+         * Number of items visible at the end after collapse occurs.
+         * @default 1
+         */
+        this.itemsAfterCollapse = 1;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = { ...inheritAriaAttributes(this.el) };
+        this.handleSlotChange();
+    }
+    onSeparatorChange() {
+        this.applyCustomSeparator();
+    }
+    onMaxItemsChange() {
+        this.updateBreadcrumbCollapse();
+    }
+    onCollapsedClick(ev) {
+        ev.stopPropagation();
+        const breadcrumbs = this.getBreadcrumbItems();
+        const collapsedBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.collapsed);
+        const detail = {
+            element: ev.detail.element,
+            collapsedBreadcrumbs,
+        };
+        this.bdsClickCollapsed.emit(detail);
+    }
+    onBreadcrumbClick(ev) {
+        ev.stopPropagation();
+        const items = this.getBreadcrumbItems();
+        const index = items.indexOf(ev.detail.element);
+        this.bdsClickBreadcrumb.emit({
+            element: ev.detail.element,
+            index,
+            href: ev.detail.href,
+            router: ev.detail.router,
+        });
+    }
+    applyCustomSeparator() {
+        this.el.style.setProperty('--bds-breadcrumb-separator', `"${this.separator}"`);
+    }
+    handleSlotChange() {
+        this.applyCustomSeparator();
+        this.updateBreadcrumbCollapse();
+    }
+    updateBreadcrumbCollapse() {
+        if (!this.shouldCollapse()) {
+            this.showAllItems();
+            return;
+        }
+        const items = this.getBreadcrumbItems();
+        this.applyVisibility(items);
+    }
+    shouldCollapse() {
+        const items = this.getBreadcrumbItems();
+        const maxItems = this.maxItems === this.itemsBeforeCollapse + this.itemsAfterCollapse ? this.maxItems + 1 : this.maxItems;
+        return maxItems > 0 && items.length > maxItems && this.itemsBeforeCollapse + this.itemsAfterCollapse < maxItems;
+    }
+    getBreadcrumbItems() {
+        return Array.from(this.el.querySelectorAll('bds-breadcrumb-item'));
+    }
+    showAllItems() {
+        const items = this.getBreadcrumbItems();
+        items.forEach(item => {
+            item.collapsed = false;
+            item.showCollapse = false;
+        });
+    }
+    applyVisibility(items) {
+        const collapseStart = this.itemsBeforeCollapse;
+        const collapseEnd = items.length - this.itemsAfterCollapse;
+        items.forEach((breadcrumb, index) => {
+            breadcrumb.collapsed = false;
+            breadcrumb.showCollapse = false;
+            if (index >= collapseStart && index < collapseEnd) {
+                breadcrumb.collapsed = true;
+            }
+            const hasCollapsedItems = collapseEnd > collapseStart;
+            if (hasCollapsedItems && index === collapseStart) {
+                breadcrumb.showCollapse = true;
+            }
+        });
+    }
+    render() {
+        return (h("nav", { key: '1a981018c53a8f3a75ff183c519962ff56db45b7', "aria-label": "Breadcrumb navigation", ...this.inheritedAttributes, class: "bds-breadcrumb" }, h("ol", { key: 'b831faa04943ec15f0aba65c497ff550c057b6e2', class: "bds-breadcrumb__list" }, h("slot", { key: 'a43ca3510691046d72777a4e9a25049263104ad3', onSlotchange: () => this.handleSlotChange() }))));
+    }
+    static get is() { return "bds-breadcrumb"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-breadcrumb.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-breadcrumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "separator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"/\""
+                        }],
+                    "text": "Separator rendered between breadcrumb items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "separator",
+                "defaultValue": "'/'"
+            },
+            "maxItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "0"
+                        }],
+                    "text": "Maximum number of breadcrumb items visible before collapsing.\nIf set to 0 or undefined, no collapsing is applied."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-items",
+                "defaultValue": "0"
+            },
+            "itemsBeforeCollapse": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "1"
+                        }],
+                    "text": "Number of items visible at the start before collapse occurs."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items-before-collapse",
+                "defaultValue": "1"
+            },
+            "itemsAfterCollapse": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "1"
+                        }],
+                    "text": "Number of items visible at the end after collapse occurs."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items-after-collapse",
+                "defaultValue": "1"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bdsClickCollapsed",
+                "name": "bdsClickCollapsed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the collapse indicator (\"...\") is clicked.\nReturns a reference to the clicked element and the list of collapsed breadcrumb items."
+                },
+                "complexType": {
+                    "original": "BdsClickCollapsedEvent",
+                    "resolved": "{ element: HTMLElement; collapsedBreadcrumbs: HTMLBdsBreadcrumbItemElement[]; }",
+                    "references": {
+                        "BdsClickCollapsedEvent": {
+                            "location": "import",
+                            "path": "./types/IBreadcrumb",
+                            "id": "src/components/navigation/bds-breadcrumb/types/IBreadcrumb.ts::BdsClickCollapsedEvent",
+                            "referenceLocation": "BdsClickCollapsedEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "bdsClickBreadcrumb",
+                "name": "bdsClickBreadcrumb",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a breadcrumb item is clicked."
+                },
+                "complexType": {
+                    "original": "BdsClickBreadcrumbEvent",
+                    "resolved": "{ element: HTMLElement; index?: number; href?: string; router?: boolean; }",
+                    "references": {
+                        "BdsClickBreadcrumbEvent": {
+                            "location": "import",
+                            "path": "./types/IBreadcrumb",
+                            "id": "src/components/navigation/bds-breadcrumb/types/IBreadcrumb.ts::BdsClickBreadcrumbEvent",
+                            "referenceLocation": "BdsClickBreadcrumbEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "separator",
+                "methodName": "onSeparatorChange"
+            }, {
+                "propName": "maxItems",
+                "methodName": "onMaxItemsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bdsClickCollapse",
+                "method": "onCollapsedClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "bdsClick",
+                "method": "onBreadcrumbClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/navigation/bds-breadcrumb/types/IBreadcrumb.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/navigation/bds-breadcrumb-item/bds-breadcrumb-item.css

@@ -0,0 +1,64 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+bds-breadcrumb-item:last-child li::after {
+  display: none;
+}
+
+.bds-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  cursor: default;
+}
+.bds-breadcrumb-item__text {
+  font-size: var(--boreal-typography-font-size-sm);
+  line-height: var(--boreal-typography-line-height-sm);
+  font-family: var(--boreal-typography-font-family-primary);
+}
+.bds-breadcrumb-item__collapse-indicator {
+  display: inline-flex;
+}
+.bds-breadcrumb-item:not(.bds-breadcrumb-item--active)::after {
+  content: var(--bds-breadcrumb-separator, "/");
+  margin: 0 var(--boreal-spacing-xs);
+  color: var(--boreal-text-disabled);
+  font-weight: normal;
+  line-height: var(--boreal-typography-line-height-sm);
+}
+.bds-breadcrumb-item .bds-typography--link:not(:hover) {
+  color: var(--boreal-text-default);
+}
+.bds-breadcrumb-item--collapsed {
+  display: none;
+}
+.bds-breadcrumb-item--collapsed .bds-breadcrumb-item__text {
+  display: none;
+}
+.bds-breadcrumb-item--collapsed::after {
+  display: none;
+}
+.bds-breadcrumb-item--collapsed:has(.bds-breadcrumb-item__collapse-indicator) {
+  display: inline-flex;
+}
+.bds-breadcrumb-item--active {
+  font-weight: var(--boreal-typography-font-weight-semibold);
+}
+.bds-breadcrumb-item--active .bds-breadcrumb-item {
+  color: var(--boreal-text-base);
+}
+.bds-breadcrumb-item:not(.bds-breadcrumb-item--active) {
+  cursor: pointer;
+}