3 files changed, 131 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/modal/sdc-modal.html b/catalog-ui/app/scripts/directives/modal/sdc-modal.html
new file mode 100644
index 0000000000..a8419f162d
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/modal/sdc-modal.html
@@ -0,0 +1,18 @@
+<div data-ng-class="{'w-sdc-modal': type===undefined, 'w-sdc-classic-modal': type==='classic'}">
+    <div class="w-sdc-modal-head">
+        <span data-ng-if="header" class="w-sdc-modal-head-text">{{header}}</span>
+        <span data-ng-if="headerTranslate" class="w-sdc-modal-head-text" translate="{{headerTranslate}}" translate-values="{{headerTranslateValues}}"></span>
+        <div data-ng-if="showCloseButton==='true'" class="w-sdc-modal-close" data-ng-click="cancel()"></div>
+    </div>
+    <div class="w-sdc-modal-body" data-ng-class="{'classic': type==='classic'}">
+        <ng-transclude></ng-transclude>
+    </div>
+    <div class="w-sdc-modal-footer" data-ng-if="type==='classic' && buttons!==undefined">
+        <button data-ng-repeat="button in buttons"
+                data-tests-id="{{button.name}}"
+                class="tlv-btn {{button.css}}"
+                data-ng-class="{'disabled': button.disabled===true}"
+                data-ng-disabled="button.disabled===true"
+                data-ng-click="button.callback()">{{button.name}}</button>
+    </div>
+</div>
diff --git a/catalog-ui/app/scripts/directives/modal/sdc-modal.less b/catalog-ui/app/scripts/directives/modal/sdc-modal.less
new file mode 100644
index 0000000000..d8dfdbb73b
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/modal/sdc-modal.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/modal/sdc-modal.ts b/catalog-ui/app/scripts/directives/modal/sdc-modal.ts
new file mode 100644
index 0000000000..338035c9f1
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/modal/sdc-modal.ts
@@ -0,0 +1,103 @@
+/*-
+ * ============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 ISdcModalScope extends ng.IScope {
+        modal:ng.ui.bootstrap.IModalServiceInstance;
+        hideBackground:string;
+        ok():void;
+        close(result:any):void;
+        cancel(reason:any):void;
+    }
+
+    export interface ISdcModalButton {
+        name:string;
+        css:string;
+        disabled?:boolean;
+        callback:Function;
+    }
+
+    export class SdcModalDirective implements ng.IDirective {
+
+        constructor(
+            private $templateCache: ng.ITemplateCacheService
+        ) {}
+
+        scope = {
+            modal: '=',
+            type: '@',
+            header: '@',
+            headerTranslate: '@',
+            headerTranslateValues: '@',
+            showCloseButton: '@',
+            hideBackground: '@',
+            buttons: '=',
+            getCloseModalResponse: '='
+        };
+
+        public replace = true;
+        public restrict = 'E';
+        public transclude = true;
+
+        template = (): string => {
+            return this.$templateCache.get('/app/scripts/directives/modal/sdc-modal.html');
+        };
+
+        link = (scope:ISdcModalScope, $elem:any) => {
+
+            if (scope.hideBackground==="true"){
+                $(".modal-backdrop").css('opacity','0');
+            }
+
+            scope.close = function (result:any) {
+                scope.modal.close(result);
+            };
+
+            scope.ok = function () {
+                scope.modal.close();
+            };
+
+            scope.cancel = function (reason:any) {
+                if(this.getCloseModalResponse)
+                     scope.modal.dismiss(this.getCloseModalResponse());
+                else {
+                    scope.modal.dismiss();
+                }
+            };
+
+            if (scope.modal) {
+                scope.modal.result.then(function (selectedItem) {
+                    //$scope.selected = selectedItem;
+                }, function () {
+                    //console.info('Modal dismissed at: ' + new Date());
+                });
+            }
+        }
+
+        public static factory = ($templateCache: ng.ITemplateCacheService)=> {
+            return new SdcModalDirective($templateCache);
+        };
+
+    }
+
+    SdcModalDirective.factory.$inject = ['$templateCache'];
+}