@carbon/web-components 2.61.0 → 2.62.0

package/es/components/truncated-text/truncated-text.js

@@ -0,0 +1,216 @@
+/**
+ * Copyright IBM Corp. 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 "../../globals/settings.js";
+import { carbonElement } from "../../globals/decorators/carbon-element.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import "../tooltip/index.js";
+import truncated_text_default$1 from "./truncated-text.scss.js";
+import { LitElement, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+//#region src/components/truncated-text/truncated-text.ts
+/**
+* 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 componentName = "truncated-text";
+const blockClass = `cds--${componentName}`;
+const elementName = `cds-${componentName}`;
+let CDSTruncatedText = class CDSTruncatedText extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.align = "top";
+		this.autoalign = false;
+		this.collapseLabel = "";
+		this.expandLabel = "";
+		this.id = "";
+		this.lines = 0;
+		this.type = "tooltip";
+		this.value = "";
+		this._isOverflowing = false;
+		this._isExpanded = false;
+		this._maxHeight = "none";
+		this._lineHeight = 0;
+		this._isLayered = false;
+	}
+	static {
+		this.styles = truncated_text_default$1;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._isLayered = !!this.closest(`cds-layer`);
+		this.type = this.type || "tooltip";
+	}
+	disconnectedCallback() {
+		this._resizeObserver?.disconnect();
+		super.disconnectedCallback();
+	}
+	firstUpdated() {
+		requestAnimationFrame(() => {
+			const computedStyle = getComputedStyle(this._textElement);
+			this._lineHeight = parseFloat(computedStyle.lineHeight);
+			this._setupResizeObserver();
+		});
+	}
+	updated(changed) {
+		if (changed.has("lines") || changed.has("value")) {
+			this._updateOverflowStatus();
+			this._updateMaxHeight();
+		}
+	}
+	_updateMaxHeight() {
+		if (this.type !== "expand") return;
+		requestAnimationFrame(() => {
+			if (!this._textElement) return;
+			this._maxHeight = this.lines > 0 && !this._isExpanded ? `${this.lines * this._lineHeight}px` : `${this._textElement.scrollHeight}px`;
+		});
+	}
+	_setupResizeObserver() {
+		if (!this._textElement) return;
+		if (this._resizeObserver) this._resizeObserver.disconnect();
+		this._resizeObserver = new ResizeObserver(() => {
+			this._updateOverflowStatus();
+		});
+		this._resizeObserver.observe(this);
+	}
+	_updateOverflowStatus() {
+		if (!this._textElement || this.lines <= 0) return;
+		this._updateMaxHeight();
+		const { scrollHeight, clientHeight } = this._textElement;
+		const isOverflowing = scrollHeight > clientHeight + this._lineHeight / 2;
+		if (isOverflowing !== this._isOverflowing) this._isOverflowing = isOverflowing;
+	}
+	_handleKeydown(evt) {
+		const { key } = evt;
+		if (key === "Enter" || key === " ") this._toggleExpansion();
+	}
+	_toggleExpansion() {
+		this._isExpanded = !this._isExpanded;
+		this._updateMaxHeight();
+		this._textElement?.classList.add(`${blockClass}_transition`);
+		const onTransitionEnd = () => {
+			this._textElement?.querySelector("button")?.focus();
+			this._textElement?.removeEventListener("transitionend", onTransitionEnd);
+		};
+		this._textElement?.addEventListener("transitionend", onTransitionEnd);
+		/**
+		* currently you cannot animate line-clamping
+		* you can however animate max-height
+		* this removes the clamping and then quickly adds it so you can see the ellipsis
+		*/
+		if (this._isExpanded === false) {
+			this._textElement?.classList.add(`${blockClass}_content--closing`);
+			setTimeout(() => {
+				this._textElement?.classList.remove(`${blockClass}_content--closing`);
+			}, 100);
+		}
+	}
+	_renderToggleButton() {
+		const className = classMap({
+			[`${blockClass}_button-collapse`]: this._isExpanded,
+			[`${blockClass}_button-expand`]: !this._isExpanded,
+			[`${blockClass}_button-layered`]: this._isLayered,
+			[`${blockClass}_button-hide`]: !this._isOverflowing && !this._isExpanded
+		});
+		const label = this._isExpanded ? this.collapseLabel : this.expandLabel;
+		return html`
+      <span
+        aria-controls=${this.id}
+        aria-expanded=${this._isExpanded}
+        class=${className}
+        @click=${this._toggleExpansion}
+        @keydown=${this._handleKeydown}
+        role="button"
+        tabindex="0">
+        ${label}
+      </span>
+    `;
+	}
+	render() {
+		const contentClasses = classMap({
+			[`${blockClass}_content`]: true,
+			[`${blockClass}_content--expanded`]: this._isExpanded
+		});
+		const contentStyle = {
+			["--line-clamp"]: this._isExpanded ? "none" : this.lines,
+			["max-block-size"]: this.type === "expand" ? this._maxHeight : "none"
+		};
+		const valueBody = html`
+      <div
+        id=${this.id}
+        class=${contentClasses}
+        style=${styleMap(contentStyle)}>
+        ${this.value}
+      </div>
+    `;
+		if (this.type === "expand") return html`${valueBody} ${this._renderToggleButton()}`;
+		return this._isOverflowing ? html`
+          <cds-tooltip
+            align=${this.align}
+            ?autoalign=${this.autoalign}
+            enter-delay-ms="0"
+            leave-delay-ms="0">
+            <button
+              type="button"
+              class="${blockClass}_tooltip-trigger"
+              aria-label=${this.value}>
+              ${valueBody}
+            </button>
+            <cds-tooltip-content>${this.value}</cds-tooltip-content>
+          </cds-tooltip>
+        ` : valueBody;
+	}
+};
+__decorate([property({
+	reflect: true,
+	type: String
+})], CDSTruncatedText.prototype, "align", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSTruncatedText.prototype, "autoalign", void 0);
+__decorate([property({
+	attribute: "collapse-label",
+	type: String,
+	reflect: true
+})], CDSTruncatedText.prototype, "collapseLabel", void 0);
+__decorate([property({
+	attribute: "expand-label",
+	type: String,
+	reflect: true
+})], CDSTruncatedText.prototype, "expandLabel", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSTruncatedText.prototype, "id", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], CDSTruncatedText.prototype, "lines", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSTruncatedText.prototype, "type", void 0);
+__decorate([property({
+	type: String,
+	attribute: "value",
+	reflect: true
+})], CDSTruncatedText.prototype, "value", void 0);
+__decorate([state()], CDSTruncatedText.prototype, "_isOverflowing", void 0);
+__decorate([state()], CDSTruncatedText.prototype, "_isExpanded", void 0);
+__decorate([state()], CDSTruncatedText.prototype, "_maxHeight", void 0);
+__decorate([query(`.${blockClass}_content`)], CDSTruncatedText.prototype, "_textElement", void 0);
+CDSTruncatedText = __decorate([carbonElement(elementName)], CDSTruncatedText);
+var truncated_text_default = CDSTruncatedText;
+//#endregion
+export { CDSTruncatedText, blockClass, truncated_text_default as default };
+
+//# sourceMappingURL=truncated-text.js.map

