) {
+ if (changed.has('lines') || changed.has('value')) {
+ this._updateOverflowStatus();
+ this._updateMaxHeight();
+ }
+ }
+
+ private _updateMaxHeight() {
+ if (this.with !== 'expand') {
+ return;
+ }
+ requestAnimationFrame(() => {
+ if (!this._textElement) {
+ return;
+ }
+ this._maxHeight =
+ this.lines > 0 && !this._isExpanded
+ ? `${this.lines * this._lineHeight}px`
+ : `${this._textElement.scrollHeight}px`;
+ });
+ }
+
+ private _setupResizeObserver() {
+ if (!this._textElement) {
+ return;
+ }
+
+ if (this._resizeObserver) {
+ this._resizeObserver.disconnect();
+ }
+
+ this._resizeObserver = new ResizeObserver(() => {
+ this._updateOverflowStatus();
+ });
+
+ this._resizeObserver.observe(this);
+ }
+
+ private _updateOverflowStatus() {
+ if (!this._textElement || this.lines <= 0) {
+ return;
+ }
+ this._updateMaxHeight();
+ const { scrollHeight, clientHeight } = this._textElement;
+ const buffer = this._lineHeight / 2; // buffer of at least half of line height for a stable outcome
+
+ const isOverflowing = scrollHeight > clientHeight + buffer;
+
+ if (isOverflowing !== this._isOverflowing) {
+ this._isOverflowing = isOverflowing;
+ }
+ }
+
+ private _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);
+ }
+
+ private _renderToggleButton() {
+ if (this.with !== 'expand') {
+ return;
+ }
+ 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 || 'View less'
+ : this.expandLabel || 'View more';
+ return html`
+
+ `;
+ }
+
+ render() {
+ // Apply different styles based on truncation method
+ const contentStyle =
+ this.with === 'tooltip' || !this.with
+ ? `--line-clamp: ${this._isExpanded ? 'none' : this.lines};`
+ : `max-block-size: ${this._maxHeight};`;
+
+ const contentClass = classMap({
+ [`${blockClass}_content`]: true,
+ });
+
+ const content = html`
+
+ ${this.value} ${this._renderToggleButton()}
+
+ `;
+
+ 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';