summaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/scripts/directives/utils
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-02-19 10:28:42 +0200
committerMichael Lando <ml636r@att.com>2017-02-19 10:51:01 +0200
commit451a3400b76511393c62a444f588a4ed15f4a549 (patch)
treee4f5873a863d1d3e55618eab48b83262f874719d /catalog-ui/app/scripts/directives/utils
parent5abfe4e1fb5fae4bbd5fbc340519f52075aff3ff (diff)
Initial OpenECOMP SDC commit
Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/app/scripts/directives/utils')
-rw-r--r--catalog-ui/app/scripts/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts66
-rw-r--r--catalog-ui/app/scripts/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html15
-rw-r--r--catalog-ui/app/scripts/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less55
-rw-r--r--catalog-ui/app/scripts/directives/utils/expand-collapse/expand-collapse.html1
-rw-r--r--catalog-ui/app/scripts/directives/utils/expand-collapse/expand-collapse.less10
-rw-r--r--catalog-ui/app/scripts/directives/utils/expand-collapse/expand-collapse.ts136
-rw-r--r--catalog-ui/app/scripts/directives/utils/page-selector/page-selector.html9
-rw-r--r--catalog-ui/app/scripts/directives/utils/page-selector/page-selector.less51
-rw-r--r--catalog-ui/app/scripts/directives/utils/page-selector/page-selector.ts106
-rw-r--r--catalog-ui/app/scripts/directives/utils/sdc-keyboard-events/sdc-keyboard-events.ts106
-rw-r--r--catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.html27
-rw-r--r--catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.less61
-rw-r--r--catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.ts97
-rw-r--r--catalog-ui/app/scripts/directives/utils/sdc_error_tooltip/sdc_error_tooltip.html6
-rw-r--r--catalog-ui/app/scripts/directives/utils/sdc_error_tooltip/sdc_error_tooltip.ts109
-rw-r--r--catalog-ui/app/scripts/directives/utils/sdc_messages/sdc-message.ts179
-rw-r--r--catalog-ui/app/scripts/directives/utils/sdc_messages/sdc-messages.less10
-rw-r--r--catalog-ui/app/scripts/directives/utils/sdc_messages/sdc-messages.ts245
-rw-r--r--catalog-ui/app/scripts/directives/utils/sdc_messages/sdc_messages.html1
-rw-r--r--catalog-ui/app/scripts/directives/utils/smart-tooltip/smart-tooltip.ts85
-rw-r--r--catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.html16
-rw-r--r--catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.less69
-rw-r--r--catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.ts139
23 files changed, 1599 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts b/catalog-ui/app/scripts/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts
new file mode 100644
index 0000000000..9756ff9e49
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts
@@ -0,0 +1,66 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Directives {
+ 'use strict';
+ export interface IExpandCollapseMenuBoxDirectiveScope extends ng.IScope {
+ menuItemsGroup: Utils.MenuItemGroup;
+ menuTitle: string;
+ parentScope: ng.IScope;
+ onMenuItemClick(menuItem: Utils.MenuItem):void;
+ }
+
+ export class ExpandCollapseMenuBoxDirective implements ng.IDirective {
+
+ constructor(private $templateCache:ng.ITemplateCacheService) {
+ }
+
+ scope = {
+ menuTitle: '@',
+ menuItemsGroup: '=',
+ parentScope: '='
+ };
+
+ public replace = false;
+ public restrict = 'AE';
+ public transclude = true;
+
+ template = ():string => {
+ return this.$templateCache.get('/app/scripts/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html');
+ };
+
+ link = (scope:IExpandCollapseMenuBoxDirectiveScope, $elem:any) => {
+ scope.onMenuItemClick = (menuItem: Utils.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 = ($templateCache:ng.ITemplateCacheService)=> {
+ return new ExpandCollapseMenuBoxDirective($templateCache);
+ };
+
+ }
+
+ ExpandCollapseMenuBoxDirective.factory.$inject = ['$templateCache'];
+}
diff --git a/catalog-ui/app/scripts/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html b/catalog-ui/app/scripts/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html
new file mode 100644
index 0000000000..bbd7e59e7c
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html
@@ -0,0 +1,15 @@
+<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-menu-box-title-icon"></div>
+ <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="menuTitle" tooltips tooltip-content="{{menuTitle}}"></span>
+ </expand-collapse>
+
+ <div class="w-sdc-designer-sidebar-section-content" >
+ <div class="i-sdc-designer-sidebar-section-content-item expand-collapse-menu-box-item"
+ 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/app/scripts/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less b/catalog-ui/app/scripts/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less
new file mode 100644
index 0000000000..d8ceeaea71
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less
@@ -0,0 +1,55 @@
+.expand-collapse-menu-box {
+ line-height: 20px;
+ padding: 13px 0px 5px 10px;
+ background-color: @func_color_r;
+ margin: 3px 3px 5px 0px;
+
+
+ .expand-collapse-menu-box-title {
+ .f-type._18_m;
+ color: @main_color_m;
+ 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;
+ }
+
+ &.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;
+
+ }
+ .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;
+ }
+
+ }
+ }
+}
diff --git a/catalog-ui/app/scripts/directives/utils/expand-collapse/expand-collapse.html b/catalog-ui/app/scripts/directives/utils/expand-collapse/expand-collapse.html
new file mode 100644
index 0000000000..a2358ea2b7
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/expand-collapse/expand-collapse.html
@@ -0,0 +1 @@
+<ng-transclude></ng-transclude>
diff --git a/catalog-ui/app/scripts/directives/utils/expand-collapse/expand-collapse.less b/catalog-ui/app/scripts/directives/utils/expand-collapse/expand-collapse.less
new file mode 100644
index 0000000000..d0d8fa3251
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/expand-collapse/expand-collapse.less
@@ -0,0 +1,10 @@
+.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/app/scripts/directives/utils/expand-collapse/expand-collapse.ts b/catalog-ui/app/scripts/directives/utils/expand-collapse/expand-collapse.ts
new file mode 100644
index 0000000000..b294da6c13
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/expand-collapse/expand-collapse.ts
@@ -0,0 +1,136 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Directives {
+ '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(private $templateCache:ng.ITemplateCacheService) {
+ }
+
+ scope = {
+ expandedSelector: '@',
+ loadDataFunction: '&?',
+ isCloseOnInit: '=?'
+ };
+
+ public replace = false;
+ public restrict = 'AE';
+ public transclude = true;
+
+ template = ():string => {
+ return this.$templateCache.get('/app/scripts/directives/utils/expand-collapse/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();
+ });
+
+ 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 = ($templateCache:ng.ITemplateCacheService)=> {
+ return new ExpandCollapseDirective($templateCache);
+ };
+
+ }
+
+ ExpandCollapseDirective.factory.$inject = ['$templateCache'];
+}
diff --git a/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.html b/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.html
new file mode 100644
index 0000000000..4fbea447e2
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.html
@@ -0,0 +1,9 @@
+<div class="i-sdc-left-sidebar-page-nav">
+ <ul data-ng-class="{'expanded': expanded===true}">
+ <li data-ng-repeat="item in list | filter:exceptSelectedComparator"
+ data-ng-click="expanded=false"
+ class="sidebar-page-nav-item"
+ ui-sref="{{item.url}}">{{item.name}}</li>
+ </ul>
+ <div class="sidebar-page-nav-item-selected" data-ng-click="openCollapse()">{{selected}}<span data-ng-class="{'expanded': expanded===true}"></span></div>
+</div>
diff --git a/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.less b/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.less
new file mode 100644
index 0000000000..da70218263
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.less
@@ -0,0 +1,51 @@
+.i-sdc-left-sidebar-page-nav {
+
+ height: 64px;
+
+ .sidebar-page-nav-item-selected,
+ .sidebar-page-nav-item {
+ .i_11;
+ background-color: #e0e5e9;
+ width: 100%;
+ height: 64px;
+ border-bottom: solid 1px #cccccc;
+ line-height: 64px;
+ text-align: center;
+ cursor: pointer;
+ vertical-align: middle;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ .sidebar-page-nav-item-selected {
+ z-index: 1010;
+ position: absolute;
+ top: 0px;
+ }
+
+ .sidebar-page-nav-item-selected span {
+ .sprite;
+ .sprite.table-arrow;
+ position: absolute;
+ top: 28px;
+ margin-left: 10px;
+
+ &.expanded {
+ .sprite;
+ .sprite.table-arrow.opened;
+ top: 30px;
+ }
+ }
+
+ ul {
+ position: absolute;
+ top: 0px;
+ padding: 0;
+ width: 100%;
+ z-index: 99;
+ visibility: hidden; //Need this and not display none, so I can use the function: getComputedStyle
+ .box-shadow(0px 4px 2px -2px rgba(0, 0, 0, 0.36));
+ }
+
+}
diff --git a/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.ts b/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.ts
new file mode 100644
index 0000000000..c185fe1c15
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.ts
@@ -0,0 +1,106 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Directives {
+ 'use strict';
+
+ class ListItem {
+ name;
+ url;
+ }
+
+ export interface IPageSelectorScope extends ng.IScope {
+ selected:string;
+ expanded: boolean;
+ list:Array<ListItem>;
+ exceptSelectedComparator(actual, expected):boolean;
+ openCollapse();
+ }
+
+ export class PageSelectorDirective implements ng.IDirective {
+
+ constructor(private $templateCache:ng.ITemplateCacheService) {
+ }
+
+ scope = {
+ list: '=',
+ selected: '@',
+ };
+
+ public replace = true;
+ public restrict = 'E';
+ public transclude = false;
+
+ private ulElement:HTMLElement;
+ private itemHeight:number = 64;
+
+ private getUlHeight = ():number => {
+ let tmp:string = getComputedStyle(this.ulElement).height;
+ //console.log("tmp: " + tmp);
+ let ulHeight:number = parseInt(tmp.substr(0,tmp.length-2));
+ //console.log("ulHeight: " + ulHeight);
+ return ulHeight;
+ };
+
+ template = ():string => {
+ return this.$templateCache.get('/app/scripts/directives/utils/page-selector/page-selector.html');
+ };
+
+ link = (scope:IPageSelectorScope, $elem:any) => {
+ scope.expanded=false;
+
+ window.setTimeout(() => {
+ this.ulElement = angular.element(".i-sdc-left-sidebar-page-nav ul")[0];
+ console.log("this.ulElement: " + this.ulElement);
+ console.log("this.itemHeight: " + this.itemHeight);
+ this.ulElement.style.top = (this.itemHeight - this.getUlHeight() - 5) + 'px';
+ this.ulElement.style.visibility = 'visible';
+ },10);
+
+ this.ulElement = angular.element(".i-sdc-left-sidebar-page-nav ul")[0];
+
+ scope.exceptSelectedComparator = (actual) => {
+ if (actual.name===scope.selected) {
+ return false;
+ }
+ return true;
+ };
+
+ scope.openCollapse = ():void => {
+ scope.expanded=!scope.expanded;
+ if (scope.expanded===true) {
+ this.ulElement.style.transition = 'top 0.4s ease-out';
+ this.ulElement.style.top = this.itemHeight + 'px';
+ } else {
+ this.ulElement.style.transition = 'top 0.4s ease-in';
+ this.ulElement.style.top = (this.itemHeight - this.getUlHeight() - 5) + 'px';
+ }
+ };
+
+ };
+
+ public static factory = ($templateCache:ng.ITemplateCacheService)=> {
+ return new PageSelectorDirective($templateCache);
+ };
+
+ }
+
+ PageSelectorDirective.factory.$inject = ['$templateCache'];
+}
diff --git a/catalog-ui/app/scripts/directives/utils/sdc-keyboard-events/sdc-keyboard-events.ts b/catalog-ui/app/scripts/directives/utils/sdc-keyboard-events/sdc-keyboard-events.ts
new file mode 100644
index 0000000000..9e61caa812
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/sdc-keyboard-events/sdc-keyboard-events.ts
@@ -0,0 +1,106 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Directives {
+ '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/app/scripts/directives/utils/sdc-tags/sdc-tags.html b/catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.html
new file mode 100644
index 0000000000..fb1ada69c3
--- /dev/null
+++ b/catalog-ui/app/scripts/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/app/scripts/directives/utils/sdc-tags/sdc-tags.less b/catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.less
new file mode 100644
index 0000000000..942196e663
--- /dev/null
+++ b/catalog-ui/app/scripts/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/app/scripts/directives/utils/sdc-tags/sdc-tags.ts b/catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.ts
new file mode 100644
index 0000000000..3f4147c920
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.ts
@@ -0,0 +1,97 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Directives {
+ '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(private $templateCache:ng.ITemplateCacheService) {
+ }
+
+ scope = {
+ tags: '=',
+ specialTag: '=',
+ pattern: '=',
+ sdcDisabled: '=',
+ formElement: '=',
+ elementName: '@',
+ maxTags: '@'
+ };
+
+ public replace = false;
+ public restrict = 'E';
+ public transclude = false;
+
+ template = ():string => {
+ return this.$templateCache.get('/app/scripts/directives/utils/sdc-tags/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 = ($templateCache:ng.ITemplateCacheService)=> {
+ return new SdcTagsDirective($templateCache);
+ };
+
+ }
+
+ SdcTagsDirective.factory.$inject = ['$templateCache'];
+}
diff --git a/catalog-ui/app/scripts/directives/utils/sdc_error_tooltip/sdc_error_tooltip.html b/catalog-ui/app/scripts/directives/utils/sdc_error_tooltip/sdc_error_tooltip.html
new file mode 100644
index 0000000000..376381b8af
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/sdc_error_tooltip/sdc_error_tooltip.html
@@ -0,0 +1,6 @@
+<div class="i-sdc-form-item-error-message" style="display: none;">
+ <span class="i-sdc-form-item-error-icon-open"></span>
+ <ng-transclude>
+
+ </ng-transclude>
+</div>
diff --git a/catalog-ui/app/scripts/directives/utils/sdc_error_tooltip/sdc_error_tooltip.ts b/catalog-ui/app/scripts/directives/utils/sdc_error_tooltip/sdc_error_tooltip.ts
new file mode 100644
index 0000000000..dc30ea7f41
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/sdc_error_tooltip/sdc_error_tooltip.ts
@@ -0,0 +1,109 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Directives {
+ 'use strict';
+
+ export interface ISdcErrorTooltipScope extends ng.IScope {
+ alignToSelector: string;
+ topMargin: string;
+ }
+
+ export class SdcErrorTooltipDirective implements ng.IDirective {
+
+ constructor(private $templateCache:ng.ITemplateCacheService) {
+ }
+
+ scope = {
+ alignToSelector: '@', // Jquery selector to align to
+ topMargin: '@' // The margin from the top, in case there is label or not the top margin is different.
+ };
+
+ public replace = false;
+ public restrict = 'E';
+ public transclude = true;
+
+ template = ():string => {
+ return this.$templateCache.get('/app/scripts/directives/utils/sdc_error_tooltip/sdc_error_tooltip.html');
+ };
+
+ link = (scope:ISdcErrorTooltipScope, $elem:any) => {
+ let _self = this;
+
+ $elem.addClass("i-sdc-form-item-error-icon");
+
+ // Calculate the position of the elements after they loaded to the dom.
+ window.setTimeout(function(){
+ _self.calculatePosition(scope, $elem);
+ },100);
+
+ $elem.bind('mouseover', function(){
+ $(".i-sdc-form-item-error-message",$elem).css("display", "block");
+ });
+
+ $elem.bind('mouseleave', function(){
+ $(".i-sdc-form-item-error-message",$elem).css("display", "none");
+ });
+
+ }
+
+ private calculatePosition(scope:ISdcErrorTooltipScope, $elem:any):void {
+ let leftMargin = 13;
+ let topMargin = scope.topMargin? parseInt(scope.topMargin) : 10;
+
+ if (scope.alignToSelector) {
+ // Set the position of the error, in case user add align-to-selector attribute
+ let jObj = $(scope.alignToSelector);
+ if (jObj.length > 0) {
+ let height1 = jObj.outerHeight();
+ $elem.css('left', jObj.position().left + jObj.outerWidth() + leftMargin);
+ //$elem.css('top', jObj.position().top + topMargin + (height1 / 2));
+ $elem.css('top', jObj.position().top + (height1 / 2) - 5); // Label margin is: 2
+ }
+ } else {
+ // Set the position of the error, according to the input element.
+ let inputElm = $elem.siblings('input');
+ let textareaElm = $elem.siblings('textarea');
+ let selectElm = $elem.siblings('select');
+ if (inputElm.length > 0) {
+ $elem.css('left', inputElm.outerWidth() + leftMargin);
+ $elem.css('top', inputElm.position().top + topMargin);
+ } else if (textareaElm.length > 0) {
+ $elem.css('left', textareaElm.outerWidth() + leftMargin);
+ let height2 = textareaElm.outerHeight();
+ let elmHeight2 = $elem.outerHeight();
+ //let top = textareaElm.position().top;
+ $elem.css('bottom', (height2 - (elmHeight2 / 2)) / 2);
+ } else if (selectElm.length > 0) {
+ $elem.css('left', selectElm.outerWidth() + leftMargin);
+ $elem.css('top', selectElm.position().top + topMargin);
+ }
+ }
+ }
+
+ public static factory = ($templateCache:ng.ITemplateCacheService)=> {
+ return new SdcErrorTooltipDirective($templateCache);
+ };
+
+ }
+
+ SdcErrorTooltipDirective.factory.$inject = ['$templateCache'];
+
+}
diff --git a/catalog-ui/app/scripts/directives/utils/sdc_messages/sdc-message.ts b/catalog-ui/app/scripts/directives/utils/sdc_messages/sdc-message.ts
new file mode 100644
index 0000000000..d41ef1ce04
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/sdc_messages/sdc-message.ts
@@ -0,0 +1,179 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Directives {
+ 'use strict';
+ export interface ISdcMessageScope extends ng.IScope {
+ sdcTranslate: string;
+ sdcTranslateValues:string;
+ sdcAlign:string;
+ }
+
+ export class SdcMessageDirective implements ng.IDirective {
+
+ constructor(private $animate:any, private $filter:any, private $parse:any) {
+ }
+
+ scope = {
+ field: '=',
+ required: '@',
+ pattern: '@',
+ sdcTranslate: '@',
+ sdcTranslateValues: '@',
+ sdcAlign: '@'
+ };
+
+ public terminal = true;
+ public restrict = 'A';
+ public transclude = 'element';
+ public require = '^^sdcMessages';
+
+ link = (scope:ISdcMessageScope, $element:any, $attrs:any,sdcMessagesCtrl:any, $transclude:any) => {
+ let self = this;
+
+ let commentNode = $element[0];
+
+ let records;
+ let staticExp = $attrs.sdcMessage || $attrs.when;
+ let dynamicExp = $attrs.sdcMessageExp || $attrs.whenExp;
+ let assignRecords = function(items) {
+ records = items
+ ? (angular.isArray(items)
+ ? items
+ : items.split(/[\s,]+/))
+ : null;
+ sdcMessagesCtrl.reRender();
+ };
+
+ if (dynamicExp) {
+ assignRecords(scope.$eval(dynamicExp));
+ scope.$watchCollection(dynamicExp, assignRecords);
+ } else {
+ assignRecords(staticExp);
+ }
+
+ let currentElement, messageCtrl;
+ sdcMessagesCtrl.register(commentNode, messageCtrl = {
+ test: function (name) {
+ return self.contains(records, name);
+ },
+ attach: function () {
+ if (!currentElement) {
+ $transclude(scope, function (elm) {
+
+ self.$animate.enter(elm, null, $element);
+ currentElement = elm;
+
+ elm.addClass("i-sdc-form-item-error-message");
+
+ //$compile
+ let text;
+ if (scope.sdcTranslate) {
+ text = self.$filter('translate')(scope.sdcTranslate, scope.sdcTranslateValues);
+ } else {
+ //TODO: Need to handle this
+ //let t = elm.html();
+ //let t = angular.element("<span>" + elm.html() + "</span>");
+ //text = self.$parse(t);
+ }
+
+ //scope.sdcTranslateValues
+ elm.html(text);
+
+ elm.prepend("<span class='error'></span>");
+
+ // Adding OK to close the message
+ //let okElm = $('<span />').attr('class', 'ok').html('OK');
+ //okElm.click(function(e){
+ // messageCtrl.detach();
+ //});
+ //elm.append(okElm);
+
+ // Handle the position
+ if (scope.sdcAlign){
+ let choosenElm = $(scope.sdcAlign);
+ if (choosenElm.length > 0) {
+ let height1 = choosenElm.outerHeight();
+ let elmHeight1 = elm.outerHeight();
+ elm.css('left', choosenElm.outerWidth());
+ elm.css('bottom', (height1 - (elmHeight1 / 2)) / 2);
+ }
+ } else {
+ // Set the position of the error, according to the input element.
+ let inputElm = elm.parent().siblings('input');
+ let textareaElm = elm.parent().siblings('textarea');
+ let selectElm = elm.parent().siblings('select');
+ if (inputElm.length > 0) {
+ elm.css('left', inputElm.outerWidth());
+ elm.css('top', inputElm.position().top);
+ } else if (textareaElm.length > 0) {
+ elm.css('left', textareaElm.outerWidth());
+ let height = textareaElm.outerHeight();
+ let elmHeight = elm.outerHeight();
+ //let top = textareaElm.position().top;
+ elm.css('bottom', (height - (elmHeight / 2)) / 2);
+ } else if (selectElm.length > 0) {
+ elm.css('left', selectElm.outerWidth());
+ elm.css('top', selectElm.position().top);
+ }
+ }
+
+ // Each time we attach this node to a message we get a new id that we can match
+ // when we are destroying the node later.
+ let $$attachId = currentElement.$$attachId = sdcMessagesCtrl.getAttachId();
+
+ // in the event that the parent element is destroyed
+ // by any other structural directive then it's time
+ // to deregister the message from the controller
+ currentElement.on('$destroy', function () {
+ if (currentElement && currentElement.$$attachId === $$attachId) {
+ sdcMessagesCtrl.deregister(commentNode);
+ messageCtrl.detach();
+ }
+ });
+ });
+ }
+ },
+ detach: function () {
+ if (currentElement) {
+ let elm = currentElement;
+ currentElement = null;
+ self.$animate.leave(elm);
+ }
+ }
+ });
+ }
+
+ contains = (collection, key):any => {
+ if (collection) {
+ return angular.isArray(collection)
+ ? collection.indexOf(key) >= 0
+ : collection.hasOwnProperty(key);
+ }
+ }
+
+ public static factory = ($animate:any, $filter:any, $parse:any)=> {
+ return new SdcMessageDirective($animate, $filter, $parse);
+ };
+
+ }
+
+ SdcMessageDirective.factory.$inject = ['$animate', '$filter', '$parse'];
+}
diff --git a/catalog-ui/app/scripts/directives/utils/sdc_messages/sdc-messages.less b/catalog-ui/app/scripts/directives/utils/sdc_messages/sdc-messages.less
new file mode 100644
index 0000000000..d8dfdbb73b
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/sdc_messages/sdc-messages.less
@@ -0,0 +1,10 @@
+.ellipsis-directive-more-less {
+ .a_9;
+ .bold;
+ .hand;
+ float: right;
+ margin-right: 17px;
+ line-height: 23px;
+ text-decoration: underline;
+ text-align: left;
+}
diff --git a/catalog-ui/app/scripts/directives/utils/sdc_messages/sdc-messages.ts b/catalog-ui/app/scripts/directives/utils/sdc_messages/sdc-messages.ts
new file mode 100644
index 0000000000..f8b435b1fa
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/sdc_messages/sdc-messages.ts
@@ -0,0 +1,245 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Directives {
+ 'use strict';
+ export interface ISdcMessagesScope extends ng.IScope {
+ sdcMessages: any;
+ editForm:ng.IFormController;
+ }
+
+ export class SdcMessagesDirective implements ng.IDirective {
+
+ constructor() {}
+
+ scope = {
+ sdcMessages: '='
+ };
+
+ public restrict = 'AE';
+ public require = 'sdcMessages';
+ public controller = SdcMessagesController;
+
+ /*template = ():string => {
+ return this.$templateCache.get('/app/scripts/directives/utils/sdc-messages/sdc-messages.html');
+ };
+
+ public static factory = ($templateCache:ng.ITemplateCacheService)=> {
+ return new SdcMessagesDirective($templateCache);
+ };*/
+
+ public static factory = ()=> {
+ return new SdcMessagesDirective();
+ }
+
+ }
+
+ export class SdcMessagesController {
+
+ messages:any;
+ getAttachId:Function;
+ render:any;
+ reRender:Function;
+ register:Function;
+ deregister:Function;
+ head:any;
+
+ static '$inject' = [
+ '$element',
+ '$scope',
+ '$attrs',
+ '$animate'
+ ];
+
+ constructor(private $element:JQuery,
+ private $scope:ISdcMessagesScope,
+ private $attrs:ng.IAttributes,
+ private $animate:any
+ ) {
+
+ this.init();
+
+ }
+
+ init=():void => {
+ let self = this;
+
+ let ACTIVE_CLASS:string = 'ng-active';
+ let INACTIVE_CLASS:string = 'ng-inactive';
+
+ let ctrl = this;
+ let latestKey = 0;
+ let nextAttachId = 0;
+
+ this.getAttachId = function getAttachId() { return nextAttachId++; };
+
+ let messages = this.messages = {};
+ let renderLater, cachedCollection;
+
+ this.render = function(collection) {
+ collection = collection || {};
+
+ renderLater = false;
+ cachedCollection = collection;
+
+ // this is true if the attribute is empty or if the attribute value is truthy
+ let multiple = self.isAttrTruthy(self.$scope, self.$attrs['sdcMessagesMultiple']) || self.isAttrTruthy(self.$scope, self.$attrs['multiple']);
+
+ let unmatchedMessages = [];
+ let matchedKeys = {};
+ let messageItem = ctrl.head;
+ let messageFound = false;
+ let totalMessages = 0;
+
+ // we use != instead of !== to allow for both undefined and null values
+ while (messageItem != null) {
+ totalMessages++;
+ let messageCtrl = messageItem.message;
+
+ let messageUsed = false;
+ if (!messageFound) {
+ _.each(collection, function(value, key) {
+ if (!messageUsed && self.truthy(value) && messageCtrl.test(key)) {
+ // this is to prevent the same error name from showing up twice
+ if (matchedKeys[key]) return;
+ matchedKeys[key] = true;
+
+ messageUsed = true;
+ messageCtrl.attach();
+ }
+ });
+ }
+
+ if (messageUsed) {
+ // unless we want to display multiple messages then we should
+ // set a flag here to avoid displaying the next message in the list
+ messageFound = !multiple;
+ } else {
+ unmatchedMessages.push(messageCtrl);
+ }
+
+ messageItem = messageItem.next;
+ }
+
+ _.each(unmatchedMessages, function(messageCtrl) {
+ messageCtrl.detach();
+ });
+
+ unmatchedMessages.length !== totalMessages
+ ? ctrl.$animate.setClass(self.$element, ACTIVE_CLASS, INACTIVE_CLASS)
+ : ctrl.$animate.setClass(self.$element, INACTIVE_CLASS, ACTIVE_CLASS);
+ };
+
+ self.$scope.$watchCollection('sdcMessages' || self.$attrs['for'], function(newVal:any, oldVal:any){
+ ctrl.render(newVal);
+ });
+
+ this.reRender = function() {
+ if (!renderLater) {
+ renderLater = true;
+ self.$scope.$evalAsync(function() {
+ if (renderLater) {
+ cachedCollection && ctrl.render(cachedCollection);
+ }
+ });
+ }
+ };
+
+ this.register = function(comment, messageCtrl) {
+ let nextKey = latestKey.toString();
+ messages[nextKey] = {
+ message: messageCtrl
+ };
+ insertMessageNode(self.$element[0], comment, nextKey);
+ comment.$$sdcMessageNode = nextKey;
+ latestKey++;
+
+ ctrl.reRender();
+ };
+
+ this.deregister = function(comment) {
+ let key = comment.$$sdcMessageNode;
+ delete comment.$$sdcMessageNode;
+ removeMessageNode(self.$element[0], comment, key);
+ delete messages[key];
+ ctrl.reRender();
+ };
+
+ function findPreviousMessage(parent, comment) {
+ let prevNode = comment;
+ let parentLookup = [];
+ while (prevNode && prevNode !== parent) {
+ let prevKey = prevNode.$$sdcMessageNode;
+ if (prevKey && prevKey.length) {
+ return messages[prevKey];
+ }
+
+ // dive deeper into the DOM and examine its children for any sdcMessage
+ // comments that may be in an element that appears deeper in the list
+ if (prevNode.childNodes.length && parentLookup.indexOf(prevNode) == -1) {
+ parentLookup.push(prevNode);
+ prevNode = prevNode.childNodes[prevNode.childNodes.length - 1];
+ } else {
+ prevNode = prevNode.previousSibling || prevNode.parentNode;
+ }
+ }
+ }
+
+ function insertMessageNode(parent, comment, key) {
+ let messageNode = messages[key];
+ if (!ctrl.head) {
+ ctrl.head = messageNode;
+ } else {
+ let match = findPreviousMessage(parent, comment);
+ if (match) {
+ messageNode.next = match.next;
+ match.next = messageNode;
+ } else {
+ messageNode.next = ctrl.head;
+ ctrl.head = messageNode;
+ }
+ }
+ }
+
+ function removeMessageNode(parent, comment, key) {
+ let messageNode = messages[key];
+
+ let match = findPreviousMessage(parent, comment);
+ if (match) {
+ match.next = messageNode.next;
+ } else {
+ ctrl.head = messageNode.next;
+ }
+ }
+ }
+
+ isAttrTruthy = (scope, attr):any => {
+ return (angular.isString(attr) && attr.length === 0) || //empty attribute
+ this.truthy(scope.$eval(attr));
+ }
+
+ truthy = (val):any => {
+ return angular.isString(val) ? val.length : !!val;
+ }
+
+ }
+
+ SdcMessagesDirective.factory.$inject = ['$templateCache','$animate'];
+}
diff --git a/catalog-ui/app/scripts/directives/utils/sdc_messages/sdc_messages.html b/catalog-ui/app/scripts/directives/utils/sdc_messages/sdc_messages.html
new file mode 100644
index 0000000000..09b1cad4d2
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/sdc_messages/sdc_messages.html
@@ -0,0 +1 @@
+<span>aaa</span>
diff --git a/catalog-ui/app/scripts/directives/utils/smart-tooltip/smart-tooltip.ts b/catalog-ui/app/scripts/directives/utils/smart-tooltip/smart-tooltip.ts
new file mode 100644
index 0000000000..49a57245e7
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/smart-tooltip/smart-tooltip.ts
@@ -0,0 +1,85 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Directives {
+ 'use strict';
+
+ export interface ISmartTooltipScope extends ng.IScope {
+ sdcSmartToolip;
+ }
+
+ export class SmartTooltipDirective implements ng.IDirective {
+
+ constructor(private $templateCache:ng.ITemplateCacheService,
+ 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 = ($templateCache:ng.ITemplateCacheService, $compile:ng.ICompileService)=> {
+ return new SmartTooltipDirective($templateCache, $compile);
+ };
+
+ }
+
+ SmartTooltipDirective.factory.$inject = ['$templateCache', '$compile'];
+}
diff --git a/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.html b/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.html
new file mode 100644
index 0000000000..0c9b97a58c
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.html
@@ -0,0 +1,16 @@
+<ul class="sdc-wizard-step">
+ <li class="step" data-ng-repeat="step in steps track by $index">
+ <div class="step-wrapper">
+ <button class="step-index"
+ data-ng-click="controllerStepClicked(step.name)"
+ data-ng-class="{'selected': step.selected===true, 'valid': step.valid===true, 'disabled': !step.enabled || step.enabled===false}">
+ {{$index+1}}
+ </button>
+ <span class="step-name"
+ data-ng-class="{'selected': step.selected===true, 'valid': step.valid===true, 'disabled': !step.enabled || step.enabled===false}">{{step.name}}
+ </span>
+ </div>
+ <div class="step-seperator"></div>
+ </li>
+</ul>
+
diff --git a/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.less b/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.less
new file mode 100644
index 0000000000..8b777923a0
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.less
@@ -0,0 +1,69 @@
+@circle-radius: 18px;
+@gap: 70px;
+@gap-width: 2px;
+@valid-width: 2px;
+
+ul.sdc-wizard-step {
+ padding: 0;
+ margin: 0;
+
+ li.step {
+ position: relative;
+ list-style: none;
+
+ .step-wrapper {
+ line-height: @circle-radius*2;
+ height: @circle-radius*2;
+ margin-bottom: @gap;
+
+ button.step-index {
+ ._w-sdc-wizard-step-btn(@circle-radius);
+ z-index: 99;
+ display: inline-block;
+
+ &.valid {
+ display: inline-block;
+ }
+
+ }
+
+ span.step-name {
+ .b_7;
+ line-height: @circle-radius;
+ display: inline-block;
+ word-wrap: break-word;
+ width: calc(~"100%" - @circle-radius*2 + 4);
+ vertical-align: middle;
+ padding-left: 10px;
+ white-space: normal;
+
+ &.selected {
+ .a_7;
+ font-weight: bold;
+ }
+
+ &.disabled {
+ border: none;
+ background-color: transparent;
+ }
+
+ }
+ }
+
+ .step-seperator {
+ border-right: @gap-width solid @color_n;
+ height: @gap + @circle-radius*2;
+ position: absolute;
+ top: @circle-radius*2-@circle-radius;
+ left: @circle-radius - @gap-width/2;
+ }
+
+ }
+
+ li.step:last-child {
+ .step-seperator {
+ display: none;
+ }
+ }
+
+}
diff --git a/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.ts b/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.ts
new file mode 100644
index 0000000000..9cad36ab78
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.ts
@@ -0,0 +1,139 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Directives {
+
+ 'use strict';
+
+ export interface IWizardStep {
+ name: string;
+ selected?: boolean;
+ valid?:boolean;
+ enabled?:boolean;
+ callback: Function;
+ }
+
+ export interface ISdcWizardStepScope extends ng.IScope {
+ steps:Array<IWizardStep>;
+ control:any;
+ internalControl:any;
+
+ stepClicked(stepName:string):void;
+ controllerStepClicked(stepName:string):void;
+
+ setStepValidity(stepName:string, valid:boolean):void;
+ controllerSetStepValidity(step:IWizardStep, valid:boolean):void;
+ }
+
+ export interface SdcWizardStepMethods {
+ unSelectAllSteps():void;
+ selectStep(step:IWizardStep):void;
+ }
+
+ export class SdcWizardStepDirective implements ng.IDirective {
+
+ constructor(private $templateCache:ng.ITemplateCacheService) {
+ }
+
+ scope = {
+ steps: '=',
+ control: '='
+ };
+
+ public replace = false;
+ public restrict = 'E';
+ public transclude = true;
+ public controller = SdcWizardStepDirectiveController;
+
+ template = ():string => {
+ return this.$templateCache.get('/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.html');
+ };
+
+ link = (scope:ISdcWizardStepScope, $elem:JQuery, attr:any, controller:SdcWizardStepDirectiveController) => {
+ scope.internalControl = scope.control || {};
+ scope.internalControl.stepClicked = (step:string):void => {
+ scope.controllerStepClicked(step);
+ };
+
+ scope.internalControl.setStepValidity = (step:IWizardStep, valid:boolean):void => {
+ scope.controllerSetStepValidity(step, valid);
+ };
+ }
+
+ public static factory = ($templateCache:ng.ITemplateCacheService)=> {
+ return new SdcWizardStepDirective($templateCache);
+ };
+
+ }
+
+ SdcWizardStepDirective.factory.$inject = ['$templateCache'];
+
+ export class SdcWizardStepDirectiveController {
+ static $inject = ['$element', '$scope'];
+
+ methods:SdcWizardStepMethods = <SdcWizardStepMethods>{};
+
+ constructor(public $element: JQuery,
+ public $scope: ISdcWizardStepScope) {
+
+ this.initMethods();
+ this.initScope();
+ }
+
+ private initScope = ():void => {
+
+ this.$scope.controllerStepClicked = (stepName:string):void => {
+ let selectedStep:IWizardStep = <IWizardStep>_.find(this.$scope.steps, function (item) {
+ return item.name === stepName;
+ });
+
+ if (selectedStep && selectedStep.enabled===true){
+ let result:boolean = selectedStep.callback();
+ if (result===true){
+ this.methods.unSelectAllSteps();
+ this.methods.selectStep(selectedStep);
+ }
+ }
+ };
+
+ this.$scope.controllerSetStepValidity = (step:IWizardStep, valid:boolean):void => {
+ step.valid=valid;
+ };
+
+ };
+
+ private initMethods = ():void => {
+
+ this.methods.unSelectAllSteps = ():void => {
+ this.$scope.steps.forEach(function (step) {
+ step.selected = false;
+ });
+ }
+
+ this.methods.selectStep = (step:IWizardStep):void => {
+ if (step.enabled===true){
+ step.selected=true;
+ }
+ }
+ };
+
+ }
+
+}