@carbon/ibm-products-web-components 0.30.0-rc.0 → 0.31.0-rc.0

package/es/components/page-header/_story-assets/set-of-breadcrumbs.js

@@ -0,0 +1,154 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { __decorate } from 'tslib';
+import { LitElement, html } from 'lit';
+import { property, query, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { repeat } from 'lit/directives/repeat.js';
+import '@carbon/web-components/es/components/breadcrumb/index.js';
+import '@carbon/web-components/es/components/overflow-menu/index.js';
+import { createOverflowHandler } from './overflowHandler.js';
+import OverflowMenuHorizontal16 from '@carbon/icons/es/overflow-menu--horizontal/16.js';
+import { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';
+import '../../truncated-text/truncated-text.js';
+import styles from './set-of-breadcrumbs.scss.js';
+import '../page-header-title-breadcrumb.js';
+
+// cspell:words currentpage
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const blockClass = `c4p--set-of-breadcrumbs`;
+let SetOfBreadcrumbs = class SetOfBreadcrumbs extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Hidden items that will be rendered in the overflow menu.
+         */
+        this.hiddenItems = [];
+        /**
+         * The list of breadcrumbs.
+         */
+        this.breadcrumbsData = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.style.visibility = 'hidden';
+    }
+    firstUpdated() {
+        if (!this.container) {
+            return;
+        }
+        const sr = this.shadowRoot;
+        const breadcrumb = sr === null || sr === void 0 ? void 0 : sr.querySelector('cds-breadcrumb');
+        if (breadcrumb) {
+            breadcrumb.style.display = 'block';
+            requestAnimationFrame(() => {
+                var _a;
+                const ol = (_a = breadcrumb.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ol');
+                if (ol) {
+                    ol.style.display = 'flex';
+                    ol.style.flexWrap = 'unset';
+                }
+            });
+        }
+        this.updateComplete.then(() => {
+            requestAnimationFrame(() => {
+                this.overflowHandler = createOverflowHandler({
+                    offsetValue: 14,
+                    container: this.container,
+                    onChange: (visibleItems, _) => {
+                        var _a;
+                        this.hiddenItems = (_a = this.breadcrumbsData) === null || _a === void 0 ? void 0 : _a.slice(visibleItems.length);
+                    },
+                });
+            });
+        });
+        // On first render, all elements are initially visible. so hiding `this` visibility in connectedCallback
+        // The handler runs on the second render to hide specific elements as needed.
+        // The following line restores visibility after layout settles, allowing for smoother transitions.
+        setTimeout(() => {
+            this.style.visibility = 'visible';
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.overflowHandler) {
+            this.overflowHandler.disconnect();
+        }
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        return html `
+      <cds-breadcrumb
+        aria-label="breadcrumbs"
+        class=${classMap({
+            [`${blockClass}`]: true,
+        })}
+      >
+        ${repeat((_b = (_a = this.breadcrumbsData) === null || _a === void 0 ? void 0 : _a.slice(0, -1)) !== null && _b !== void 0 ? _b : [], (item) => { var _a; return (_a = item.href) !== null && _a !== void 0 ? _a : item.text; }, (item) => html `
+            <cds-breadcrumb-item>
+              <cds-breadcrumb-link href="${item.href}">
+                ${item.text}
+              </cds-breadcrumb-link>
+            </cds-breadcrumb-item>
+          `)}
+
+        <cds-breadcrumb-item
+          data-fixed
+          style="display: ${((_c = this.hiddenItems) === null || _c === void 0 ? void 0 : _c.length) >= 2 ? 'flex' : 'none'}"
+        >
+          <cds-overflow-menu breadcrumb="" align="bottom">
+            ${iconLoader(OverflowMenuHorizontal16, {
+            slot: 'icon',
+        })}
+            <span slot="tooltip-content"> Breadcrumbs </span>
+            <cds-overflow-menu-body size="sm">
+              ${repeat((_e = (_d = this.hiddenItems) === null || _d === void 0 ? void 0 : _d.slice(0, -1)) !== null && _e !== void 0 ? _e : [], (item) => { var _a; return (_a = item.href) !== null && _a !== void 0 ? _a : item.text; }, (item) => html `
+                  <cds-overflow-menu-item href=${item.href}>
+                    ${item.text}
+                  </cds-overflow-menu-item>
+                `)}
+            </cds-overflow-menu-body>
+          </cds-overflow-menu>
+        </cds-breadcrumb-item>
+        <c4p-page-header-title-breadcrumb data-fixed>
+          <cds-breadcrumb-link is-currentpage="">
+            <c4p-truncated-text
+              value="${this.breadcrumbsData.at(-1).text}"
+              lines="1"
+              autoalign
+            ></c4p-truncated-text>
+          </cds-breadcrumb-link>
+        </c4p-page-header-title-breadcrumb>
+      </cds-breadcrumb>
+    `;
+    }
+};
+SetOfBreadcrumbs.styles = styles;
+__decorate([
+    property({ type: Array })
+], SetOfBreadcrumbs.prototype, "hiddenItems", void 0);
+__decorate([
+    property({ type: Array, attribute: 'breadcrumbs-data', reflect: true })
+], SetOfBreadcrumbs.prototype, "breadcrumbsData", void 0);
+__decorate([
+    query(`.${blockClass}`)
+], SetOfBreadcrumbs.prototype, "container", void 0);
+SetOfBreadcrumbs = __decorate([
+    customElement('set-of-breadcrumbs')
+], SetOfBreadcrumbs);
+var SetOfBreadcrumbs$1 = SetOfBreadcrumbs;
+
+export { SetOfBreadcrumbs$1 as default };
+//# sourceMappingURL=set-of-breadcrumbs.js.map

package/es/components/page-header/_story-assets/set-of-breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-of-breadcrumbs.js","sources":["../../../../src/components/page-header/_story-assets/set-of-breadcrumbs.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}