@carbon/ibm-products-web-components 0.37.0 → 0.38.0

package/es-custom/components/page-header/page-header-actions-set/page-header-actions-set.js

@@ -0,0 +1,162 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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 { prefix } from "../../../globals/settings.js";
+import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import page_header_actions_set_default$1 from "./page-header-actions-set.scss.js";
+import { LitElement, html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
+import { repeat } from "lit/directives/repeat.js";
+import '@carbon/web-components/es-custom/components/overflow-menu/index.js';
+import OverflowMenuVertical16 from "@carbon/icons/es/overflow-menu--vertical/16.js";
+
+//#region src/components/page-header/page-header-actions-set/page-header-actions-set.ts
+/**
+* @license
+*
+* Copyright IBM Corp. 2025, 2026
+*
+* 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 = `${prefix}--page-header-actions-set`;
+let CDSPageHeaderActionsSet = class CDSPageHeaderActionsSet extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.hiddenItems = [];
+		this.actionsData = [];
+		this.isSetup = false;
+		this.lastContainerWidth = 0;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.style.visibility = "hidden";
+	}
+	firstUpdated() {
+		if (!this.container) return;
+		this.updateComplete.then(() => {
+			requestAnimationFrame(() => {
+				this.setupOverflowDetection();
+				this.isSetup = true;
+				this.style.visibility = "visible";
+			});
+		});
+	}
+	updated(changedProperties) {
+		if (this.isSetup && changedProperties.has("actionsData") && !changedProperties.has("hiddenItems")) this.updateComplete.then(() => {
+			requestAnimationFrame(() => this.setupOverflowDetection());
+		});
+	}
+	setupOverflowDetection() {
+		if (!this.itemsContainer) return;
+		this.resizeObserver?.disconnect();
+		const slot = this.shadowRoot?.querySelector("slot");
+		const checkOverflow = () => {
+			const slottedElements = slot?.assignedElements();
+			if (!slottedElements || slottedElements.length === 0) return;
+			const containerWidth = this.offsetWidth || this.itemsContainer.clientWidth;
+			const overflowMenuWidth = 48;
+			if (containerWidth === 0) return;
+			if (Math.abs(containerWidth - this.lastContainerWidth) < 5) return;
+			this.lastContainerWidth = containerWidth;
+			let totalWidth = 0;
+			for (let i = 0; i < slottedElements.length; i++) totalWidth += slottedElements[i].offsetWidth;
+			if (totalWidth <= containerWidth) {
+				slottedElements.forEach((el) => {
+					el.removeAttribute("data-hidden");
+				});
+				this.hiddenItems = [];
+				return;
+			}
+			totalWidth = 0;
+			let visibleCount = 0;
+			for (let i = 0; i < slottedElements.length; i++) {
+				const itemWidth = slottedElements[i].offsetWidth;
+				if (totalWidth + itemWidth + overflowMenuWidth <= containerWidth) {
+					totalWidth += itemWidth;
+					visibleCount = i + 1;
+				} else break;
+			}
+			slottedElements.forEach((el, index) => {
+				if (index >= visibleCount) el.setAttribute("data-hidden", "");
+				else el.removeAttribute("data-hidden");
+			});
+			this.hiddenItems = this.actionsData?.slice(visibleCount) || [];
+		};
+		checkOverflow();
+		this.resizeObserver = new ResizeObserver(() => {
+			if (this.resizeTimeout) clearTimeout(this.resizeTimeout);
+			this.resizeTimeout = window.setTimeout(() => {
+				checkOverflow();
+			}, 100);
+		});
+		this.resizeObserver.observe(this);
+		this.resizeObserver.observe(this.itemsContainer);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.resizeObserver?.disconnect();
+		if (this.resizeTimeout) clearTimeout(this.resizeTimeout);
+	}
+	handleOverflowItemClick(index) {
+		const button = ((this.shadowRoot?.querySelector("slot"))?.assignedElements())[this.actionsData.length - this.hiddenItems.length + index];
+		if (button) button.click();
+	}
+	render() {
+		return html`
+      <div class="${blockClass}">
+        <div class="${blockClass}__items">
+          <slot></slot>
+        </div>
+
+        <div data-offset ?data-hidden=${this.hiddenItems.length === 0}>
+          <cds-custom-overflow-menu
+            size="md"
+            close-on-activation
+            enter-delay-ms="0"
+            leave-delay-ms="0"
+            align="left"
+            data-floating-menu-container
+          >
+            ${iconLoader(OverflowMenuVertical16, {
+			class: `${blockClass}__overflow-svg`,
+			slot: "icon"
+		})}
+            <span slot="tooltip-content">More actions</span>
+            <cds-custom-overflow-menu-body flipped>
+              ${repeat(this.hiddenItems ?? [], (_item, index) => index, (item, index) => html`
+                  <cds-custom-overflow-menu-item
+                    @click="${() => this.handleOverflowItemClick(index)}"
+                  >
+                    ${item.label}
+                  </cds-custom-overflow-menu-item>
+                `)}
+            </cds-custom-overflow-menu-body>
+          </cds-custom-overflow-menu>
+        </div>
+      </div>
+    `;
+	}
+	static {
+		this.styles = page_header_actions_set_default$1;
+	}
+};
+__decorate([state()], CDSPageHeaderActionsSet.prototype, "hiddenItems", void 0);
+__decorate([property({
+	type: Array,
+	attribute: "actions-data",
+	reflect: true
+})], CDSPageHeaderActionsSet.prototype, "actionsData", void 0);
+__decorate([query(`.${blockClass}`)], CDSPageHeaderActionsSet.prototype, "container", void 0);
+__decorate([query(`.${blockClass}__items`)], CDSPageHeaderActionsSet.prototype, "itemsContainer", void 0);
+CDSPageHeaderActionsSet = __decorate([customElement(`${prefix}-page-header-actions-set`)], CDSPageHeaderActionsSet);
+var page_header_actions_set_default = CDSPageHeaderActionsSet;
+
+//#endregion
+export { page_header_actions_set_default as default };
+//# sourceMappingURL=page-header-actions-set.js.map

package/es-custom/components/page-header/page-header-actions-set/page-header-actions-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-actions-set.js","names":["styles"],"sources":["../../../../src/components/page-header/page-header-actions-set/page-header-actions-set.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport '@carbon/web-components/es-custom/components/overflow-menu/index.js';\nimport OverflowMenuVertical16 from '@carbon/icons/es/overflow-menu--vertical/16.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport styles from './page-header-actions-set.scss?lit';\nimport { prefix } from '../../../globals/settings';\n\nconst blockClass = `${prefix}--page-header-actions-set`;\n\ninterface PageAction {\n  label: string;\n}\n\n@customElement(`${prefix}-page-header-actions-set`)\nexport default class CDSPageHeaderActionsSet extends LitElement {\n  /**\n   * Hidden actions that will be rendered in the overflow menu.\n   */\n  @state()\n  hiddenItems: PageAction[] = [];\n\n  /**\n   * The list of page action labels for overflow menu.\n   */\n  @property({ type: Array, attribute: 'actions-data', reflect: true })\n  actionsData: PageAction[] = [];\n\n  /**\n   * Container holding all action buttons and the overflow menu.\n   */\n  @query(`.${blockClass}`)\n  private container!: HTMLElement;\n\n  /**\n   * Items wrapper containing the slotted elements.\n   */\n  @query(`.${blockClass}__items`)\n  private itemsContainer!: HTMLElement;\n\n  private resizeObserver: ResizeObserver | undefined;\n  private isSetup = false;\n  private resizeTimeout: number | undefined;\n  private lastContainerWidth = 0;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.style.visibility = 'hidden';\n  }\n\n  firstUpdated() {\n    if (!this.container) {\n      return;\n    }\n\n    this.updateComplete.then(() => {\n      requestAnimationFrame(() => {\n        this.setupOverflowDetection();\n        this.isSetup = true;\n        this.style.visibility = 'visible';\n      });\n    });\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    // Only re-setup if actionsData changed and we've already done initial setup\n    if (\n      this.isSetup &&\n      changedProperties.has('actionsData') &&\n      !changedProperties.has('hiddenItems')\n    ) {\n      this.updateComplete.then(() => {\n        requestAnimationFrame(() => this.setupOverflowDetection());\n      });\n    }\n  }\n\n  private setupOverflowDetection() {\n    if (!this.itemsContainer) {\n      return;\n    }\n\n    // Disconnect existing observer if any\n    this.resizeObserver?.disconnect();\n\n    // Get slotted elements\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement;\n\n    const checkOverflow = () => {\n      const slottedElements = slot?.assignedElements() as HTMLElement[];\n\n      if (!slottedElements || slottedElements.length === 0) {\n        return;\n      }\n\n      // Use the host element's width as it reflects the actual available space\n      const containerWidth =\n        this.offsetWidth || this.itemsContainer.clientWidth;\n      const overflowMenuWidth = 48; // Approximate width of overflow menu button\n\n      // If container has no width yet, skip check\n      if (containerWidth === 0) {\n        return;\n      }\n\n      // Prevent resize loop - only recalculate if width changed significantly (>5px)\n      if (Math.abs(containerWidth - this.lastContainerWidth) < 5) {\n        return;\n      }\n      this.lastContainerWidth = containerWidth;\n\n      // First, check if all items fit without overflow menu\n      let totalWidth = 0;\n      for (let i = 0; i < slottedElements.length; i++) {\n        totalWidth += slottedElements[i].offsetWidth;\n      }\n\n      // If all items fit, show all and hide overflow menu\n      if (totalWidth <= containerWidth) {\n        slottedElements.forEach((el) => {\n          el.removeAttribute('data-hidden');\n        });\n        this.hiddenItems = [];\n        return;\n      }\n\n      // Items don't fit, calculate how many can fit with overflow menu\n      totalWidth = 0;\n      let visibleCount = 0;\n\n      for (let i = 0; i < slottedElements.length; i++) {\n        const itemWidth = slottedElements[i].offsetWidth;\n\n        // Check if this item plus overflow menu would fit\n        if (totalWidth + itemWidth + overflowMenuWidth <= containerWidth) {\n          totalWidth += itemWidth;\n          visibleCount = i + 1;\n        } else {\n          break;\n        }\n      }\n\n      // Update visibility\n      slottedElements.forEach((el, index) => {\n        if (index >= visibleCount) {\n          el.setAttribute('data-hidden', '');\n        } else {\n          el.removeAttribute('data-hidden');\n        }\n      });\n\n      // Update hidden items for overflow menu\n      this.hiddenItems = this.actionsData?.slice(visibleCount) || [];\n    };\n\n    // Initial check\n    checkOverflow();\n\n    // Observe both the host element and items container for size changes with debouncing\n    this.resizeObserver = new ResizeObserver(() => {\n      // Clear existing timeout\n      if (this.resizeTimeout) {\n        clearTimeout(this.resizeTimeout);\n      }\n\n      // Debounce the check to prevent rapid recalculations\n      this.resizeTimeout = window.setTimeout(() => {\n        checkOverflow();\n      }, 100);\n    });\n\n    this.resizeObserver.observe(this);\n    this.resizeObserver.observe(this.itemsContainer);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n    if (this.resizeTimeout) {\n      clearTimeout(this.resizeTimeout);\n    }\n  }\n\n  private handleOverflowItemClick(index: number) {\n    // Get the slot and find the corresponding slotted element\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement;\n    const slottedElements = slot?.assignedElements() as HTMLElement[];\n    const hiddenIndex =\n      this.actionsData.length - this.hiddenItems.length + index;\n    const button = slottedElements[hiddenIndex];\n    if (button) {\n      button.click();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"${blockClass}\">\n        <div class=\"${blockClass}__items\">\n          <slot></slot>\n        </div>\n\n        <div data-offset ?data-hidden=${this.hiddenItems.length === 0}>\n          <cds-custom-overflow-menu\n            size=\"md\"\n            close-on-activation\n            enter-delay-ms=\"0\"\n            leave-delay-ms=\"0\"\n            align=\"left\"\n            data-floating-menu-container\n          >\n            ${iconLoader(OverflowMenuVertical16, {\n              class: `${blockClass}__overflow-svg`,\n              slot: 'icon',\n            })}\n            <span slot=\"tooltip-content\">More actions</span>\n            <cds-custom-overflow-menu-body flipped>\n              ${repeat(\n                this.hiddenItems ?? [],\n                (_item, index) => index,\n                (item, index) => html`\n                  <cds-custom-overflow-menu-item\n                    @click=\"${() => this.handleOverflowItemClick(index)}\"\n                  >\n                    ${item.label}\n                  </cds-custom-overflow-menu-item>\n                `\n              )}\n            </cds-custom-overflow-menu-body>\n          </cds-custom-overflow-menu>\n        </div>\n      </div>\n    `;\n  }\n  static styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'c4p-page-header-actions-set': CDSPageHeaderActionsSet;\n  }\n}\n"],"mappings":"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"}

package/es-custom/components/page-header/page-header-actions-set/page-header-actions-set.scss.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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 { css } from "lit";
+
+//#region src/components/page-header/page-header-actions-set/page-header-actions-set.scss?lit
+var page_header_actions_set_default = css([":host(c4p-page-header-actions-set){display:flex;flex:1;max-inline-size:100%;min-inline-size:0}:host(c4p-page-header-actions-set) cds-custom-overflow-menu:not(:defined){display:none}.c4p--page-header-actions-set{align-items:center;display:flex;gap:0;inline-size:100%;min-inline-size:0}.c4p--page-header-actions-set__items{align-items:center;display:flex;flex:1;gap:0;min-inline-size:0;overflow:hidden}.c4p--page-header-actions-set__items ::slotted(*){display:flex;flex-shrink:0}.c4p--page-header-actions-set__items ::slotted([data-hidden]){display:none}@media screen and (prefers-reduced-motion:reduce){[data-offset]{flex-shrink:0;opacity:1;transition:none}[data-offset][data-hidden]{opacity:0;pointer-events:none;visibility:hidden}}[data-offset]{flex-shrink:0;opacity:1;transition:opacity .15s ease-in-out}[data-offset][data-hidden]{opacity:0;pointer-events:none;visibility:hidden}.c4p--page-header-actions-set__overflow-svg{fill:var(--cds-custom-text-primary,#161616)}"]);
+
+//#endregion
+export { page_header_actions_set_default as default };
+//# sourceMappingURL=page-header-actions-set.scss.js.map

package/es-custom/components/page-header/page-header-actions-set/page-header-actions-set.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-actions-set.scss.js","names":[],"sources":["../../../../src/components/page-header/page-header-actions-set/page-header-actions-set.scss?lit"],"sourcesContent":["/*\n* Copyright IBM Corp. 2025, 2026\n*\n* This source code is licensed under the Apache-2.0 license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\n@use '@carbon/styles/scss/theme' as *;\n\n$prefix: 'c4p';\n$carbon-prefix: 'cds-custom';\n\n/* stylelint-disable selector-type-no-unknown */\n:host(#{$prefix}-page-header-actions-set) {\n  display: flex;\n  flex: 1;\n  max-inline-size: 100%;\n  min-inline-size: 0;\n\n  // Suppress custom elements until styles are loaded\n  #{$carbon-prefix}-overflow-menu:not(:defined) {\n    display: none;\n  }\n}\n\n$block-class: #{$prefix}--page-header-actions-set;\n\n.#{$block-class} {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  inline-size: 100%;\n  min-inline-size: 0;\n\n  &__items {\n    display: flex;\n    overflow: hidden;\n    flex: 1;\n    align-items: center;\n    gap: 0;\n    min-inline-size: 0;\n\n    ::slotted(*) {\n      display: flex;\n      flex-shrink: 0;\n    }\n\n    ::slotted([data-hidden]) {\n      display: none;\n    }\n  }\n}\n\n@media screen and (prefers-reduced-motion: reduce) {\n  [data-offset] {\n    flex-shrink: 0;\n    opacity: 1;\n    transition: none;\n\n    &[data-hidden] {\n      opacity: 0;\n      pointer-events: none;\n      visibility: hidden;\n    }\n  }\n}\n\n[data-offset] {\n  flex-shrink: 0;\n  opacity: 1;\n  transition: opacity 0.15s ease-in-out;\n\n  &[data-hidden] {\n    opacity: 0;\n    pointer-events: none;\n    visibility: hidden;\n  }\n}\n\n.#{$block-class}__overflow-svg {\n  fill: $text-primary;\n}\n"],"mappings":""}

package/es-custom/components/page-header/page-header-breadcrumbs-set/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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 "./page-header-breadcrumbs-set.js";

package/es-custom/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.js

@@ -0,0 +1,136 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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 { prefix } from "../../../globals/settings.js";
+import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import "../../truncated-text/index.js";
+import { createOverflowHandler } from "../_story-assets/overflowHandler.js";
+import "../page-header-title-breadcrumb.js";
+import page_header_breadcrumbs_set_default$1 from "./page-header-breadcrumbs-set.scss.js";
+import { classMap } from "lit/directives/class-map.js";
+import { LitElement, html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
+import { repeat } from "lit/directives/repeat.js";
+import '@carbon/web-components/es-custom/components/breadcrumb/index.js';
+import '@carbon/web-components/es-custom/components/overflow-menu/index.js';
+import OverflowMenuHorizontal16 from "@carbon/icons/es/overflow-menu--horizontal/16.js";
+
+//#region src/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.ts
+/**
+* @license
+*
+* Copyright IBM Corp. 2025, 2026
+*
+* 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 = `${prefix}--page-header-breadcrumbs-set`;
+let CDSPageHeaderBreadcrumbsSet = class CDSPageHeaderBreadcrumbsSet extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.hiddenItems = [];
+		this.breadcrumbsData = [];
+		this.title = "";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.style.visibility = "hidden";
+	}
+	firstUpdated() {
+		if (!this.container) return;
+		const breadcrumb = this.shadowRoot?.querySelector("cds-custom-breadcrumb");
+		if (breadcrumb) {
+			breadcrumb.style.display = "block";
+			requestAnimationFrame(() => {
+				const ol = breadcrumb.shadowRoot?.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, _) => {
+						const hiddenCount = (this.breadcrumbsData?.length ?? 1) - 1 - visibleItems.length;
+						this.hiddenItems = this.breadcrumbsData?.slice(0, hiddenCount) ?? [];
+					}
+				});
+			});
+		});
+		setTimeout(() => {
+			this.style.visibility = "visible";
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.overflowHandler) this.overflowHandler.disconnect();
+	}
+	render() {
+		return html`
+      <cds-custom-breadcrumb
+        aria-label="breadcrumbs"
+        class=${classMap({ [`${blockClass}`]: true })}
+      >
+        <cds-custom-breadcrumb-item
+          data-fixed
+          data-offset
+          style="display: ${this.hiddenItems?.length >= 1 ? "flex" : "none"}"
+        >
+          <cds-custom-overflow-menu breadcrumb="" align="bottom">
+            ${iconLoader(OverflowMenuHorizontal16, { slot: "icon" })}
+            <span slot="tooltip-content"> Breadcrumbs </span>
+            <cds-custom-overflow-menu-body size="sm">
+              ${repeat(this.hiddenItems ?? [], (item) => item.href ?? item.text, (item) => html`
+                  <cds-custom-overflow-menu-item href=${item.href}>
+                    ${item.text}
+                  </cds-custom-overflow-menu-item>
+                `)}
+            </cds-custom-overflow-menu-body>
+          </cds-custom-overflow-menu>
+        </cds-custom-breadcrumb-item>
+        ${repeat(this.breadcrumbsData?.slice(this.hiddenItems?.length ?? 0, -1) ?? [], (item) => item.href ?? item.text, (item) => html`
+            <cds-custom-breadcrumb-item>
+              <cds-custom-breadcrumb-link href="${item.href}">
+                ${item.text}
+              </cds-custom-breadcrumb-link>
+            </cds-custom-breadcrumb-item>
+          `)}
+        <c4p-page-header-title-breadcrumb data-fixed>
+          <cds-custom-breadcrumb-link is-currentpage="">
+            <c4p-truncated-text
+              value="${this.title}"
+              lines="1"
+              autoalign
+            ></c4p-truncated-text>
+          </cds-custom-breadcrumb-link>
+        </c4p-page-header-title-breadcrumb>
+      </cds-custom-breadcrumb>
+    `;
+	}
+	static {
+		this.styles = page_header_breadcrumbs_set_default$1;
+	}
+};
+__decorate([property({ type: Array })], CDSPageHeaderBreadcrumbsSet.prototype, "hiddenItems", void 0);
+__decorate([property({
+	type: Array,
+	attribute: "breadcrumbs-data",
+	reflect: true
+})], CDSPageHeaderBreadcrumbsSet.prototype, "breadcrumbsData", void 0);
+__decorate([property({ type: String })], CDSPageHeaderBreadcrumbsSet.prototype, "title", void 0);
+__decorate([query(`.${blockClass}`)], CDSPageHeaderBreadcrumbsSet.prototype, "container", void 0);
+CDSPageHeaderBreadcrumbsSet = __decorate([customElement(`${prefix}-page-header-breadcrumbs-set`)], CDSPageHeaderBreadcrumbsSet);
+var page_header_breadcrumbs_set_default = CDSPageHeaderBreadcrumbsSet;
+
+//#endregion
+export { page_header_breadcrumbs_set_default as default };
+//# sourceMappingURL=page-header-breadcrumbs-set.js.map

package/es-custom/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-breadcrumbs-set.js","names":["styles"],"sources":["../../../../src/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.ts"],"sourcesContent":["// cspell:words currentpage\n/**\n * @license\n *\n * Copyright IBM Corp. 2025, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport '@carbon/web-components/es-custom/components/breadcrumb/index.js';\nimport '@carbon/web-components/es-custom/components/overflow-menu/index.js';\nimport { createOverflowHandler } from '../utils';\nimport OverflowMenuHorizontal16 from '@carbon/icons/es/overflow-menu--horizontal/16.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport '../../truncated-text';\nimport styles from './page-header-breadcrumbs-set.scss?lit';\nimport '../page-header-title-breadcrumb';\nimport { prefix } from '../../../globals/settings';\n\nconst blockClass = `${prefix}--page-header-breadcrumbs-set`;\n\ninterface Breadcrumb {\n  text: string;\n  href: string;\n}\n\n@customElement(`${prefix}-page-header-breadcrumbs-set`)\nexport default class CDSPageHeaderBreadcrumbsSet extends LitElement {\n  /**\n   * Hidden items that will be rendered in the overflow menu.\n   */\n  @property({ type: Array })\n  hiddenItems: Breadcrumb[] = [];\n\n  /**\n   * The list of breadcrumbs.\n   */\n  @property({ type: Array, attribute: 'breadcrumbs-data', reflect: true })\n  breadcrumbsData: Breadcrumb[] = [];\n\n  /**\n   * The page title to display in the title breadcrumb.\n   */\n  @property({ type: String })\n  title = '';\n\n  /**\n   * Container holding all breadcrumbs and the overflow menu.\n   */\n  @query(`.${blockClass}`)\n  private container!: HTMLElement;\n\n  private overflowHandler: { disconnect: () => void } | undefined;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.style.visibility = 'hidden';\n  }\n\n  firstUpdated() {\n    if (!this.container) {\n      return;\n    }\n    const sr = this.shadowRoot;\n    const breadcrumb = sr?.querySelector(\n      'cds-custom-breadcrumb'\n    ) as HTMLElement | null;\n\n    if (breadcrumb) {\n      breadcrumb.style.display = 'block';\n\n      requestAnimationFrame(() => {\n        const ol = breadcrumb.shadowRoot?.querySelector(\n          'ol'\n        ) as HTMLElement | null;\n        if (ol) {\n          ol.style.display = 'flex';\n          ol.style.flexWrap = 'unset';\n        }\n      });\n    }\n\n    this.updateComplete.then(() => {\n      requestAnimationFrame(() => {\n        this.overflowHandler = createOverflowHandler({\n          offsetValue: 14,\n          container: this.container,\n          onChange: (visibleItems: HTMLElement[], _) => {\n            const totalItems = (this.breadcrumbsData?.length ?? 1) - 1; // Exclude last item\n            const hiddenCount = totalItems - visibleItems.length;\n            this.hiddenItems =\n              this.breadcrumbsData?.slice(0, hiddenCount) ?? [];\n          },\n        });\n      });\n    });\n    // On first render, all elements are initially visible. so hiding `this` visibility in connectedCallback\n    // The handler runs on the second render to hide specific elements as needed.\n    // The following line restores visibility after layout settles, allowing for smoother transitions.\n    setTimeout(() => {\n      this.style.visibility = 'visible';\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.overflowHandler) {\n      this.overflowHandler.disconnect();\n    }\n  }\n\n  render() {\n    return html`\n      <cds-custom-breadcrumb\n        aria-label=\"breadcrumbs\"\n        class=${classMap({\n          [`${blockClass}`]: true,\n        })}\n      >\n        <cds-custom-breadcrumb-item\n          data-fixed\n          data-offset\n          style=\"display: ${this.hiddenItems?.length >= 1 ? 'flex' : 'none'}\"\n        >\n          <cds-custom-overflow-menu breadcrumb=\"\" align=\"bottom\">\n            ${iconLoader(OverflowMenuHorizontal16, {\n              slot: 'icon',\n            })}\n            <span slot=\"tooltip-content\"> Breadcrumbs </span>\n            <cds-custom-overflow-menu-body size=\"sm\">\n              ${repeat(\n                this.hiddenItems ?? [],\n                (item) => item.href ?? item.text,\n                (item) => html`\n                  <cds-custom-overflow-menu-item href=${item.href}>\n                    ${item.text}\n                  </cds-custom-overflow-menu-item>\n                `\n              )}\n            </cds-custom-overflow-menu-body>\n          </cds-custom-overflow-menu>\n        </cds-custom-breadcrumb-item>\n        ${repeat(\n          this.breadcrumbsData?.slice(this.hiddenItems?.length ?? 0, -1) ?? [],\n          (item) => item.href ?? item.text,\n          (item) => html`\n            <cds-custom-breadcrumb-item>\n              <cds-custom-breadcrumb-link href=\"${item.href}\">\n                ${item.text}\n              </cds-custom-breadcrumb-link>\n            </cds-custom-breadcrumb-item>\n          `\n        )}\n        <c4p-page-header-title-breadcrumb data-fixed>\n          <cds-custom-breadcrumb-link is-currentpage=\"\">\n            <c4p-truncated-text\n              value=\"${this.title}\"\n              lines=\"1\"\n              autoalign\n            ></c4p-truncated-text>\n          </cds-custom-breadcrumb-link>\n        </c4p-page-header-title-breadcrumb>\n      </cds-custom-breadcrumb>\n    `;\n  }\n  static styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'c4p-page-header-breadcrumbs-set': CDSPageHeaderBreadcrumbsSet;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,aAAa,GAAG,OAAO;AAQd,wCAAM,oCAAoC,WAAW;;;qBAKtC,EAAE;yBAME,EAAE;eAM1B;;CAUR,oBAA0B;AACxB,QAAM,mBAAmB;AACzB,OAAK,MAAM,aAAa;;CAG1B,eAAe;AACb,MAAI,CAAC,KAAK,UACR;EAGF,MAAM,aADK,KAAK,YACO,cACrB,iBACD;AAED,MAAI,YAAY;AACd,cAAW,MAAM,UAAU;AAE3B,+BAA4B;IAC1B,MAAM,KAAK,WAAW,YAAY,cAChC,KACD;AACD,QAAI,IAAI;AACN,QAAG,MAAM,UAAU;AACnB,QAAG,MAAM,WAAW;;KAEtB;;AAGJ,OAAK,eAAe,WAAW;AAC7B,+BAA4B;AAC1B,SAAK,kBAAkB,sBAAsB;KAC3C,aAAa;KACb,WAAW,KAAK;KAChB,WAAW,cAA6B,MAAM;MAE5C,MAAM,eADc,KAAK,iBAAiB,UAAU,KAAK,IACxB,aAAa;AAC9C,WAAK,cACH,KAAK,iBAAiB,MAAM,GAAG,YAAY,IAAI,EAAE;;KAEtD,CAAC;KACF;IACF;AAIF,mBAAiB;AACf,QAAK,MAAM,aAAa;IACxB;;CAGJ,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,MAAI,KAAK,gBACP,MAAK,gBAAgB,YAAY;;CAIrC,SAAS;AACP,SAAO,IAAI;;;gBAGC,SAAS,GACd,GAAG,eAAe,MACpB,CAAC,CAAC;;;;;4BAKiB,KAAK,aAAa,UAAU,IAAI,SAAS,OAAO;;;cAG9D,WAAW,0BAA0B,EACrC,MAAM,QACP,CAAC,CAAC;;;gBAGC,OACA,KAAK,eAAe,EAAE,GACrB,SAAS,KAAK,QAAQ,KAAK,OAC3B,SAAS,IAAI;iDACmB,KAAK,KAAK;sBACrC,KAAK,KAAK;;kBAGjB,CAAC;;;;UAIN,OACA,KAAK,iBAAiB,MAAM,KAAK,aAAa,UAAU,GAAG,GAAG,IAAI,EAAE,GACnE,SAAS,KAAK,QAAQ,KAAK,OAC3B,SAAS,IAAI;;2CAEmB,KAAK,KAAK;kBACnC,KAAK,KAAK;;;YAInB,CAAC;;;;uBAIa,KAAK,MAAM;;;;;;;;;;gBAShBA;;;YAtIf,SAAS,EAAE,MAAM,OAAO,CAAC;YAMzB,SAAS;CAAE,MAAM;CAAO,WAAW;CAAoB,SAAS;CAAM,CAAC;YAMvE,SAAS,EAAE,MAAM,QAAQ,CAAC;YAM1B,MAAM,IAAI,aAAa;0CAvBzB,cAAc,GAAG,OAAO,8BAA8B"}