@carbon/ibm-products-web-components/es/components/page-header/_story-assets/set-of-breadcrumbs.js

Carbon for IBM Products Web Components

/**
 * 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/web-components/es/icons/overflow-menu--horizontal/16.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">
            ${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