[SDC-29] catalog 1707 rebase commit.

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

15 files changed, 742 insertions, 0 deletions

diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.html b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.html
new file mode 100644
index 0000000000..b351273c08
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.html
@@ -0,0 +1,19 @@
+<div class="main-wrap" data-tests-id="list-of-{{title}}">
+    <div class="header">
+        <div class="title">{{title}}</div>
+        <div class="buttons">
+            <span class="order-by hand sprite-new"
+                  data-ng-show="expandCollapseListData.expandCollapse"
+                  data-ng-class="{'asc':!desc, 'desc':desc }"
+                  data-ng-click="swapOrderBy()"></span>
+            <span class="search hand sprite-new search-icon"
+                  data-ng-class="{'selected':showSearchBox}"
+                  data-ng-show="expandCollapseListData.expandCollapse"
+                  data-ng-click="showHideSearchBox()"></span>
+            <span class="hand sprite-new expand-list"
+                  data-ng-class="{'open':expandCollapseListData.expandCollapse}"
+                  data-ng-click="expandCollapseListData.expandCollapse=!expandCollapseListData.expandCollapse"></span>
+        </div>
+    </div>
+    <input type="text" id="list-search-box" class="search-box" data-ng-if="expandCollapseListData.expandCollapse && showSearchBox" data-ng-model="expandCollapseListData.filter" autofocus/>
+</div>
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.less b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.less
new file mode 100644
index 0000000000..2a80f28007
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.less
@@ -0,0 +1,43 @@
+.main-wrap{
+    text-align: center;
+    .header{
+        background-color: @tlv_color_w;
+        height: 42px;
+        border-bottom: 1px solid rgba(0, 159, 219, 0.6);
+        border-top: 1px solid rgba(0, 159, 219, 0.6);
+        .title{
+            .f-type._14_m;
+            color: @main_color_l;
+            font-weight: 400;
+            line-height: 42px;
+            padding-left: 18px;
+            float: left;
+        }
+        .buttons{
+            float: right;
+            padding-right: 11px;
+            line-height: 42px;
+            span{
+                vertical-align: middle;
+            }
+            .search,.order-by{
+                margin-right: 5px;
+            }
+            //temporary///
+            .search{
+                display: none;
+            }
+            //////////////
+        }
+    }
+
+    .search-box{
+        border-radius: 2px;
+        height: 30px;
+        width:275px;
+        border: 1px @tlv_color_x solid;
+        margin: 8px 0;
+        padding: 0 5px;
+    }
+}
+
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.ts b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.ts
new file mode 100644
index 0000000000..73cb2def0b
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.ts
@@ -0,0 +1,66 @@
+/**
+ * Created by rcohen on 12/5/2016.
+ */
+'use strict';
+
+export class ExpandCollapseListData {
+    filter:string;//variable for filter text
+    orderByField:string;//order by field name
+    expandCollapse:boolean;//boolean param for expand collapse the list
+}
+
+export interface IExpandCollapseListHeaderScope extends ng.IScope {
+    title:string;//the title on the header
+    expandCollapseListData:ExpandCollapseListData;
+    showSearchBox:boolean;
+    desc:boolean;//order by desc or asc
+
+    swapOrderBy():void;
+    showHideSearchBox():void;
+}
+
+export class ExpandCollapseListHeaderDirective implements ng.IDirective {
+
+    constructor(private $timeout:ng.ITimeoutService) {
+    }
+
+    scope = {
+        title: '@',
+        expandCollapseListData: '='
+    };
+
+    public replace = false;
+    public restrict = 'AE';
+    public transclude = true;
+
+    template = ():string => {
+        return require('./expand-collapse-list-header.html');
+    };
+
+    link = (scope:IExpandCollapseListHeaderScope, $elem:any) => {
+        scope.swapOrderBy = ():void => {
+            if (scope.expandCollapseListData.orderByField.charAt(0) === '-') {
+                scope.expandCollapseListData.orderByField = scope.expandCollapseListData.orderByField.substr(1);
+            } else {
+                scope.expandCollapseListData.orderByField = '-' + scope.expandCollapseListData.orderByField;
+            }
+            scope.desc = !scope.desc;
+        };
+
+        scope.showHideSearchBox = ():void => {
+            scope.showSearchBox = !scope.showSearchBox;
+            if (scope.showSearchBox) {
+                this.$timeout(function () {
+                    angular.element("#list-search-box").focus();
+                }, 0);
+            }
+        };
+    };
+
+    public static factory = ($timeout:ng.ITimeoutService)=> {
+        return new ExpandCollapseListHeaderDirective($timeout);
+    };
+
+}
+
+ExpandCollapseListHeaderDirective.factory.$inject = ['$timeout'];
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts
new file mode 100644
index 0000000000..2a2432fcea
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts
@@ -0,0 +1,47 @@
+'use strict';
+import {MenuItem, MenuItemGroup} from "app/utils";
+
+export interface IExpandCollapseMenuBoxDirectiveScope extends ng.IScope {
+    menuItemsGroup:MenuItemGroup;
+    menuTitle:string;
+    parentScope:ng.IScope;
+    onMenuItemClick(menuItem:MenuItem):void;
+}
+
+export class ExpandCollapseMenuBoxDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        menuTitle: '@',
+        menuItemsGroup: '=',
+        parentScope: '='
+    };
+
+    public replace = false;
+    public restrict = 'AE';
+    public transclude = true;
+
+    template = ():string => {
+        return require('./expand-collapse-menu-box.html');
+    };
+
+    link = (scope:IExpandCollapseMenuBoxDirectiveScope) => {
+        scope.onMenuItemClick = (menuItem:MenuItem):void => {
+            let onSuccess = ():void => {
+                scope.menuItemsGroup.selectedIndex = scope.menuItemsGroup.menuItems.indexOf(menuItem);
+            };
+            let onFailed = ():void => {
+            };
+            scope.parentScope[menuItem.action](menuItem.state).then(onSuccess, onFailed);
+        }
+    };
+
+    public static factory = ()=> {
+        return new ExpandCollapseMenuBoxDirective();
+    };
+
+}
+
+ExpandCollapseMenuBoxDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html
new file mode 100644
index 0000000000..f90f00f230
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html
@@ -0,0 +1,17 @@
+<div class="expand-collapse-menu-box">
+    <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content" class="expand-collapse-menu-box-title">
+        <div class="expand-collapse-header">
+            <div class="expand-collapse-menu-box-title-icon"></div>
+            <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="menuTitle" tooltips tooltip-content="{{menuTitle}}"></span>
+        </div>
+    </expand-collapse>
+
+    <div class="w-sdc-designer-sidebar-section-content" >
+        <div class="i-sdc-designer-sidebar-section-content-item expand-collapse-menu-box-item second-level"
+             ng-class="{'selected': $index == menuItemsGroup.selectedIndex}" ng-repeat="(key, menuItem) in menuItemsGroup.menuItems track by $index">
+            <div class="expand-collapse-menu-box-item-text" ng-click="onMenuItemClick(menuItem)"  ng-class="{'disabled': menuItem.isDisabled }" data-tests-id="{{menuItem.text}}step" >{{menuItem.text}}</div>
+        </div>
+    </div>
+
+</div>
+
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less
new file mode 100644
index 0000000000..13ec1c99be
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less
@@ -0,0 +1,67 @@
+.expand-collapse-menu-box {
+    line-height: 20px;
+    //padding: 13px 0px 5px 10px;
+    background-color: @tlv_color_t;
+    //margin: 3px 3px 5px 0px;
+
+    .expand-collapse-header{
+        border-bottom: 1px solid @main_color_o;
+        height: @action_nav_height;
+        background-color:@main_color_p;
+        display:flex;
+        align-items:center;
+    }
+
+    .expand-collapse-menu-box-title {
+        .f-type._18_m;
+        color: @main_color_a;
+        //font-weight: bold;
+        .hand;
+        .w-sdc-designer-sidebar-section-title-text{
+            max-width: 185px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+            white-space: nowrap;
+            padding: 8px 0;
+        }
+
+        &.expanded {
+            .expand-collapse-menu-box-title-icon {
+                transform: rotate(180deg);
+            }
+        }
+    }
+    .expand-collapse-menu-box-title-icon {
+        .hand;
+        .sprite-new;
+        .arrow-up;
+        margin-right: 6px;
+        transition: .3s all;
+        position: relative;
+        vertical-align: text-top;
+        margin-left: 14px;
+        vertical-align: 14px;
+    }
+    .w-sdc-designer-sidebar-section-content {
+        overflow: hidden;
+        //padding-top: 13px;
+        .expand-collapse-menu-box-item {
+            .hand;
+            padding-left: 14px;
+            //margin: 0px 0px 10px 10px;
+            font-family: @font-omnes-medium;
+            color: @main_color_m;
+
+            line-height: 18px;
+            &.selected {
+                //padding-left: 10px;
+                //font-weight: bold;
+                //border-left: 4px solid @main_color_a;
+                background-color: #009fdb;
+                color: #ffffff;
+            }
+
+        }
+    }
+}
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.html b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.html
new file mode 100644
index 0000000000..a2358ea2b7
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.html
@@ -0,0 +1 @@
+<ng-transclude></ng-transclude>
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.less b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.less
new file mode 100644
index 0000000000..e6b7b7d516
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.less
@@ -0,0 +1,11 @@
+.ellipsis-directive-more-less {
+    .a_9;
+    .bold;
+    .hand;
+    float: right;
+    margin-right: 10px;
+    line-height: 23px;
+    text-decoration: underline;
+    text-align: left;
+}
+
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts
new file mode 100644
index 0000000000..3993f06036
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts
@@ -0,0 +1,115 @@
+'use strict';
+export interface IExpandCollapseScope extends ng.IScope {
+    toggle():void;
+    collapsed:boolean;
+    expandedSelector:string;
+    content:string;
+    isCloseOnInit:boolean;
+    loadDataFunction:Function;
+    isLoadingData:boolean;
+}
+
+export class ExpandCollapseDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        expandedSelector: '@',
+        loadDataFunction: '&?',
+        isCloseOnInit: '=?'
+    };
+
+    public replace = false;
+    public restrict = 'AE';
+    public transclude = true;
+
+    template = ():string => {
+        return require('./expand-collapse.html');
+    };
+
+    link = (scope:IExpandCollapseScope, $elem:any) => {
+        scope.collapsed = false;
+        scope.isLoadingData = false;
+        $elem.addClass('expanded');
+
+
+        if (scope.isCloseOnInit) {
+            window.setTimeout(function () {
+                toggle();
+            }, 0);
+        }
+        //
+        // $elem.click(function () {
+        //     toggle();
+        // });
+        $elem.bind('click', function() {
+            toggle();
+        })
+        let expand = ():void => {
+            $elem.addClass('expanded');
+            scope.collapsed = false;
+
+            let element = $(scope.expandedSelector)[0];
+            let prevWidth = element.style.height;
+            element.style.height = 'auto';
+            let endWidth = getComputedStyle(element).height;
+            element.style.height = prevWidth;
+            element.offsetHeight; // force repaint
+            element.style.transition = 'height .3s ease-in-out';
+            element.style.height = endWidth;
+            element.hidden = false;
+            element.addEventListener('transitionend', function transitionEnd(event) {
+                if (event['propertyName'] == 'height') {
+                    element.style.transition = '';
+                    element.style.height = 'auto';
+                    element.removeEventListener('transitionend', transitionEnd, false);
+                }
+            }, false)
+        };
+
+        let collapse = ():void => {
+            $elem.removeClass('expanded');
+            scope.collapsed = true;
+
+            let element = $(scope.expandedSelector)[0];
+            element.style.height = getComputedStyle(element).height;
+            element.style.transition = 'height .5s ease-in-out';
+            element.offsetHeight; // force repaint
+            element.style.height = '0px';
+            element.hidden = true;
+        };
+
+        let toggle = ():void => {
+            if (scope.collapsed === true) {
+                if (scope.loadDataFunction) {
+                    scope.isLoadingData = true;
+                    let onSuccess = () => {
+                        window.setTimeout(function () {
+                            expand();
+                            scope.isLoadingData = false;
+                        }, 0);
+                    };
+                    scope.loadDataFunction().then(onSuccess);
+                }
+                else {
+                    if (scope.isLoadingData === false) {
+                        expand();
+                    }
+                }
+
+            } else {
+                if (scope.isLoadingData === false) {
+                    collapse();
+                }
+            }
+        }
+
+    };
+
+    public static factory = ()=> {
+        return new ExpandCollapseDirective();
+    };
+}
+
+ExpandCollapseDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/utils/sdc-keyboard-events/sdc-keyboard-events.ts b/catalog-ui/src/app/directives/utils/sdc-keyboard-events/sdc-keyboard-events.ts
new file mode 100644
index 0000000000..71a963a492
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/sdc-keyboard-events/sdc-keyboard-events.ts
@@ -0,0 +1,84 @@
+'use strict';
+
+export interface ISdcKeyboardEventsScope extends ng.IScope {
+    keyEnter:Function;
+    keyShift:Function;
+    keyCtrl:Function;
+    keyEscape:Function;
+    keySpace:Function;
+}
+
+export class SdcKeyboardEventsDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        keyEnter: '=',
+        keyShift: '=',
+        keyCtrl: '=',
+        keyEscape: '=',
+        keySpace: '='
+    };
+
+    public replace = false;
+    public restrict = 'A';
+    public transclude = false;
+
+    link = (scope:ISdcKeyboardEventsScope, element:ng.IAugmentedJQuery, attrs:angular.IAttributes) => {
+
+        element.bind("keydown keypress", function (event) {
+            //console.log(event.which);
+            switch (event.which) {
+                case 13: // enter key
+                    scope.$apply(function () {
+                        if (scope.keyEnter) {
+                            scope.keyEnter();
+                            event.preventDefault();
+                        }
+                    });
+                    break;
+                case 16: // shift key
+                    scope.$apply(function () {
+                        if (scope.keyShift) {
+                            scope.keyShift();
+                            event.preventDefault();
+                        }
+                    });
+                    break;
+                case 17: // ctrl key
+                    scope.$apply(function () {
+                        if (scope.keyCtrl) {
+                            scope.keyCtrl();
+                            event.preventDefault();
+                        }
+                    });
+                    break;
+                case 27: // escape key
+                    scope.$apply(function () {
+                        if (scope.keyEscape) {
+                            scope.keyEscape();
+                            event.preventDefault();
+                        }
+                    });
+                    break;
+                case 32: // space key
+                    scope.$apply(function () {
+                        if (scope.keySpace) {
+                            scope.keySpace();
+                            event.preventDefault();
+                        }
+                    });
+                    break;
+            }
+        });
+
+    };
+
+    public static factory = ()=> {
+        return new SdcKeyboardEventsDirective();
+    };
+
+}
+
+SdcKeyboardEventsDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.html b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.html
new file mode 100644
index 0000000000..fb1ada69c3
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.html
@@ -0,0 +1,27 @@
+<div class="tags-box" >
+    <input type="text"
+           name="{{elementName}}"
+           class="new-tag-input"
+           data-ng-class="{'view-mode':sdcDisabled}"
+           data-ng-change="validateName()"
+           data-ng-model="newTag"
+           data-ng-maxlength="50"
+           data-ng-pattern="pattern"
+           data-tests-id="i-sdc-tag-input"
+           maxlength="50"
+           sdc-keyboard-events
+           key-enter="addTag"
+
+        />
+    <perfect-scrollbar class="perfect-scrollbar tags-wrapper"  data-ng-class="{'view-mode':sdcDisabled}" include-padding="true">
+        <div data-tests-id="i-sdc-tags-wrapper" >
+            <div class="group-tag" data-ng-show="specialTag">
+                <sdc-tag data-hide-tooltip="true" data-hide-delete="true"
+                         data-tag-data="{tag: specialTag, id: specialTag }"></sdc-tag>
+            </div>
+            <div class="group-tag" ng-repeat="tag in tags track by $index">
+                <sdc-tag ng-if="tag != specialTag" data-on-delete="deleteTag(tag)" sdc-disable="sdcDisabled" data-hide-delete="sdcDisabled" data-hide-tooltip="true" data-tag-data="{tag: tag, id: tag }"></sdc-tag>
+            </div>
+        </div>
+    </perfect-scrollbar>
+</div>
diff --git a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less
new file mode 100644
index 0000000000..942196e663
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less
@@ -0,0 +1,61 @@
+.tags-box {
+
+    height: 297px;
+    .bg_c;
+
+    .perfect-scrollbar {
+        height: 265px;
+    }
+
+    .new-tag-input {
+        display: block;
+
+        -webkit-border-bottom-left-radius: 0 !important;
+        -moz-border-radius-bottomleft: 0 !important;
+        -khtml-border-bottom-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+
+        -webkit-border-bottom-right-radius: 0 !important;
+        -moz-border-radius-bottomright: 0 !important;
+        -khtml-border-bottom-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+
+        border: solid 1px #d8d8d8;
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        padding: 2px 10px;
+        outline: none;
+    }
+
+    .tags-wrapper {
+        padding: 10px;
+        .border-radius-bottom-left(2px);
+        .border-radius-bottom-right(2px);
+        border: solid 1px #d8d8d8;
+        border-top: none;
+
+        .group-tag {
+            display: inline-block;
+
+            .sdc-tag {
+                border: solid 1px @main_color_n;
+                background-color: @main_color_p;
+                min-width: auto;
+                .tag {
+                    margin-right: 10px;
+                }
+            }
+        }
+        &.view-mode .group-tag {
+            opacity: 1;
+            background-color: #f8f8f8 !important;
+            .sdc-tag {
+                background: none;
+                border-color: @main_color_o;
+            }
+        }
+    }
+
+}
+
diff --git a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.ts b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.ts
new file mode 100644
index 0000000000..082a77dd9f
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.ts
@@ -0,0 +1,75 @@
+'use strict';
+
+export interface ISdcTagsScope extends ng.IScope {
+    tags:Array<string>;
+    specialTag:string;
+    newTag:string;
+    formElement:ng.IFormController;
+    elementName:string;
+    pattern:any;
+    sdcDisabled:boolean;
+    maxTags:number;
+    deleteTag(tag:string):void;
+    addTag(tag:string):void;
+    validateName():void;
+}
+
+export class SdcTagsDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        tags: '=',
+        specialTag: '=',
+        pattern: '=',
+        sdcDisabled: '=',
+        formElement: '=',
+        elementName: '@',
+        maxTags: '@'
+    };
+
+    public replace = false;
+    public restrict = 'E';
+    public transclude = false;
+
+    template = ():string => {
+        return require('./sdc-tags.html');
+    };
+
+    link = (scope:ISdcTagsScope, element:ng.INgModelController) => {
+
+        scope.deleteTag = (tag:string):void => {
+            scope.tags.splice(scope.tags.indexOf(tag), 1);
+        };
+
+        scope.addTag = ():void => {
+            let valid = scope.formElement[scope.elementName].$valid;
+            if (valid &&
+                scope.tags.length < scope.maxTags &&
+                scope.newTag &&
+                scope.newTag !== '' &&
+                scope.tags.indexOf(scope.newTag) === -1 &&
+                scope.newTag !== scope.specialTag) {
+                scope.tags.push(scope.newTag);
+                scope.newTag = '';
+            }
+        };
+
+        scope.validateName = ():void => {
+            if (scope.tags.indexOf(scope.newTag) > -1) {
+                scope.formElement[scope.elementName].$setValidity('nameExist', false);
+            } else {
+                scope.formElement[scope.elementName].$setValidity('nameExist', true);
+            }
+        }
+
+    };
+
+    public static factory = ()=> {
+        return new SdcTagsDirective();
+    };
+
+}
+
+SdcTagsDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts b/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts
new file mode 100644
index 0000000000..d0177b4094
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts
@@ -0,0 +1,61 @@
+'use strict';
+
+export interface ISmartTooltipScope extends ng.IScope {
+    sdcSmartToolip;
+}
+
+export class SmartTooltipDirective implements ng.IDirective {
+
+    constructor(private $compile:ng.ICompileService) {
+    }
+
+    public replace = false;
+    public restrict = 'A';
+    public transclude = false;
+
+    public link = (scope:ISmartTooltipScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => {
+
+        if ($elem[0].hasAttribute('style') === false) {
+            $elem[0].setAttribute("style", "overflow: hidden; white-space: nowrap; text-overflow: ellipsis;");
+        } else {
+            let styles = $elem.attr('style');
+            $elem[0].setAttribute("style", styles + ";overflow: hidden; white-space: nowrap; text-overflow: ellipsis;");
+        }
+
+        $elem.bind('mouseenter', () => {
+            if ($elem[0].offsetWidth < $elem[0].scrollWidth && !$elem.attr('tooltips')) {
+                $attrs.$set('tooltips', 'tooltips');
+                if ($attrs['sdcSmartTooltip'] && $attrs['sdcSmartTooltip'].length > 0) {
+                    $elem.attr('tooltip-content', $attrs['sdcSmartTooltip']);
+                } else {
+                    $attrs.$set('tooltip-content', $elem.text());
+                }
+
+                //One possible problem arises when the ngIf is placed on the root element of the template.
+                //ngIf removes the node and places a comment in it's place. Then it watches over the expression and adds/removes the actual HTML element as necessary.
+                //The problem seems to be that if it is placed on the root element of the template, then a single comment is what is left from the
+                //whole template (even if only temporarily), which gets ignored (I am not sure if this is browser-specific behaviour), resulting in an empty template.
+
+                // Remove ng-if attribute and its value (if we reach here, we pass ng-if (ng-if===true), so we can remove it).
+                $elem.removeAttr('ng-if');
+                $elem.removeAttr('data-ng-if');
+
+                // Remove me (the directive from the element)
+                let template = $elem[0].outerHTML;
+                template = template.replace('sdc-smart-tooltip=""', '');
+                template = template.replace('sdc-smart-tooltip="' + $elem.text() + '"', '');
+                //console.log(template);
+
+                let el = this.$compile(template)(scope);
+                console.log(el);
+                $elem.replaceWith(el);
+            }
+        });
+    };
+
+    public static factory = ($compile:ng.ICompileService)=> {
+        return new SmartTooltipDirective($compile);
+    };
+}
+
+SmartTooltipDirective.factory.$inject = ['$compile'];
diff --git a/catalog-ui/src/app/directives/utils/validation-on-load/validation-on-load.ts b/catalog-ui/src/app/directives/utils/validation-on-load/validation-on-load.ts
new file mode 100644
index 0000000000..d489efa928
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/validation-on-load/validation-on-load.ts
@@ -0,0 +1,48 @@
+'use strict';
+
+export interface IValidationOnLoadScope extends ng.IScope {
+    formToValidate:ng.IFormController;
+}
+
+export class ValidationOnLoadDirective implements ng.IDirective {
+
+    constructor(private $timeout:ng.ITimeoutService) {
+    }
+
+    scope = {
+        formToValidate: '='
+    };
+
+    public replace = false;
+    public restrict = 'A';
+
+
+    public link = (scope:IValidationOnLoadScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => {
+
+        let init = ()=> {
+            //validate errors
+            if (scope.formToValidate.$error) {
+                angular.forEach(scope.formToValidate.$error, (value, key)=> {
+                    //skip on the required error if its a new form
+                    if (key != 'required') {
+                        angular.forEach(value, function (field) {
+                            field.$setDirty();//trigger to show the error label
+                        });
+                    }
+                })
+            }
+        };
+
+        this.$timeout(()=> {
+            init();
+        }, 0);
+
+    };
+
+    public static factory = ($timeout:ng.ITimeoutService)=> {
+        return new ValidationOnLoadDirective($timeout);
+    };
+
+}
+
+ValidationOnLoadDirective.factory.$inject = ['$timeout'];