3 files changed, 108 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/modal/sdc-modal.html b/catalog-ui/src/app/directives/modal/sdc-modal.html
new file mode 100644
index 0000000000..a8419f162d
--- /dev/null
+++ b/catalog-ui/src/app/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/src/app/directives/modal/sdc-modal.less b/catalog-ui/src/app/directives/modal/sdc-modal.less
new file mode 100644
index 0000000000..d8dfdbb73b
--- /dev/null
+++ b/catalog-ui/src/app/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/src/app/directives/modal/sdc-modal.ts b/catalog-ui/src/app/directives/modal/sdc-modal.ts
new file mode 100644
index 0000000000..aedc28262f
--- /dev/null
+++ b/catalog-ui/src/app/directives/modal/sdc-modal.ts
@@ -0,0 +1,80 @@
+'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() {
+    }
+
+    scope = {
+        modal: '=',
+        type: '@',
+        header: '@',
+        headerTranslate: '@',
+        headerTranslateValues: '@',
+        showCloseButton: '@',
+        hideBackground: '@',
+        buttons: '=',
+        getCloseModalResponse: '='
+    };
+
+    public replace = true;
+    public restrict = 'E';
+    public transclude = true;
+
+    template = ():string => {
+        return require('./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 = ()=> {
+        return new SdcModalDirective();
+    };
+
+}
+
+SdcModalDirective.factory.$inject = [];