1 files changed, 70 insertions, 0 deletions
diff --git a/src/angular/multiline-ellipsis/multiline-ellipsis.component.ts b/src/angular/multiline-ellipsis/multiline-ellipsis.component.ts
new file mode 100644
index 0000000..bc7f805
--- /dev/null
+++ b/src/angular/multiline-ellipsis/multiline-ellipsis.component.ts
@@ -0,0 +1,70 @@
+import { Component, OnChanges, AfterViewChecked, ViewChild, ElementRef, Input, Output, SimpleChanges, EventEmitter } from "@angular/core";
+import { template } from './multiline-ellipsis.component.html';
+
+declare const window: any;
+
+@Component({
+	selector: 'multiline-ellipsis',
+	template: template
+})
+
+export class MultilineEllipsisComponent implements OnChanges, AfterViewChecked {
+
+	@Input() public lines: number;
+	@Input() public lineHeight: string;
+	@Input() public className: string;
+	@Output() public hasEllipsisChanged: EventEmitter<boolean>;
+
+	@ViewChild('multilineEllipsisContainer') public elmContainer: ElementRef;
+	@ViewChild('multilineEllipsisContent') public elmContent: ElementRef;
+
+	public stylesContainer: { [key: string]: string };
+	public stylesContent: { [key: string]: string };
+	public stylesDots: { [key: string]: string };
+
+	private hasEllipsis: boolean;
+
+	public constructor() {
+		this.hasEllipsisChanged = new EventEmitter<boolean>();
+	}
+
+	public ngOnChanges(changes: SimpleChanges) {
+		this.prepareStyles()
+	}
+
+	public ngAfterViewChecked() {
+		const hasEllipsis = (this.elmContainer.nativeElement.offsetHeight < this.elmContent.nativeElement.offsetHeight);
+		if (hasEllipsis !== this.hasEllipsis) {
+			this.hasEllipsis = hasEllipsis;
+			setTimeout(() => {
+				this.hasEllipsisChanged.emit(this.hasEllipsis);
+			});
+		}
+	}
+
+	private prepareStyles() {
+		const lineHeight = this.lineHeight || this.getLineHeight();
+		this.stylesContainer = {
+			'max-height': `calc(${this.lines} * ${lineHeight})`
+		};
+		this.stylesContent = {
+			'max-height': `calc(${this.lines + 1} * ${lineHeight})`
+		};
+		this.stylesDots = {
+			'top': `calc(${2 * this.lines} * ${lineHeight} - 100%)`
+		};
+	}
+
+	private getLineHeight() {
+		let lineHeight: number = parseFloat(window.getComputedStyle(this.elmContainer.nativeElement)['line-height']);
+		if (!lineHeight) {
+			const oneLetterElm = window.document.createElement('div');
+			oneLetterElm.innerText = '.';
+			this.elmContainer.nativeElement.append(oneLetterElm);
+			lineHeight = oneLetterElm.clientHeight;
+			this.elmContainer.nativeElement.removeChild(oneLetterElm);
+		}
+		return `${lineHeight}px`;
+	}
+
+}