From 5b593496b8f1b8e8be8d7d2dbcc223332e65a49b Mon Sep 17 00:00:00 2001
From: Michael Lando <ml636r@att.com>
Date: Sun, 29 Jul 2018 16:13:45 +0300
Subject: re base code

Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5
Issue-ID: SDC-1566
Signed-off-by: Michael Lando <ml636r@att.com>
---
 .../multiline-ellipsis.component.html              |  6 +++
 .../multiline-ellipsis.component.less              | 25 ++++++++++
 .../multiline-ellipsis.component.ts                | 58 ++++++++++++++++++++++
 .../multiline-ellipsis.module.ts                   | 11 ++++
 4 files changed, 100 insertions(+)
 create mode 100644 catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html
 create mode 100644 catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.less
 create mode 100644 catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts
 create mode 100644 catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.module.ts

(limited to 'catalog-ui/src/app/ng2/shared/multiline-ellipsis')

diff --git a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html
new file mode 100644
index 0000000000..c9f59f071c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html
@@ -0,0 +1,6 @@
+<div class="multiline-ellipsis-container" [ngClass]="className" [ngStyle]="stylesContainer" #multilineEllipsisContainer>
+	<div class="multiline-ellipsis-content" [ngStyle]="stylesContent" #multilineEllipsisContent>
+		<ng-content></ng-content>
+		<div class="multiline-ellipsis-dots" [ngStyle]="stylesDots"></div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.less b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.less
new file mode 100644
index 0000000000..c616d37bd8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.less
@@ -0,0 +1,25 @@
+.multiline-ellipsis-container {
+	position: relative;
+	display: block;
+	overflow: hidden;
+	white-space: normal;
+	//max-height: @num_lines * @line_height;
+
+	.multiline-ellipsis-content {
+		word-break: break-all;
+		position: relative;
+		//max-height: (@num_lines + 1) * @line_height;
+
+		.multiline-ellipsis-dots {
+			display: block;
+			position: absolute;
+			right: 0;
+			//top: calc(#{@num_lines * 2} - 100%);
+
+			&::before {
+				display: block;
+				content: '...';
+			}
+		}
+	}
+}
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'];
+	}
+
+}
diff --git a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.module.ts b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.module.ts
new file mode 100644
index 0000000000..24ed7b38af
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.module.ts
@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MultilineEllipsisComponent} from './multiline-ellipsis.component';
+
+@NgModule({
+	declarations: [MultilineEllipsisComponent],
+    imports: [CommonModule],
+	exports: [MultilineEllipsisComponent],
+	entryComponents: [MultilineEllipsisComponent]
+})
+export class MultilineEllipsisModule {}
-- 
cgit 1.2.3-korg