) {
+ if (changed.has('lines') || changed.has('value')) {
+ this._updateOverflowStatus();
+ }
+ }
+
+ private _updateOverflowStatus() {
+ if (!this._textElement || this.lines <= 0) {
+ return;
+ }
+ setTimeout(() => {
+ const { scrollHeight, clientHeight } = this._textElement;
+ const buffer = Math.ceil(
+ clientHeight / (2 * Math.max(1, this.lines || 1))
+ );
+ const isOverflowing = scrollHeight > clientHeight + buffer;
+
+ if (isOverflowing !== this._isOverflowing) {
+ this._isOverflowing = isOverflowing;
+ }
+ });
+ }
+
+ private _toggleExpansion() {
+ this._isExpanded = !this._isExpanded;
+ this._textElement?.classList.add(`${blockClass}_transition`);
+ const onTransitionEnd = () => {
+ this._textElement?.querySelector('button')?.focus();
+ this._textElement?.removeEventListener('transitionend', onTransitionEnd);
+ };
+ this._textElement?.addEventListener('transitionend', onTransitionEnd);
+ }
+
+ private _renderToggleButton() {
+ if (!this._isOverflowing && !this._isExpanded) {
+ return;
+ }
+ const className = classMap({
+ [`${blockClass}_collapse`]: this._isExpanded,
+ [`${blockClass}_expand`]: !this._isExpanded,
+ [`${blockClass}_layered`]: this._isLayered,
+ });
+ const label = this._isExpanded
+ ? this.collapseLabel || '...less'
+ : this.expandLabel || '...more';
+ return html`
+
+ `;
+ }
+
+ render() {
+ // Calculate max height based on line height and number of lines
+ const maxHeight =
+ this.lines > 0 && !this._isExpanded
+ ? `${this.lines * this._lineHeight}px`
+ : `${this._textElement?.scrollHeight}px`;
+
+ // Apply different styles based on truncation method
+ const contentStyle =
+ this.with === 'tooltip' || !this.with
+ ? `--line-clamp: ${this._isExpanded ? 'none' : this.lines};`
+ : `max-block-size: ${maxHeight};`;
+
+ const contentClass = classMap({
+ [`${blockClass}_content`]: true,
+ });
+
+ const content = html`
+
+ ${this.value}
+ ${this.with === 'expand' ? this._renderToggleButton() : null}
+
+ `;
+
+ return this.with === 'tooltip' && this._isOverflowing
+ ? html`
+
+ ${content}
+ ${this.value}
+
+ `
+ : html`
+ ${content}
+
`;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ [elementName]: CDSTruncatedText;
+ }
+}
+
+export default CDSTruncatedText;
diff --git a/packages/ibm-products-web-components/src/index.ts b/packages/ibm-products-web-components/src/index.ts
index 3528ded1075..efbcef15a32 100644
--- a/packages/ibm-products-web-components/src/index.ts
+++ b/packages/ibm-products-web-components/src/index.ts
@@ -13,3 +13,4 @@ export { default as CDSFullPageError } from './components/full-page-error/full-p
export { default as CDSAboutModal } from './components/about-modal/about-modal';
export { default as CDSUseravatar } from './components/user-avatar/user-avatar';
export { default as CDSOptionsTile } from './components/options-tile/options-tile';
+export { default as CDSTruncatedText } from './components/truncated-text/truncated-text';