@chitovas/ngx-clamp 0.1.0

package/fesm2022/chitovas-ngx-clamp.mjs

@@ -0,0 +1,131 @@
+import * as i0 from '@angular/core';
+import { Input, Directive } from '@angular/core';
+
+class NgxClamp {
+    htmlElementRef;
+    maxHeight = 0;
+    truncationCharacters = '...';
+    maxLines = 0;
+    splitOnWordsCharacter = ' ';
+    constructor(htmlElementRef) {
+        this.htmlElementRef = htmlElementRef;
+    }
+    ngAfterViewInit() {
+        this.clamp();
+    }
+    ngOnChanges(changes) {
+        if (changes['height']) {
+            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);
+            }
+        }
+    }
+    // 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;
+        }
+        if (words) {
+            const isTexFits = this.htmlElementRef.nativeElement.clientHeight <= maxRequiredHeight;
+            node.nodeValue = words.join(this.splitOnWordsCharacter) + this.truncationCharacters;
+            if (isTexFits) {
+                return;
+            }
+        }
+        // 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;
+        }
+        if (words) {
+            const isTexFits = this.htmlElementRef.nativeElement.clientHeight <= maxRequiredHeight;
+            if (isTexFits) {
+                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
+            node.nodeValue = this.truncationCharacters;
+            node = this.getLastChild(this.htmlElementRef.nativeElement);
+            return this.truncate(maxRequiredHeight, node);
+        }
+        return this.truncate(maxRequiredHeight, node, words, isCurrentNodeValueSplitIntoWords);
+    }
+    getMaxHeight(maxLines, element) {
+        const lineHeight = this.getLineHeight(element);
+        return lineHeight * maxLines;
+    }
+    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);
+        }
+        return Math.ceil(parseInt(lineHeight, 10));
+    }
+    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);
+    }
+    getLastChild(node) {
+        // Gets an element's last child. That may be another node or a node's contents.
+        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));
+        }
+        // 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)) {
+            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;
+        }
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NgxClamp, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxClamp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { maxHeight: [{
+                type: Input,
+                args: [{ required: true }]
+            }], truncationCharacters: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxClamp };
+//# sourceMappingURL=chitovas-ngx-clamp.mjs.map

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

@@ -0,0 +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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"}

package/index.d.ts

@@ -0,0 +1,23 @@
+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;
+    truncationCharacters: string;
+    maxLines: number;
+    private readonly splitOnWordsCharacter;
+    constructor(htmlElementRef: ElementRef<HTMLElement>);
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private clamp;
+    private truncate;
+    private getMaxHeight;
+    private getLineHeight;
+    private getMaxLines;
+    private getLastChild;
+    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>;
+}
+
+export { NgxClamp };

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@chitovas/ngx-clamp",
+  "version": "0.1.0",
+  "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.",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/Chitova263/ngx-clamp.git"
+  },
+  "keywords": [
+    "clamp",
+    "line-clamp",
+    "webkit-line-clamp",
+    "angular",
+    "directive"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": "^20.3.0",
+    "@angular/core": "^20.3.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",
+      "default": "./fesm2022/chitovas-ngx-clamp.mjs"
+    }
+  }
+}