5 files changed, 128 insertions, 0 deletions
diff --git a/src/angular/tag-cloud/tag-cloud.component.html.ts b/src/angular/tag-cloud/tag-cloud.component.html.ts
new file mode 100644
index 0000000..2ff4e8a
--- /dev/null
+++ b/src/angular/tag-cloud/tag-cloud.component.html.ts
@@ -0,0 +1,30 @@
+export default `
+<div class="sdc-tag-cloud-new-item-field" [ngClass]="{'not-empty': newTagItem}">
+    <sdc-input [label]="label"
+               [disabled]="(isViewOnly===true)"
+               [placeHolder]="placeholder"
+               [(value)]="newTagItem"
+               (keyup)="onKeyup($event)"
+               [ngClass]="{'error': uniqueError}"></sdc-input>
+    <div class="add-button" (click)="newTagItem && insertItemToList()" [ngClass]="{'disabled': !newTagItem || uniqueError}">
+        <span class="plus-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+              <defs>
+                <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/>
+              </defs>
+              <g fill="none" fill-rule="evenodd" transform="translate(4 4)">
+                <use xlink:href="#add-a"/>
+              </g>
+            </svg>
+        </span>
+    </div>
+</div>
+<div class="sdc-list-container">
+    <sdc-tag-item *ngFor="let item of list; let i = index;"
+                   [text]="item"
+                   [index]="i"
+                   [isViewOnly]="isViewOnly && (isViewOnly === true || isViewOnly.indexOf(i) > -1)"
+                   (clickOnDelete)="deleteItemFromList($event)"></sdc-tag-item>
+</div>
+<div class="error-message" *ngIf="uniqueError">{{uniqueErrorMessage}}</div>
+`;
diff --git a/src/angular/tag-cloud/tag-cloud.component.ts b/src/angular/tag-cloud/tag-cloud.component.ts
new file mode 100644
index 0000000..1635b8d
--- /dev/null
+++ b/src/angular/tag-cloud/tag-cloud.component.ts
@@ -0,0 +1,46 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import template from "./tag-cloud.component.html";
+
+@Component({
+    selector: 'sdc-tag-cloud',
+    template: template,
+})
+export class TagCloudComponent {
+    @Input() public list: string[];
+    @Input() public isViewOnly: boolean|number[]; // get a boolean parameter or array of specific items indexes.
+    @Input() public isUniqueList: boolean;
+    @Input() public uniqueErrorMessage: string = "Unique error";
+    @Input() public label: string;
+    @Input() public placeholder: string;
+    @Output() public listChanged: EventEmitter<string[]> = new EventEmitter<string[]>();
+    private newTagItem: string;
+    private uniqueError: boolean;
+
+    private onKeyup = (e): void => {
+        if (e.keyCode === 13) {
+            this.insertItemToList();
+        }
+    }
+
+    private insertItemToList = (): void => {
+        this.validateTag();
+        if (!this.uniqueError && this.newTagItem.length) {
+            this.list.push(this.newTagItem);
+            this.newTagItem = "";
+            this.listChanged.emit(this.list);
+        }
+    }
+
+    private deleteItemFromList = (index: number): void => {
+        this.list.splice(index, 1);
+        if (Array.isArray(this.isViewOnly)) {
+            this.isViewOnly = this.isViewOnly.map((i: number) => {
+                return i > index ? i - 1 : i;
+            });
+        }
+    }
+
+    private validateTag = (): void => {
+        this.uniqueError = this.list && this.list.indexOf(this.newTagItem) > -1;
+    }
+}
diff --git a/src/angular/tag-cloud/tag-cloud.module.ts b/src/angular/tag-cloud/tag-cloud.module.ts
new file mode 100644
index 0000000..fd7efb4
--- /dev/null
+++ b/src/angular/tag-cloud/tag-cloud.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+import { TagItemComponent } from "./tag-item/tag-item.component";
+import { TagCloudComponent } from "./tag-cloud.component";
+import { CommonModule } from "@angular/common";
+import { FormElementsModule } from './../form-elements/form-elements.module';
+
+@NgModule({
+    declarations: [
+        TagItemComponent,
+        TagCloudComponent
+    ],
+    imports: [
+        CommonModule,
+        FormElementsModule
+    ],
+    exports: [
+        TagCloudComponent
+    ]
+})
+export class TagCloudModule {
+}
diff --git a/src/angular/tag-cloud/tag-item/tag-item.component.html.ts b/src/angular/tag-cloud/tag-item/tag-item.component.html.ts
new file mode 100644
index 0000000..04112c1
--- /dev/null
+++ b/src/angular/tag-cloud/tag-item/tag-item.component.html.ts
@@ -0,0 +1,16 @@
+export default `
+<div class="tag-item" [ngClass]="{'view-only':isViewOnly}">
+    <span>{{text}}</span>
+    <span class="delete-item" *ngIf="!isViewOnly" (click)="clickOnDelete.emit(index)">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+          <defs>
+            <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+          </defs>
+          <g fill="none" fill-rule="evenodd">
+            <use xlink:href="#close-a"/>
+          </g>
+        </svg>
+    </span>
+</div>
+`;
+
diff --git a/src/angular/tag-cloud/tag-item/tag-item.component.ts b/src/angular/tag-cloud/tag-item/tag-item.component.ts
new file mode 100644
index 0000000..f2e2fa7
--- /dev/null
+++ b/src/angular/tag-cloud/tag-item/tag-item.component.ts
@@ -0,0 +1,15 @@
+import { Component, EventEmitter, Input, Output, HostBinding } from "@angular/core";
+import template from "./tag-item.component.html";
+
+@Component({
+    selector: 'sdc-tag-item',
+    template: template
+})
+
+export class TagItemComponent {
+    @HostBinding('class') classes = 'sdc-tag-item';
+    @Input() public text: string;
+    @Input() public isViewOnly: boolean;
+    @Input() public index: number;
+    @Output() public clickOnDelete: EventEmitter<number> = new EventEmitter<number>();
+}