package/es/components/truncated-text/truncated-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncated-text.js","names":["styles","customElement"],"sources":["../../../src/components/truncated-text/truncated-text.ts"],"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 */\nimport { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport '../tooltip/index';\n\nimport styles from './truncated-text.scss?lit';\n\nconst componentName = 'truncated-text';\nexport const blockClass = `${prefix}--${componentName}`;\nconst elementName = `${prefix}-${componentName}`; // cds-truncated-text\n\n/**\n * TruncatedText.\n *\n * @element cds-truncated-text\n */\n@customElement(elementName)\nexport class CDSTruncatedText extends LitElement {\n  /**\n   * Specify how the tooltip should align with the content.\n   */\n  @property({ reflect: true, type: String })\n  align = 'top';\n\n  /**\n   * Specify whether a auto align functionality should be applied\n   */\n  @property({ type: Boolean, reflect: true })\n  autoalign = false;\n\n  /**\n   * The label on the collapse button.\n   */\n  @property({ attribute: 'collapse-label', type: String, reflect: true })\n  collapseLabel = '';\n\n  /**\n   * The label on expand button.\n   */\n  @property({ attribute: 'expand-label', type: String, reflect: true })\n  expandLabel = '';\n\n  /**\n   * Unique identifier for the element.\n   */\n  @property({ type: String, reflect: true })\n  id = '';\n\n  /**\n   * The maximum number of lines to display before truncation.\n   * Defaults to `0` (no truncation applied). Note: the React counterpart\n   * defaults to `2` — consumers migrating from React should set this explicitly.\n   */\n  @property({ type: Number, reflect: true })\n  lines = 0;\n\n  /**\n   * The method to display the full text when truncated. Options are \"tooltip\" or \"expand\". if not passed, the text would just be truncated with ellipsis.\n   */\n  @property({ type: String, reflect: true })\n  type: 'tooltip' | 'expand' = 'tooltip';\n\n  /**\n   * The string value to be truncated.\n   */\n  @property({ type: String, attribute: 'value', reflect: true })\n  value = '';\n\n  @state() private _isOverflowing: boolean = false;\n  @state() private _isExpanded: boolean = false;\n  @state() private _maxHeight: string = 'none';\n\n  @query(`.${blockClass}_content`) private _textElement!: HTMLElement;\n  private _lineHeight: number = 0;\n  private _isLayered: boolean = false;\n  private _resizeObserver?: ResizeObserver;\n\n  static styles = styles;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._isLayered = !!this.closest(`${prefix}-layer`);\n    this.type = this.type || 'tooltip';\n  }\n\n  disconnectedCallback() {\n    this._resizeObserver?.disconnect();\n    super.disconnectedCallback();\n  }\n\n  protected firstUpdated() {\n    requestAnimationFrame(() => {\n      const computedStyle = getComputedStyle(this._textElement);\n      this._lineHeight = parseFloat(computedStyle.lineHeight);\n      this._setupResizeObserver();\n    });\n  }\n\n  protected updated(changed: Map<string, unknown>) {\n    if (changed.has('lines') || changed.has('value')) {\n      this._updateOverflowStatus();\n      this._updateMaxHeight();\n    }\n  }\n\n  private _updateMaxHeight() {\n    if (this.type !== 'expand') {\n      return;\n    }\n    requestAnimationFrame(() => {\n      if (!this._textElement) {\n        return;\n      }\n      this._maxHeight =\n        this.lines > 0 && !this._isExpanded\n          ? `${this.lines * this._lineHeight}px`\n          : `${this._textElement.scrollHeight}px`;\n    });\n  }\n\n  private _setupResizeObserver() {\n    if (!this._textElement) {\n      return;\n    }\n\n    if (this._resizeObserver) {\n      this._resizeObserver.disconnect();\n    }\n\n    this._resizeObserver = new ResizeObserver(() => {\n      this._updateOverflowStatus();\n    });\n\n    this._resizeObserver.observe(this);\n  }\n\n  private _updateOverflowStatus() {\n    if (!this._textElement || this.lines <= 0) {\n      return;\n    }\n    this._updateMaxHeight();\n    const { scrollHeight, clientHeight } = this._textElement;\n    const buffer = this._lineHeight / 2; // buffer of at least half of line height for a stable outcome\n\n    const isOverflowing = scrollHeight > clientHeight + buffer;\n\n    if (isOverflowing !== this._isOverflowing) {\n      this._isOverflowing = isOverflowing;\n    }\n  }\n\n  private _handleKeydown(evt: KeyboardEvent) {\n    const { key } = evt;\n    if (key === 'Enter' || key === ' ') {\n      this._toggleExpansion();\n    }\n  }\n\n  private _toggleExpansion() {\n    this._isExpanded = !this._isExpanded;\n    this._updateMaxHeight();\n    this._textElement?.classList.add(`${blockClass}_transition`);\n    const onTransitionEnd = () => {\n      this._textElement?.querySelector('button')?.focus();\n      this._textElement?.removeEventListener('transitionend', onTransitionEnd);\n    };\n    this._textElement?.addEventListener('transitionend', onTransitionEnd);\n\n    /**\n     * currently you cannot animate line-clamping\n     * you can however animate max-height\n     * this removes the clamping and then quickly adds it so you can see the ellipsis\n     */\n    if (this._isExpanded === false) {\n      this._textElement?.classList.add(`${blockClass}_content--closing`);\n      setTimeout(() => {\n        this._textElement?.classList.remove(`${blockClass}_content--closing`);\n      }, 100);\n    }\n  }\n\n  private _renderToggleButton() {\n    const className = classMap({\n      [`${blockClass}_button-collapse`]: this._isExpanded,\n      [`${blockClass}_button-expand`]: !this._isExpanded,\n      [`${blockClass}_button-layered`]: this._isLayered,\n      [`${blockClass}_button-hide`]: !this._isOverflowing && !this._isExpanded,\n    });\n    const label = this._isExpanded ? this.collapseLabel : this.expandLabel;\n    return html`\n      <span\n        aria-controls=${this.id}\n        aria-expanded=${this._isExpanded}\n        class=${className}\n        @click=${this._toggleExpansion}\n        @keydown=${this._handleKeydown}\n        role=\"button\"\n        tabindex=\"0\">\n        ${label}\n      </span>\n    `;\n  }\n\n  render() {\n    const contentClasses = classMap({\n      [`${blockClass}_content`]: true,\n      [`${blockClass}_content--expanded`]: this._isExpanded,\n    });\n\n    const contentStyle = {\n      ['--line-clamp']: this._isExpanded ? 'none' : this.lines,\n      ['max-block-size']: this.type === 'expand' ? this._maxHeight : 'none',\n    };\n\n    const valueBody = html`\n      <div\n        id=${this.id}\n        class=${contentClasses}\n        style=${styleMap(contentStyle)}>\n        ${this.value}\n      </div>\n    `;\n\n    if (this.type === 'expand') {\n      return html`${valueBody} ${this._renderToggleButton()}`;\n    }\n\n    // type === 'tooltip'\n    return this._isOverflowing\n      ? html`\n          <cds-tooltip\n            align=${this.align}\n            ?autoalign=${this.autoalign}\n            enter-delay-ms=\"0\"\n            leave-delay-ms=\"0\">\n            <button\n              type=\"button\"\n              class=\"${blockClass}_tooltip-trigger\"\n              aria-label=${this.value}>\n              ${valueBody}\n            </button>\n            <cds-tooltip-content>${this.value}</cds-tooltip-content>\n          </cds-tooltip>\n        `\n      : valueBody;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [elementName]: CDSTruncatedText;\n  }\n}\n\nexport default CDSTruncatedText;\n"],"mappings":"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"}

package/es/components/truncated-text/truncated-text.scss.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 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/truncated-text/truncated-text.scss?lit
+var truncated_text_default = css(["@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds--truncated-text_button-collapse,.cds--truncated-text_button-expand{border:none;cursor:pointer;font:inherit;line-height:inherit}:host(cds-truncated-text){display:block;inline-size:100%}@media (prefers-reduced-motion:no-preference){:host(cds-truncated-text) .cds--truncated-text_transition{transition:max-height .11s cubic-bezier(.2,0,.38,.9)}}:host(cds-truncated-text) .cds--truncated-text_content{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp,0);text-overflow:clip;white-space:normal}:host(cds-truncated-text) .cds--truncated-text_content:focus-visible{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-truncated-text) .cds--truncated-text_content:focus-visible{outline-style:dotted}}:host(cds-truncated-text) .cds--truncated-text_content--closing{-webkit-line-clamp:none}:host(cds-truncated-text) cds-tooltip{display:inline-flex}:host(cds-truncated-text) .cds--truncated-text_tooltip-trigger{display:inline;padding:0;border:0;background:none;color:inherit;cursor:default;font:inherit;text-align:inherit}:host(cds-truncated-text) .cds--truncated-text_tooltip-trigger:focus-visible{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-truncated-text) .cds--truncated-text_tooltip-trigger:focus-visible{outline-style:dotted}}:host(cds-truncated-text) .cds--truncated-text_button-collapse:focus-visible,:host(cds-truncated-text) .cds--truncated-text_button-expand:focus-visible,:host(cds-truncated-text) button:focus-visible{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-truncated-text) .cds--truncated-text_button-collapse:focus-visible,:host(cds-truncated-text) .cds--truncated-text_button-expand:focus-visible,:host(cds-truncated-text) button:focus-visible{outline-style:dotted}}.cds--truncated-text_button-collapse,.cds--truncated-text_button-expand{padding:0 .125rem;color:var(--cds-link-primary,#0f62fe)}.cds--truncated-text_button-collapse.cds--truncated-text_button-hide,.cds--truncated-text_button-expand.cds--truncated-text_button-hide{display:none}.cds--truncated-text_button-expand.cds--truncated-text_button-layered{background-color:var(--cds-layer)}.cds--truncated-text_button-expand:dir(ltr):before{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--cds-background,#fff) 0)}.cds--truncated-text_button-expand.cds--truncated-text_button-layered:dir(ltr):before{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--cds-layer) 0)}.cds--truncated-text_button-expand:dir(rtl):before{background:linear-gradient(270deg,hsla(0,0%,100%,0) 0,var(--cds-background,#fff) 0)}.cds--truncated-text_button-expand.cds--truncated-text_button-layered:dir(rtl):before{background:linear-gradient(270deg,hsla(0,0%,100%,0) 0,var(--cds-layer) 0)}.cds--truncated-text_button-collapse{background-color:transparent}"]);
+//#endregion
+export { truncated_text_default as default };
+
+//# sourceMappingURL=truncated-text.scss.js.map

package/es/components/truncated-text/truncated-text.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncated-text.scss.js","names":[],"sources":["../../../src/components/truncated-text/truncated-text.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$css--plex: true !default;\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/utilities' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/theme';\n@use '@carbon/styles/scss/motion' as *;\n\n$block-class: #{$prefix}--truncated-text;\n\n// Common reset button style\n%reset-button {\n  border: none;\n  cursor: pointer;\n  font: inherit;\n  line-height: inherit;\n}\n\n// Mixin for directional gradients\n@mixin gradient-bg($direction, $color) {\n  background: linear-gradient($direction, rgba(255, 255, 255, 0) 0%, $color 0%);\n}\n\n:host(#{$prefix}-truncated-text) {\n  display: block;\n  inline-size: 100%;\n\n  .#{$block-class}_transition {\n    @media (prefers-reduced-motion: no-preference) {\n      transition: max-height $duration-fast-02 motion(standard, productive);\n    }\n  }\n\n  .#{$block-class}_content {\n    display: -webkit-box;\n    overflow: hidden;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: var(--line-clamp, 0);\n    text-overflow: clip;\n    white-space: normal;\n\n    &:focus-visible {\n      @include focus-outline('outline');\n    }\n  }\n\n  .#{$block-class}_content--closing {\n    -webkit-line-clamp: none;\n  }\n\n  #{$prefix}-tooltip {\n    display: inline-flex;\n  }\n\n  .#{$block-class}_tooltip-trigger {\n    display: inline;\n    padding: 0;\n    border: 0;\n    background: none;\n    color: inherit;\n    cursor: default;\n    font: inherit;\n    text-align: inherit;\n\n    &:focus-visible {\n      @include focus-outline('outline');\n    }\n  }\n\n  button:focus-visible,\n  .#{$block-class}_button-expand:focus-visible,\n  .#{$block-class}_button-collapse:focus-visible {\n    @include focus-outline('outline');\n  }\n}\n\n.#{$block-class}_button-expand,\n.#{$block-class}_button-collapse {\n  @extend %reset-button;\n\n  padding: 0 $spacing-01;\n  color: theme.$link-primary;\n\n  &.#{$block-class}_button-hide {\n    display: none;\n  }\n}\n\n.#{$block-class}_button-expand {\n  &.#{$block-class}_button-layered {\n    background-color: theme.$layer;\n  }\n\n  // Gradient LTR\n  &:dir(ltr)::before {\n    @include gradient-bg(90deg, theme.$background);\n  }\n\n  &.#{$block-class}_button-layered:dir(ltr)::before {\n    @include gradient-bg(90deg, theme.$layer);\n  }\n\n  // Gradient RTL\n  &:dir(rtl)::before {\n    @include gradient-bg(270deg, theme.$background);\n  }\n\n  &.#{$block-class}_button-layered:dir(rtl)::before {\n    @include gradient-bg(270deg, theme.$layer);\n  }\n}\n\n.#{$block-class}_button-collapse {\n  background-color: transparent;\n}\n"],"mappings":""}