[SDC-29] catalog 1707 rebase commit.

Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>

3 files changed, 110 insertions, 0 deletions

diff --git a/catalog-ui/src/app/directives/tag/tag-directive.html b/catalog-ui/src/app/directives/tag/tag-directive.html
new file mode 100644
index 0000000000..28c22a7978
--- /dev/null
+++ b/catalog-ui/src/app/directives/tag/tag-directive.html
@@ -0,0 +1,10 @@
+<div class="sdc-tag">
+    <div class="tag" data-tests-id="i-sdc-tag-text" sdc-smart-tooltip data-ng-bind="tagData.tag"></div>
+    <div class="category" data-ng-hide="hideTooltip===true">
+        <span class="relation-categoty-icon" data-tooltips data-tooltip-side="bottom" data-tooltip="'<span class='tag-tooltip-wrap'>{{tagData.tooltip}}</span>'" data-tooltip-enable="false"></span>
+    </div>
+
+    <div class="delete" data-ng-if="!hideDelete && !sdcDisable" data-ng-click="delete()" data-tests-id="i-sdc-tag-delete">
+        <span class="delete-icon"></span>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/directives/tag/tag-directive.less b/catalog-ui/src/app/directives/tag/tag-directive.less
new file mode 100644
index 0000000000..f72e366ac6
--- /dev/null
+++ b/catalog-ui/src/app/directives/tag/tag-directive.less
@@ -0,0 +1,51 @@
+.sdc-tag{
+
+    background-color:#F2F2F2 ;
+    .border-radius(4px);
+    min-width:150px;
+    height:30px;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    margin: 2px;
+
+    .tag{
+        display: inline-block;
+    }
+
+    .category{
+        margin-right: 4px;
+        margin-left: 25px;
+        width: 25px;
+
+    }
+    .relation-categoty-icon{
+        .sprite;
+        .sprite.relation-icon;
+        .hand;
+        vertical-align: middle;
+
+    }
+
+    .relation-categoty-icon:hover{
+        .sprite;
+        .sprite.relation-icon-hover;
+    }
+
+    .delete{
+
+    }
+    .delete-icon{
+        .sprite;
+        .sprite.x-btn-black;
+        .hand;
+        vertical-align: middle;
+    }
+}
+
+.tag-tooltip-wrap {
+    background-color: rgba(80, 99, 113, 0.9);
+    position: relative;
+    display: inline-block;
+    margin: -5px -14px 0px -14px;
+}
diff --git a/catalog-ui/src/app/directives/tag/tag-directive.ts b/catalog-ui/src/app/directives/tag/tag-directive.ts
new file mode 100644
index 0000000000..77a26fc6f7
--- /dev/null
+++ b/catalog-ui/src/app/directives/tag/tag-directive.ts
@@ -0,0 +1,49 @@
+'use strict';
+
+export class TagData {
+    tag:string;
+    tooltip:string;
+    id:string;
+}
+
+export interface ITagScope extends ng.IScope {
+    tagData:TagData;
+    onDelete:Function;
+    delete:Function;
+    hideTooltip:boolean;
+    hideDelete:boolean;
+    sdcDisable:boolean;
+}
+
+export class TagDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        tagData: '=',
+        onDelete: '&',
+        hideTooltip: '=',
+        hideDelete: '=',
+        sdcDisable: '='
+    };
+
+    replace = true;
+    restrict = 'EA';
+    template = ():string => {
+        return require('./tag-directive.html');
+    };
+
+    link = (scope:ITagScope) => {
+        scope.delete = ()=> {
+            scope.onDelete({'uniqueId': scope.tagData.id});
+        }
+    };
+
+    public static factory = ()=> {
+        return new TagDirective();
+    };
+
+}
+
+TagDirective.factory.$inject = [];