@chitovas/ngx-clamp 0.1.2 → 1.0.0

package/README.md

@@ -3,50 +3,57 @@
 ![Build](https://github.com/Chitova263/ngx-clamp/workflows/main/badge.svg)
 [![NPM version](https://img.shields.io/npm/v/@chitovas/ngx-clamp.svg?style=flat-square)](https://www.npmjs.com/package/@chitovas/ngx-clamp)
 ![bundle size](https://img.shields.io/bundlephobia/minzip/@chitovas/ngx-clamp)
+[![npm](https://img.shields.io/npm/dt/@chitovas/ngx-clamp.svg)](https://www.npmjs.com/package/@chitovas/ngx-clamp)
 
-Welcome to @chitovas/ngx-clamp, an Angular library designed to elegantly manage text overflow within HTML elements. This library allows you to clamp text, adding ellipsis or a truncation text of your choice when the content exceeds a specified height.
+A lightweight Angular directive for clamping text to a specified number of lines or height. A fast, cross-browser alternative to CSS `line-clamp` that works in all browsers, including legacy browsers where native support is unavailable.
 
-## Motivation
-
-Solves overflow issues on older legacy browsers that don't support the `-webkit-line-clamp` or `line-clamp` property, ensuring consistent behavior across different platforms.
-
-## Features
-
-- **Easy Integration**: Seamlessly integrate `ngx-clamp` directive into your Angular applications to manage text overflow.
-- **Customizable Truncation**: Use ellipsis or specify your own truncation text for clamped content.
-- **Nested Element Support**: Clamp text within nested HTML elements effortlessly.
-- **Height Configuration**: Set a maximum height for text before clamping activates.
-- **Legacy Browser Compatibility**: Solves overflow issues on older browsers that don't support the -webkit-line-clamp property, ensuring consistent behavior across different platforms.
+- **Fast** - Uses binary search algorithm for O(log n) truncation performance
+- **Universal** - Works across all browsers including IE11 and older
+- **Lightweight** - Zero dependencies, tree-shakeable
 
 ## Installation
 
-Install the package using npm:
-
 ```bash
 npm install @chitovas/ngx-clamp
 ```
 
 ## Usage
 
-```ts
+```typescript
+import { Component } from '@angular/core';
 import { NgxClamp } from '@chitovas/ngx-clamp';
 
 @Component({
-    selector: 'my-component',
-    template: `
-        <div ngxClamp [maxHeight]="100" truncationText="...">
-            Your long text goes here, and it will be clamped if it exceeds the specified height.
-            <p>Your long text goes here in nested element</p>
-        </div>
-        <div ngxClamp [maxHeight]="150" truncationText="Read more...">
-            This is a longer paragraph that will be clamped to fit within the specified height.
-        </div>
-    `,
+    selector: 'app-example',
+    standalone: true,
     imports: [NgxClamp],
+    template: ` <div ngxClamp [lines]="3">Long text content that will be clamped...</div> `,
 })
-export class MyComponent {}
+export class ExampleComponent {}
+```
+
+### Clamp by Height
+
+```html
+<div ngxClamp [maxHeight]="100">Content clamped at 100px height...</div>
 ```
 
+### Custom Truncation Text
+
+```html
+<div ngxClamp [lines]="3" truncationText=" Read more...">Content with custom truncation indicator...</div>
+```
+
+## API
+
+| Input            | Type     | Default | Description                         |
+| ---------------- | -------- | ------- | ----------------------------------- |
+| `lines`          | `number` | -       | Number of lines before clamping     |
+| `maxHeight`      | `number` | -       | Maximum height (px) before clamping |
+| `truncationText` | `string` | `'...'` | Text appended to clamped content    |
+
+Use either `lines` or `maxHeight`. If both are provided, `lines` takes precedence.
+
 ## License
 
-@chitovas/ngx-clamp is released under the MIT License.
+MIT

package/fesm2022/chitovas-ngx-clamp.mjs

@@ -1,124 +1,153 @@
 import * as i0 from '@angular/core';
 import { Input, Directive } from '@angular/core';
 
+const WORD_SEPARATOR = ' ';
+const DEFAULT_LINE_HEIGHT_MULTIPLIER = 1.187;
 class NgxClamp {
-    htmlElementRef;
-    maxHeight = 0;
+    maxHeight = null;
+    lines = 0;
     truncationCharacters = '...';
     maxLines = 0;
-    splitOnWordsCharacter = ' ';
-    constructor(htmlElementRef) {
-        this.htmlElementRef = htmlElementRef;
+    cachedLineHeight = null;
+    originalContent = null;
+    isInitialized = false;
+    element;
+    constructor(elementRef) {
+        this.element = elementRef.nativeElement;
     }
     ngAfterViewInit() {
+        this.originalContent = this.element.innerHTML;
+        this.isInitialized = true;
         this.clamp();
     }
     ngOnChanges(changes) {
-        if (changes['height']) {
+        const shouldReclamp = changes['maxHeight'] || changes['lines'];
+        if (shouldReclamp && this.isInitialized) {
+            this.cachedLineHeight = null;
+            this.restoreOriginalContent();
             this.clamp();
         }
     }
-    clamp() {
-        this.maxLines = this.getMaxLines();
-        const hostHtmlElement = this.htmlElementRef.nativeElement;
-        const maxRequiredHeight = Math.max(this.maxHeight, this.getMaxHeight(this.maxLines, hostHtmlElement));
-        if (maxRequiredHeight < hostHtmlElement.clientHeight) {
-            const lastChild = this.getLastChild(hostHtmlElement);
-            if (lastChild) {
-                this.truncate(maxRequiredHeight, lastChild);
-            }
+    restoreOriginalContent() {
+        if (this.originalContent !== null) {
+            this.element.innerHTML = this.originalContent;
         }
     }
-    // Recursively removes words from the text until its width or height is beneath maximum required height.
-    truncate(maxRequiredHeight, node, words = undefined, isCurrentNodeValueSplitIntoWords = false) {
-        // Removes truncation characters from node text
-        const nodeValue = node.nodeValue?.replace(this.truncationCharacters, '');
-        if (!words && nodeValue) {
-            words = nodeValue.split(this.splitOnWordsCharacter);
-            isCurrentNodeValueSplitIntoWords = true;
+    clamp() {
+        const hasConstraints = this.maxHeight || this.lines;
+        if (!hasConstraints) {
+            return;
         }
-        if (words) {
-            const isTexFits = this.htmlElementRef.nativeElement.clientHeight <= maxRequiredHeight;
-            node.nodeValue = words.join(this.splitOnWordsCharacter) + this.truncationCharacters;
-            if (isTexFits) {
-                return;
+        this.maxLines = this.lines || this.calculateMaxLines();
+        const maxAllowedHeight = Math.max(this.maxHeight ?? 0, this.getLineHeight() * this.maxLines);
+        const needsTruncation = this.element.clientHeight > maxAllowedHeight;
+        if (needsTruncation) {
+            const textNode = this.findDeepestTextNode(this.element);
+            if (textNode) {
+                this.truncateNode(textNode, maxAllowedHeight);
             }
         }
-        // If there are words left to remove, remove the last one and see if the nodeValue fits.
-        if (words && words.length > 1) {
-            words.pop();
-            node.nodeValue = words.join(this.splitOnWordsCharacter) + this.truncationCharacters;
-        }
-        // No more words can be removed using this character
-        else {
-            words = undefined;
+    }
+    /**
+     * Uses binary search to find the optimal number of words that fit within maxHeight.
+     * Falls back to previous text node if current node's first word doesn't fit.
+     */
+    truncateNode(node, maxHeight) {
+        const text = node.nodeValue;
+        if (!text) {
+            return;
         }
-        if (words) {
-            const isTexFits = this.htmlElementRef.nativeElement.clientHeight <= maxRequiredHeight;
-            if (isTexFits) {
-                return;
-            }
+        const words = text.split(WORD_SEPARATOR);
+        // Early exit: text already fits
+        if (this.textFits(node, text + this.truncationCharacters, maxHeight)) {
+            node.nodeValue = text;
+            return;
         }
-        // No valid words produced
-        else if (isCurrentNodeValueSplitIntoWords) {
-            // No valid words even when splitting by letter, time to move on to the next node
-            // Set the current node value to the truncation character
+        // First word doesn't fit: move to previous node
+        if (!this.textFits(node, words[0] + this.truncationCharacters, maxHeight)) {
             node.nodeValue = this.truncationCharacters;
-            node = this.getLastChild(this.htmlElementRef.nativeElement);
-            return this.truncate(maxRequiredHeight, node);
+            const previousNode = this.findDeepestTextNode(this.element);
+            if (previousNode) {
+                this.truncateNode(previousNode, maxHeight);
+            }
+            return;
         }
-        return this.truncate(maxRequiredHeight, node, words, isCurrentNodeValueSplitIntoWords);
+        // Binary search for optimal word count
+        const optimalWordCount = this.findOptimalWordCount(node, words, maxHeight);
+        node.nodeValue = words.slice(0, optimalWordCount).join(WORD_SEPARATOR) + this.truncationCharacters;
     }
-    getMaxHeight(maxLines, element) {
-        const lineHeight = this.getLineHeight(element);
-        return lineHeight * maxLines;
+    textFits(node, text, maxHeight) {
+        node.nodeValue = text;
+        return this.element.clientHeight <= maxHeight;
     }
-    getLineHeight(element) {
-        const cssStyleDeclaration = getComputedStyle(element, 'line-height');
-        const lineHeight = cssStyleDeclaration.lineHeight;
-        if (cssStyleDeclaration.lineHeight === 'normal') {
-            // Normal line heights vary from browser to browser. The spec recommends a value between 1.0 and 1.2 of the font size.
-            return Math.ceil(parseInt(getComputedStyle(element, 'font-size').fontSize, 10) * 1.187);
+    findOptimalWordCount(node, words, maxHeight) {
+        let low = 1;
+        let high = words.length;
+        let result = 1;
+        while (low <= high) {
+            const mid = Math.floor((low + high) / 2);
+            const testText = words.slice(0, mid).join(WORD_SEPARATOR) + this.truncationCharacters;
+            if (this.textFits(node, testText, maxHeight)) {
+                result = mid;
+                low = mid + 1;
+            }
+            else {
+                high = mid - 1;
+            }
         }
-        return Math.ceil(parseInt(lineHeight, 10));
+        return result;
     }
-    getMaxLines() {
-        // Returns the maximum number of lines of text that should be rendered based on the current height of the element and the line-height of the text.
-        const hostHtmlElement = this.htmlElementRef.nativeElement;
-        const availableHeight = this.maxHeight ?? hostHtmlElement.clientHeight;
-        return Math.max(Math.floor(availableHeight / this.getLineHeight(hostHtmlElement)), 0);
+    getLineHeight() {
+        if (this.cachedLineHeight !== null) {
+            return this.cachedLineHeight;
+        }
+        const styles = getComputedStyle(this.element);
+        if (styles.lineHeight === 'normal') {
+            const fontSize = parseFloat(styles.fontSize);
+            this.cachedLineHeight = Math.ceil(fontSize * DEFAULT_LINE_HEIGHT_MULTIPLIER);
+        }
+        else {
+            this.cachedLineHeight = Math.ceil(parseFloat(styles.lineHeight));
+        }
+        return this.cachedLineHeight;
+    }
+    calculateMaxLines() {
+        const availableHeight = this.maxHeight ?? this.element.clientHeight;
+        return Math.max(Math.floor(availableHeight / this.getLineHeight()), 0);
     }
-    getLastChild(node) {
-        // Gets an element's last child. That may be another node or a node's contents.
+    /**
+     * Recursively finds the deepest text node, skipping empty nodes.
+     */
+    findDeepestTextNode(node) {
         if (!node.lastChild) {
             return node;
         }
-        // Current element has children, need to go deeper and get last child as a text node
-        if (node.lastChild.childNodes && node.lastChild.childNodes.length > 0) {
-            return this.getLastChild(node.childNodes.item(node.childNodes.length - 1));
+        // Traverse to nested children
+        if (node.lastChild.childNodes?.length > 0) {
+            const lastChildIndex = node.childNodes.length - 1;
+            return this.findDeepestTextNode(node.childNodes.item(lastChildIndex));
         }
-        // This is the absolute last child, a text node, but something's wrong with it. Remove it and keep trying
-        else if (node.lastChild.parentNode &&
-            (!node.lastChild?.nodeValue || node.lastChild.nodeValue === '' || node.lastChild.nodeValue === this.truncationCharacters)) {
+        // Skip empty or truncation-only nodes
+        const isEmptyNode = !node.lastChild.nodeValue || node.lastChild.nodeValue === '' || node.lastChild.nodeValue === this.truncationCharacters;
+        if (isEmptyNode && node.lastChild.parentNode) {
             node.lastChild.parentNode.removeChild(node.lastChild);
-            return this.getLastChild(this.htmlElementRef.nativeElement);
-        }
-        // This is the last child we want, return it
-        else {
-            return node.lastChild;
+            return this.findDeepestTextNode(this.element);
         }
+        return node.lastChild;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxClamp, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: NgxClamp, isStandalone: true, selector: "[ngxClamp]", inputs: { maxHeight: "maxHeight", truncationCharacters: "truncationCharacters" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxClamp, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxClamp, isStandalone: true, selector: "[ngxClamp]", inputs: { maxHeight: "maxHeight", lines: "lines", truncationCharacters: "truncationCharacters" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxClamp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxClamp, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngxClamp]',
+                    standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { maxHeight: [{
-                type: Input,
-                args: [{ required: true }]
+                type: Input
+            }], lines: [{
+                type: Input
             }], truncationCharacters: [{
                 type: Input
             }] } });

package/fesm2022/chitovas-ngx-clamp.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"chitovas-ngx-clamp.mjs","sources":["../../../../projects/chitova/ngx-clamp/src/lib/ngx-clamp.ts","../../../../projects/chitova/ngx-clamp/src/chitovas-ngx-clamp.ts"],"sourcesContent":["import { AfterViewInit, Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';\n\n@Directive({\n    selector: '[ngxClamp]',\n})\nexport class NgxClamp implements AfterViewInit, OnChanges {\n    @Input({ required: true })\n    public maxHeight: number = 0;\n\n    @Input()\n    public truncationCharacters: string = '...';\n\n    public maxLines: number = 0;\n\n    private readonly splitOnWordsCharacter: string = ' ';\n\n    constructor(private readonly htmlElementRef: ElementRef<HTMLElement>) {}\n\n    public ngAfterViewInit(): void {\n        this.clamp();\n    }\n\n    public ngOnChanges(changes: SimpleChanges): void {\n        if (changes['height']) {\n            this.clamp();\n        }\n    }\n\n    private clamp(): void {\n        this.maxLines = this.getMaxLines();\n        const hostHtmlElement: HTMLElement = this.htmlElementRef.nativeElement;\n        const maxRequiredHeight: number = Math.max(this.maxHeight, this.getMaxHeight(this.maxLines, hostHtmlElement));\n        if (maxRequiredHeight < hostHtmlElement.clientHeight) {\n            const lastChild: ChildNode = this.getLastChild(hostHtmlElement);\n            if (lastChild) {\n                this.truncate(maxRequiredHeight, lastChild);\n            }\n        }\n    }\n\n    // Recursively removes words from the text until its width or height is beneath maximum required height.\n    private truncate(\n        maxRequiredHeight: number,\n        node: ChildNode,\n        words: string[] | undefined = undefined,\n        isCurrentNodeValueSplitIntoWords: boolean = false\n    ): void {\n        // Removes truncation characters from node text\n        const nodeValue: string | undefined = node.nodeValue?.replace(this.truncationCharacters, '');\n\n        if (!words && nodeValue) {\n            words = nodeValue.split(this.splitOnWordsCharacter);\n            isCurrentNodeValueSplitIntoWords = true;\n        }\n\n        if (words) {\n            const isTexFits: boolean = this.htmlElementRef.nativeElement.clientHeight <= maxRequiredHeight;\n            node.nodeValue = words.join(this.splitOnWordsCharacter) + this.truncationCharacters;\n            if (isTexFits) {\n                return;\n            }\n        }\n\n        // If there are words left to remove, remove the last one and see if the nodeValue fits.\n        if (words && words.length > 1) {\n            words.pop();\n            node.nodeValue = words.join(this.splitOnWordsCharacter) + this.truncationCharacters;\n        }\n        // No more words can be removed using this character\n        else {\n            words = undefined;\n        }\n\n        if (words) {\n            const isTexFits: boolean = this.htmlElementRef.nativeElement.clientHeight <= maxRequiredHeight;\n            if (isTexFits) {\n                return;\n            }\n        }\n\n        // No valid words produced\n        else if (isCurrentNodeValueSplitIntoWords) {\n            // No valid words even when splitting by letter, time to move on to the next node\n\n            // Set the current node value to the truncation character\n            node.nodeValue = this.truncationCharacters;\n            node = this.getLastChild(this.htmlElementRef.nativeElement);\n            return this.truncate(maxRequiredHeight, node);\n        }\n        return this.truncate(maxRequiredHeight, node, words, isCurrentNodeValueSplitIntoWords);\n    }\n\n    private getMaxHeight(maxLines: number, element: HTMLElement): number {\n        const lineHeight: number = this.getLineHeight(element);\n        return lineHeight * maxLines;\n    }\n\n    private getLineHeight(element: HTMLElement): number {\n        const cssStyleDeclaration: CSSStyleDeclaration = getComputedStyle(element, 'line-height');\n        const lineHeight: string = cssStyleDeclaration.lineHeight;\n        if (cssStyleDeclaration.lineHeight === 'normal') {\n            // Normal line heights vary from browser to browser. The spec recommends a value between 1.0 and 1.2 of the font size.\n            return Math.ceil(parseInt(getComputedStyle(element, 'font-size').fontSize, 10) * 1.187);\n        }\n        return Math.ceil(parseInt(lineHeight, 10));\n    }\n\n    private getMaxLines(): number {\n        // Returns the maximum number of lines of text that should be rendered based on the current height of the element and the line-height of the text.\n        const hostHtmlElement: HTMLElement = this.htmlElementRef.nativeElement;\n        const availableHeight: number = this.maxHeight ?? hostHtmlElement.clientHeight;\n        return Math.max(Math.floor(availableHeight / this.getLineHeight(hostHtmlElement)), 0);\n    }\n\n    private getLastChild(node: ChildNode): ChildNode {\n        // Gets an element's last child. That may be another node or a node's contents.\n        if (!node.lastChild) {\n            return node;\n        }\n        // Current element has children, need to go deeper and get last child as a text node\n        if (node.lastChild.childNodes && node.lastChild.childNodes.length > 0) {\n            return this.getLastChild(node.childNodes.item(node.childNodes.length - 1));\n        }\n        // This is the absolute last child, a text node, but something's wrong with it. Remove it and keep trying\n        else if (\n            node.lastChild.parentNode &&\n            (!node.lastChild?.nodeValue || node.lastChild.nodeValue === '' || node.lastChild.nodeValue === this.truncationCharacters)\n        ) {\n            node.lastChild.parentNode.removeChild(node.lastChild);\n            return this.getLastChild(this.htmlElementRef.nativeElement);\n        }\n        // This is the last child we want, return it\n        else {\n            return node.lastChild;\n        }\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"chitovas-ngx-clamp.mjs","sources":["../../../../projects/chitova/ngx-clamp/src/lib/ngx-clamp.ts","../../../../projects/chitova/ngx-clamp/src/chitovas-ngx-clamp.ts"],"sourcesContent":["import { AfterViewInit, Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';\n\nconst WORD_SEPARATOR = ' ';\nconst DEFAULT_LINE_HEIGHT_MULTIPLIER = 1.187;\n\n@Directive({\n    selector: '[ngxClamp]',\n    standalone: true,\n})\nexport class NgxClamp implements AfterViewInit, OnChanges {\n    @Input() maxHeight: number | null = null;\n    @Input() lines: number = 0;\n    @Input() truncationCharacters: string = '...';\n\n    maxLines: number = 0;\n\n    private cachedLineHeight: number | null = null;\n    private originalContent: string | null = null;\n    private isInitialized: boolean = false;\n    private readonly element: HTMLElement;\n\n    constructor(elementRef: ElementRef<HTMLElement>) {\n        this.element = elementRef.nativeElement;\n    }\n\n    ngAfterViewInit(): void {\n        this.originalContent = this.element.innerHTML;\n        this.isInitialized = true;\n        this.clamp();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        const shouldReclamp = changes['maxHeight'] || changes['lines'];\n        if (shouldReclamp && this.isInitialized) {\n            this.cachedLineHeight = null;\n            this.restoreOriginalContent();\n            this.clamp();\n        }\n    }\n\n    private restoreOriginalContent(): void {\n        if (this.originalContent !== null) {\n            this.element.innerHTML = this.originalContent;\n        }\n    }\n\n    private clamp(): void {\n        const hasConstraints = this.maxHeight || this.lines;\n        if (!hasConstraints) {\n            return;\n        }\n\n        this.maxLines = this.lines || this.calculateMaxLines();\n\n        const maxAllowedHeight = Math.max(this.maxHeight ?? 0, this.getLineHeight() * this.maxLines);\n\n        const needsTruncation = this.element.clientHeight > maxAllowedHeight;\n        if (needsTruncation) {\n            const textNode = this.findDeepestTextNode(this.element);\n            if (textNode) {\n                this.truncateNode(textNode, maxAllowedHeight);\n            }\n        }\n    }\n\n    /**\n     * Uses binary search to find the optimal number of words that fit within maxHeight.\n     * Falls back to previous text node if current node's first word doesn't fit.\n     */\n    private truncateNode(node: ChildNode, maxHeight: number): void {\n        const text = node.nodeValue;\n        if (!text) {\n            return;\n        }\n\n        const words = text.split(WORD_SEPARATOR);\n\n        // Early exit: text already fits\n        if (this.textFits(node, text + this.truncationCharacters, maxHeight)) {\n            node.nodeValue = text;\n            return;\n        }\n\n        // First word doesn't fit: move to previous node\n        if (!this.textFits(node, words[0] + this.truncationCharacters, maxHeight)) {\n            node.nodeValue = this.truncationCharacters;\n            const previousNode = this.findDeepestTextNode(this.element);\n            if (previousNode) {\n                this.truncateNode(previousNode, maxHeight);\n            }\n            return;\n        }\n\n        // Binary search for optimal word count\n        const optimalWordCount = this.findOptimalWordCount(node, words, maxHeight);\n        node.nodeValue = words.slice(0, optimalWordCount).join(WORD_SEPARATOR) + this.truncationCharacters;\n    }\n\n    private textFits(node: ChildNode, text: string, maxHeight: number): boolean {\n        node.nodeValue = text;\n        return this.element.clientHeight <= maxHeight;\n    }\n\n    private findOptimalWordCount(node: ChildNode, words: string[], maxHeight: number): number {\n        let low = 1;\n        let high = words.length;\n        let result = 1;\n\n        while (low <= high) {\n            const mid = Math.floor((low + high) / 2);\n            const testText = words.slice(0, mid).join(WORD_SEPARATOR) + this.truncationCharacters;\n\n            if (this.textFits(node, testText, maxHeight)) {\n                result = mid;\n                low = mid + 1;\n            } else {\n                high = mid - 1;\n            }\n        }\n\n        return result;\n    }\n\n    private getLineHeight(): number {\n        if (this.cachedLineHeight !== null) {\n            return this.cachedLineHeight;\n        }\n\n        const styles = getComputedStyle(this.element);\n\n        if (styles.lineHeight === 'normal') {\n            const fontSize = parseFloat(styles.fontSize);\n            this.cachedLineHeight = Math.ceil(fontSize * DEFAULT_LINE_HEIGHT_MULTIPLIER);\n        } else {\n            this.cachedLineHeight = Math.ceil(parseFloat(styles.lineHeight));\n        }\n\n        return this.cachedLineHeight;\n    }\n\n    private calculateMaxLines(): number {\n        const availableHeight = this.maxHeight ?? this.element.clientHeight;\n        return Math.max(Math.floor(availableHeight / this.getLineHeight()), 0);\n    }\n\n    /**\n     * Recursively finds the deepest text node, skipping empty nodes.\n     */\n    private findDeepestTextNode(node: ChildNode): ChildNode | null {\n        if (!node.lastChild) {\n            return node;\n        }\n\n        // Traverse to nested children\n        if (node.lastChild.childNodes?.length > 0) {\n            const lastChildIndex = node.childNodes.length - 1;\n            return this.findDeepestTextNode(node.childNodes.item(lastChildIndex)!);\n        }\n\n        // Skip empty or truncation-only nodes\n        const isEmptyNode =\n            !node.lastChild.nodeValue || node.lastChild.nodeValue === '' || node.lastChild.nodeValue === this.truncationCharacters;\n\n        if (isEmptyNode && node.lastChild.parentNode) {\n            node.lastChild.parentNode.removeChild(node.lastChild);\n            return this.findDeepestTextNode(this.element);\n        }\n\n        return node.lastChild;\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -2,22 +2,34 @@ import * as i0 from '@angular/core';
 import { AfterViewInit, OnChanges, ElementRef, SimpleChanges } from '@angular/core';
 
 declare class NgxClamp implements AfterViewInit, OnChanges {
-    private readonly htmlElementRef;
-    maxHeight: number;
+    maxHeight: number | null;
+    lines: number;
     truncationCharacters: string;
     maxLines: number;
-    private readonly splitOnWordsCharacter;
-    constructor(htmlElementRef: ElementRef<HTMLElement>);
+    private cachedLineHeight;
+    private originalContent;
+    private isInitialized;
+    private readonly element;
+    constructor(elementRef: ElementRef<HTMLElement>);
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    private restoreOriginalContent;
     private clamp;
-    private truncate;
-    private getMaxHeight;
+    /**
+     * Uses binary search to find the optimal number of words that fit within maxHeight.
+     * Falls back to previous text node if current node's first word doesn't fit.
+     */
+    private truncateNode;
+    private textFits;
+    private findOptimalWordCount;
     private getLineHeight;
-    private getMaxLines;
-    private getLastChild;
+    private calculateMaxLines;
+    /**
+     * Recursively finds the deepest text node, skipping empty nodes.
+     */
+    private findDeepestTextNode;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxClamp, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxClamp, "[ngxClamp]", never, { "maxHeight": { "alias": "maxHeight"; "required": true; }; "truncationCharacters": { "alias": "truncationCharacters"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxClamp, "[ngxClamp]", never, { "maxHeight": { "alias": "maxHeight"; "required": false; }; "lines": { "alias": "lines"; "required": false; }; "truncationCharacters": { "alias": "truncationCharacters"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 export { NgxClamp };

package/package.json

@@ -1,40 +1,50 @@
 {
   "name": "@chitovas/ngx-clamp",
-  "version": "0.1.2",
+  "version": "1.0.0",
+  "description": "Angular directive for clamping text to a specified number of lines or height with cross-browser support.",
   "author": "Nigel Mukandi",
-  "description": "angular library designed to elegantly manage text overflow within HTML elements. This library allows you to clamp text, adding ellipsis or a truncation text of your choice when the content exceeds a specified height.",
+  "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git://github.com/Chitova263/ngx-clamp.git"
+    "url": "git+https://github.com/Chitova263/ngx-clamp.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Chitova263/ngx-clamp/issues"
   },
+  "homepage": "https://github.com/Chitova263/ngx-clamp#readme",
   "keywords": [
+    "angular",
+    "directive",
     "clamp",
+    "text-clamp",
     "line-clamp",
     "webkit-line-clamp",
-    "angular",
-    "directive"
+    "truncate",
+    "ellipsis",
+    "overflow"
   ],
-  "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "@angular/common": "^20.3.0",
-    "@angular/core": "^20.3.0"
+    "@angular/common": ">=18.0.0",
+    "@angular/core": ">=18.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
-  "module": "fesm2022/chitovas-ngx-clamp.mjs",
-  "typings": "index.d.ts",
   "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
     ".": {
       "types": "./index.d.ts",
+      "esm2022": "./esm2022/chitovas-ngx-clamp.mjs",
+      "esm": "./esm2022/chitovas-ngx-clamp.mjs",
       "default": "./fesm2022/chitovas-ngx-clamp.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
     }
-  }
+  },
+  "module": "fesm2022/chitovas-ngx-clamp.mjs",
+  "typings": "index.d.ts"
 }