1 files changed, 58 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts
new file mode 100644
index 0000000000..68cfedb32b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts
@@ -0,0 +1,58 @@
+import {Component, OnChanges, AfterViewChecked, ViewChild, ElementRef, Input, Output, SimpleChanges, EventEmitter} from "@angular/core";
+import {WindowRef} from "../../services/window.service";
+
+@Component({
+	selector: 'multiline-ellipsis',
+	templateUrl: 'multiline-ellipsis.component.html',
+	styleUrls: ['multiline-ellipsis.component.less']
+})
+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(private windowRef: WindowRef) {
+		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;
+			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() {
+		return this.windowRef.nativeWindow.getComputedStyle(this.elmContainer.nativeElement)['line-height'];
+	}
+
+}