init commit onap ui

Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>

8 files changed, 479 insertions, 0 deletions

diff --git a/src/angular/modals/modal-button.component.ts b/src/angular/modals/modal-button.component.ts
new file mode 100644
index 0000000..4fa5b7c
--- /dev/null
+++ b/src/angular/modals/modal-button.component.ts
@@ -0,0 +1,29 @@
+import { Component, Input, HostListener } from "@angular/core";
+import { ButtonComponent } from "../buttons/button.component";
+import { ModalService } from "./modal.service";
+import template from "./../buttons/button.component.html";
+
+@Component({
+    selector: "sdc-modal-button",
+    template: template
+})
+export class ModalButtonComponent extends ButtonComponent {
+
+    @Input() public id?: string;
+    @Input() public callback: Function;
+    @Input() public closeModal: boolean;
+    @HostListener('click') invokeCallback = (): void => {
+        if (this.callback) {
+            this.callback();
+        }
+        if (this.closeModal) {
+            this.modalService.closeModal();
+        }
+    }
+
+    constructor(private modalService: ModalService) {
+        super();
+        this.closeModal = false;
+    }
+
+}
diff --git a/src/angular/modals/modal-close-button.component.ts b/src/angular/modals/modal-close-button.component.ts
new file mode 100644
index 0000000..e761019
--- /dev/null
+++ b/src/angular/modals/modal-close-button.component.ts
@@ -0,0 +1,34 @@
+import { Component, Input } from "@angular/core";
+import { ButtonComponent } from "../buttons/button.component";
+import { ModalService } from "./modal.service";
+import { RippleAnimationAction } from "../animations/ripple-click.animation.directive";
+
+@Component({
+    selector: "sdc-modal-close-button",
+    template: `
+    <div class="sdc-modal__close-button"
+        SdcRippleClickAnimation
+        [ngClass]="disabled ? 'disabled' : ''"
+        [rippleOnAction]="!disabled && rippleAnimationAction"
+        [attr.data-tests-id]="testId"
+        (click)="!disabled && closeModal()"
+        >
+        <svg-icon name="close" [mode]="disabled? 'secondary' : 'info'" size="small"></svg-icon>
+    </div>
+    `
+})
+export class ModalCloseButtonComponent {
+
+    @Input() testId: string;
+    @Input() disabled: boolean;
+
+    public rippleAnimationAction: RippleAnimationAction = RippleAnimationAction.MOUSE_ENTER;
+
+    constructor(private modalService: ModalService) {
+    }
+
+    public closeModal = (): void => {
+        this.modalService.closeModal();
+    }
+
+}
diff --git a/src/angular/modals/modal.component.html.ts b/src/angular/modals/modal.component.html.ts
new file mode 100644
index 0000000..90119ac
--- /dev/null
+++ b/src/angular/modals/modal.component.html.ts
@@ -0,0 +1,38 @@
+export default `
+<div class="sdc-modal {{size}}">
+    <div class="sdc-modal__wrapper sdc-modal-type-{{type}}" [@toggleModal]="modalVisible" (@toggleModal.done)="modalToggled($event)">
+
+        <div class="sdc-modal__header sdc-{{type}}__header">
+            <div class="sdc-modal__icon" *ngIf="type != 'custom'">
+                <div *ngIf="type == 'alert'"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 24 24"><defs><path fill="#000" id="alert-a" d="M20.5815,18.7997 C20.3815,18.9997 20.0815,19.0997 19.8815,19.0997 L2.8815,19.0997 C2.6815,19.0997 2.5815,19.0997 2.3815,18.9997 C1.8815,18.6997 1.7815,18.0997 1.9815,17.5997 L10.4815,3.4997 C10.5815,3.4007 10.6815,3.1997 10.7815,3.1997 C11.2815,2.9007 11.8815,3.0997 12.1815,3.4997 L20.6825,17.5997 C20.7815,17.6997 20.7815,17.9007 20.7815,18.0997 C20.8815,18.4007 20.6825,18.5997 20.5815,18.7997 M22.3815,16.5997 L13.9815,2.4007 C13.5815,1.6997 12.8815,1.1997 12.0815,0.9997 C11.2815,0.7997 10.4815,0.9007 9.7815,1.2997 C9.3815,1.4997 8.9815,1.9007 8.7815,2.2997 L0.3815,16.5997 C-0.4185,17.9997 0.0815,19.9007 1.4815,20.6997 C1.8815,20.9997 2.3815,21.0997 2.8815,21.0997 L19.8815,21.0997 C20.6825,21.0997 21.4815,20.7997 21.9815,20.1997 C22.5815,19.5997 22.8815,18.9007 22.8815,18.0997 C22.7815,17.5997 22.6825,16.9997 22.3815,16.5997 M11,7 C10.4,7 10,7.4 10,8 L10,12 C10,12.601 10.4,13 11,13 C11.6,13 12,12.601 12,12 L12,8 C12,7.4 11.6,7 11,7 M10.3,15.3 C10.1,15.499 10,15.699 10,15.999 C10,16.3 10.1,16.499 10.3,16.699 C10.5,16.9 10.7,16.999 11,16.999 C11.3,16.999 11.5,16.9 11.7,16.699 C11.9,16.499 12,16.199 12,15.999 C12,15.8 11.9,15.499 11.7,15.3 C11.3,14.9 10.7,14.9 10.3,15.3"/></defs>
+                    <g fill="none" fill-rule="evenodd" transform="translate(1 1)"><use class="sdc-modal__svg-use" xlink:href="#alert-a"/></g></svg></div>
+                <div *ngIf="type == 'info'"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 24 24"><defs><path fill="#000" id="info-a" d="M11,20 C6,20 2,16 2,11 C2,6 6,2 11,2 C16,2 20,6 20,11 C20,16 16,20 11,20 M11,0 C4.9,0 0,4.9 0,11 C0,17.101 4.9,22 11,22 C17.1,22 22,17.101 22,11 C22,4.9 17.1,0 11,0 M11,10 C10.4,10 10,10.4 10,11 L10,15 C10,15.601 10.4,16 11,16 C11.6,16 12,15.601 12,15 L12,11 C12,10.4 11.6,10 11,10 M10.2998,6.2998 C10.0998,6.4998 9.9998,6.6998 9.9998,6.9998 C9.9998,7.2998 10.0998,7.4998 10.2998,7.6998 C10.4998,7.9008 10.6998,7.9998 10.9998,7.9998 C11.2998,7.9998 11.4998,7.9008 11.6998,7.6998 C11.9008,7.4998 11.9998,7.2998 11.9998,6.9998 C11.9998,6.6998 11.9008,6.4998 11.6998,6.2998 C11.2998,5.9008 10.6998,5.9008 10.2998,6.2998"/></defs>
+                    <g fill="none" fill-rule="evenodd" transform="translate(1 1)"><use class="sdc-modal__svg-use" xlink:href="#info-a"/></g></svg></div>
+                <div *ngIf="type == 'error'"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 24 24"><defs><path fill="#000" id="x-a" d="M11,20 C6,20 2,16 2,11 C2,6 6,2 11,2 C16,2 20,6 20,11 C20,16 16,20 11,20 M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M14.2591,7.29935 C13.8591,6.90035 13.2591,6.90035 12.8591,7.29935 L10.5591,9.59935 L8.2591,7.29935 C7.8591,6.90035 7.2591,6.90035 6.8591,7.29935 C6.4591,7.69935 6.4591,8.29935 6.8591,8.69935 L9.1581,10.99935 L6.8591,13.29935 C6.4591,13.69935 6.4591,14.29935 6.8591,14.69935 C7.0591,14.90035 7.2591,14.99935 7.5591,14.99935 C7.8591,14.99935 8.0591,14.90035 8.2591,14.69935 L10.5591,12.40035 L12.8591,14.69935 C13.0591,14.90035 13.3591,14.99935 13.5591,14.99935 C13.7591,14.99935 14.0591,14.90035 14.2591,14.69935 C14.6581,14.29935 14.6581,13.69935 14.2591,13.29935 L11.9591,10.99935 L14.2591,8.69935 C14.6581,8.29935 14.6581,7.69935 14.2591,7.29935"/></defs>
+                    <g fill="none" fill-rule="evenodd" transform="translate(1 1)"><use class="sdc-modal__svg-use" xlink:href="#x-a"/></g></svg></div>
+            </div>
+            <div *ngIf="title" class="title" >{{ title }}</div>
+            <sdc-modal-close-button #modalCloseButton [testId]="getCalculatedTestId('close')"></sdc-modal-close-button>
+        </div>
+        <div class="sdc-modal__content" >
+                <div *ngIf="message">{{message}}</div>
+                <div #dynamicContentContainer></div>
+        </div>
+        <div class="sdc-modal__footer">
+            <sdc-modal-button *ngFor="let button of buttons"
+                [text]="button.text"
+                [type]="button.type || 'primary'"
+                [disabled]="button.disabled"
+                [size] = "button.size ? button.size : 'default'"
+                [closeModal]="button.closeModal"
+                [spinner_position]="button.spinner_position"
+                [show_spinner]="button.show_spinner"
+                [callback]="button.callback"
+                [testId]="getCalculatedTestId('button-' + button.text)"
+                >
+            </sdc-modal-button>
+        </div>
+    </div>
+</div>
+<div class="modal-background" [@toggleBackground]="modalVisible" ></div>
+`;
diff --git a/src/angular/modals/modal.component.spec.ts b/src/angular/modals/modal.component.spec.ts
new file mode 100644
index 0000000..372d59d
--- /dev/null
+++ b/src/angular/modals/modal.component.spec.ts
@@ -0,0 +1,105 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, Input, NgModule, ViewContainerRef, Inject, Injectable, Type, ApplicationRef, ComponentFactoryResolver, ComponentRef, EmbeddedViewRef, Injector } from '@angular/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core/src/metadata/ng_module';
+import { ModalService } from './modal.service';
+import { CreateDynamicComponentService } from "../utils/create-dynamic-component.service";
+import { IModalConfig, ModalType, ModalSize } from "../../../src/angular/modals/models/modal-config";
+import { ModalInnerContent } from "../../../stories/ng2-component-lab/components/modal-inner-content-example.component";
+
+
+describe("Modal unit-tests", () => {
+    let testService: ModalService;
+    const testInputModal = {
+        size: 'xl', //'xl|l|md|sm|xsm'
+        title: 'Test_Title',
+        message: 'Test_Message',
+        modalVisible: true
+    };
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+           providers:[
+                ModalService,
+                { provide : CreateDynamicComponentService, useClass: CreateDynamicComponentServiceTest}
+            ],
+            declarations: [],
+            schemas:[NO_ERRORS_SCHEMA]
+        })
+        testService = TestBed.get(ModalService);
+    }));
+
+    it('Modal should be open test', () => {
+        let modalInstance = testService.openModal(testInputModal);
+        expect(modalInstance).toBeTruthy();
+    })
+
+    it('Modal alert window test', () => {
+        let modalInstance = testService.openAlertModal('testAlert', 'testMessage');
+        expect(modalInstance).toBeTruthy();
+    })
+
+    it('Modal info window test', () => {
+        let modalInstance = testService.openErrorModal('testMessage', 'sampleTestId');
+        expect(modalInstance).toBeTruthy();
+    })
+
+
+    it('Custom Modal should be open', () => {
+        let modalConfig:IModalConfig = <IModalConfig> {
+            size: ModalSize.medium,
+            title: 'Title',
+            type: ModalType.custom,
+            buttons: [{text:"Save & Close", closeModal:true},
+                      {text:"Save", callback:this.customModalOnSave, closeModal:false},
+                      {text:"Cancel", type: 'secondary', closeModal:true}]
+        };
+        let modalInstance = testService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
+        expect(modalInstance).toBeTruthy();
+    })
+
+    it('Shoul close window', () => {
+        let modalInstance = testService.openModal(testInputModal);
+        testService.closeModal();
+        expect(modalInstance.instance.modalVisible).toBeFalsy();
+    })
+})
+
+
+const testModalInstance = {
+    instance:{
+        closeAnimationComplete:{
+            subscribe:() => {
+                return true;
+            },
+        },
+        _createDynamicComponentService:{
+            insertComponentDynamically:() => {
+                return true;
+            }
+        },
+        modalVisible:true
+    },
+
+};
+
+@Component({
+    selector: 'modal-test',
+    template: `<div></div>`
+})
+
+
+
+export class CreateDynamicComponentServiceTest {
+    modalVisble: true;
+    public createComponentDynamically = (modalInstance, customData) => {
+        return testModalInstance;
+    }
+    public insertComponentDynamically = () =>{
+        return testModalInstance;
+    }
+
+}
+
+
+
+
diff --git a/src/angular/modals/modal.component.ts b/src/angular/modals/modal.component.ts
new file mode 100644
index 0000000..4f4d81f
--- /dev/null
+++ b/src/angular/modals/modal.component.ts
@@ -0,0 +1,96 @@
+import { Component, Input, Output, ViewContainerRef, ViewChild, ComponentRef, trigger, state, animate, transition, style, EventEmitter, Renderer, ElementRef } from '@angular/core';
+import { ModalButtonComponent } from './modal-button.component';
+import { LowerCasePipe } from '@angular/common';
+import { ModalCloseButtonComponent } from './modal-close-button.component';
+import template from './modal.component.html';
+
+@Component({
+    selector: 'sdc-modal',
+    template: template,
+    animations: [
+        trigger('toggleBackground', [
+            transition('* => 1', [style({opacity: 0}), animate('.45s cubic-bezier(0.23, 1, 0.32, 1)')]),
+            transition('1 => *', [animate('.35s cubic-bezier(0.23, 1, 0.32, 1)', style({opacity: 0}))])
+        ]),
+        trigger('toggleModal', [
+            transition('* => 1', [style({opacity: 0, transform: 'translateY(-80px)'}),  animate('.45s cubic-bezier(0.23, 1, 0.32, 1)')]),
+            transition('1 => *', [style({opacity: 1, transform: 'translateY(0px)'}), animate('.35s ease-in-out', style({opacity:0, transform: 'translateY(-80px)'}))])
+        ])
+    ]
+})
+
+export class ModalComponent {
+
+    @Input() size: string; 'xl|l|md|sm|xsm';
+    @Input() title: string;
+    @Input() message: string;
+    @Input() buttons: ModalButtonComponent[];
+    @Input() type: string; 'info|error|alert|custom';
+    @Input() testId: string;
+    @Output() closeAnimationComplete: EventEmitter<any> = new EventEmitter<any>();
+
+    @ViewChild('modalCloseButton')
+    set refCloseButton(_modalCloseButton: ModalCloseButtonComponent) {
+        this.modalCloseButton = _modalCloseButton;
+    }
+
+    modalVisible: boolean;
+    // Allows for custom component as body instead of simple message.
+    // See ModalService.createActionModal for implementation details, and HttpService's catchError() for example.
+    @ViewChild('dynamicContentContainer', {read: ViewContainerRef}) dynamicContentContainer: ViewContainerRef;
+    innerModalContent: ComponentRef<ModalComponent>;
+
+    public calculatedTestId: string;
+    public modalCloseButton: ModalCloseButtonComponent;
+
+    constructor(private renderer: Renderer,
+                private lowerCasePipe: LowerCasePipe
+            ) {
+        this.modalVisible = true;
+    }
+
+    getCalculatedTestId = (buttonText: string): string => {
+        // TODO: Replace this
+        if (this.testId) {
+            return this.testId + '-' + this.lowerCasePipe.transform(buttonText);
+        }
+        return null;
+    }
+
+    public modalToggled = (toggleEvent: any) => {
+        if (!toggleEvent.toState) {
+            this.closeAnimationComplete.emit();
+        }
+    }
+
+    public getCloseButton = (): ModalCloseButtonComponent => {
+        return this.modalCloseButton;
+    }
+
+    public getButtonById = (id: string): ModalButtonComponent => {
+        return this.buttons.find((button) => {
+            return button.id && button.id === id;
+        });
+    }
+
+    public getButtons = (): ModalButtonComponent[] => {
+        return this.buttons;
+    }
+
+    public setButtons = (_buttons: ModalButtonComponent[]): void => {
+        this.buttons = _buttons;
+    }
+
+    public getTitle = (): string => {
+        return this.title;
+    }
+
+    public setTitle = (_title: string): void => {
+        this.title = _title;
+    }
+
+    public hoverAnimation(evn: MouseEvent) {
+        this.renderer.setElementClass(evn.target as HTMLElement, 'sdc-ripple-click__animated', true);
+        // evn.taregt.classList.add('sdc-ripple-click__animated');
+    }
+}
diff --git a/src/angular/modals/modal.module.ts b/src/angular/modals/modal.module.ts
new file mode 100644
index 0000000..5697437
--- /dev/null
+++ b/src/angular/modals/modal.module.ts
@@ -0,0 +1,33 @@
+import { NgModule } from "@angular/core";
+import { ModalComponent } from "./modal.component";
+import { ModalService } from "./modal.service";
+import { CommonModule, LowerCasePipe } from "@angular/common";
+import { ButtonsModule } from "../buttons/buttons.module";
+import { AnimationDirectivesModule } from "../animations/animation-directives.module";
+import { CreateDynamicComponentService } from "../utils/create-dynamic-component.service";
+import { ModalButtonComponent } from "./modal-button.component";
+import { ModalCloseButtonComponent } from "./modal-close-button.component";
+import { SvgIconModule } from "../svg-icon/svg-icon.module";
+
+@NgModule({
+    declarations: [
+        ModalComponent,
+        ModalButtonComponent,
+        ModalCloseButtonComponent
+    ],
+    imports: [
+        CommonModule,
+        ButtonsModule,
+        AnimationDirectivesModule,
+        SvgIconModule
+    ],
+    entryComponents: [
+        ModalComponent,
+        ModalCloseButtonComponent
+    ],
+    exports: [ModalButtonComponent],
+    providers: [CreateDynamicComponentService, ModalService, LowerCasePipe]
+})
+export class ModalModule {
+
+}
diff --git a/src/angular/modals/modal.service.ts b/src/angular/modals/modal.service.ts
new file mode 100644
index 0000000..d80ad1f
--- /dev/null
+++ b/src/angular/modals/modal.service.ts
@@ -0,0 +1,100 @@
+import { Injectable, Type, ComponentRef } from '@angular/core';
+import { ModalComponent } from "./modal.component";
+import { CreateDynamicComponentService } from "../utils/create-dynamic-component.service";
+import { IModalConfig, ModalType, ModalSize, IModalButtonComponent } from "./models/modal-config";
+
+@Injectable()
+export class ModalService {
+
+    private currentModal: ComponentRef<any>;
+
+    constructor(private createDynamicComponentService: CreateDynamicComponentService) {
+    }
+
+    /* Shortcut method to open an alert modal with title, message, and close button that simply closes the modal. */
+    public openAlertModal(title: string, message: string, actionButtonText?: string, actionButtonCallback?: Function, testId?: string) {
+        const modalConfig = {
+            size: ModalSize.small,
+            title: title,
+            message: message,
+            testId: testId,
+            buttons: this.createButtons('secondary', actionButtonText, actionButtonCallback),
+            type: ModalType.alert
+        } as IModalConfig;
+        const modalInstance: ComponentRef<ModalComponent> = this.openModal(modalConfig);
+        this.currentModal = modalInstance;
+        return modalInstance;
+    }
+
+    public openActionModal = (title: string, message: string, actionButtonText?: string, actionButtonCallback?: Function, testId?: string): ComponentRef<ModalComponent> => {
+        const modalConfig = {
+            size: ModalSize.small,
+            title: title,
+            message: message,
+            testId: testId,
+            type: ModalType.standard,
+            buttons: this.createButtons('primary', actionButtonText, actionButtonCallback)
+        } as IModalConfig;
+        const modalInstance: ComponentRef<ModalComponent> = this.openModal(modalConfig);
+        this.currentModal = modalInstance;
+        return modalInstance;
+    }
+
+    public openErrorModal = (errorMessage?: string, testId?: string): ComponentRef<ModalComponent> => {
+        const modalConfig = {
+            size: ModalSize.small,
+            title: 'Error',
+            message: errorMessage,
+            testId: testId,
+            buttons: [{text: "OK", type: "alert", closeModal: true}],
+            type: ModalType.error
+        } as IModalConfig;
+        const modalInstance: ComponentRef<ModalComponent> = this.openModal(modalConfig);
+        this.currentModal = modalInstance;
+        return modalInstance;
+    }
+
+    public openCustomModal = (modalConfig: IModalConfig, dynamicComponentType: Type<any>, dynamicComponentInput?: any) => {
+        const modalInstance: ComponentRef<ModalComponent> = this.openModal(modalConfig);
+        this.createInnnerComponent(dynamicComponentType, dynamicComponentInput);
+        return modalInstance;
+    }
+
+    public createInnnerComponent = (dynamicComponentType: Type<any>, dynamicComponentInput?: any): void => {
+        this.currentModal.instance.innerModalContent = this.createDynamicComponentService.insertComponentDynamically(dynamicComponentType, dynamicComponentInput, this.currentModal.instance.dynamicContentContainer);
+    }
+
+    public openModal = (customModalData: IModalConfig): ComponentRef<ModalComponent> => {
+        const modalInstance: ComponentRef<ModalComponent> = this.createDynamicComponentService.createComponentDynamically(ModalComponent, customModalData);
+        modalInstance.instance.closeAnimationComplete.subscribe(() => {
+            this.destroyModal();
+        });
+        this.currentModal = modalInstance;
+        return modalInstance;
+    }
+
+    public getCurrentInstance = () => {
+        return this.currentModal.instance;
+    }
+
+    public closeModal = (): void => { // triggers closeModal animation, which then triggers toggleModal.done and the subscription to destroyModal
+        this.currentModal.instance.modalVisible = false;
+    }
+
+    private createButtons = (type: string, actionButtonText?: string, actionButtonCallback?: Function): Array<IModalButtonComponent> => {
+        const buttons: Array<IModalButtonComponent> = [];
+        if (actionButtonText && actionButtonCallback) {
+            buttons.push({text: actionButtonText, type: type, callback: actionButtonCallback, closeModal: true});
+            buttons.push({text: 'Cancel', type: 'secondary', closeModal: true});
+        } else {
+            buttons.push({text: 'Cancel', type: type, closeModal: true});
+        }
+
+        return buttons;
+    }
+
+    private destroyModal = (): void => {
+        this.currentModal.destroy();
+    }
+
+}
diff --git a/src/angular/modals/models/modal-config.ts b/src/angular/modals/models/modal-config.ts
new file mode 100644
index 0000000..635942b
--- /dev/null
+++ b/src/angular/modals/models/modal-config.ts
@@ -0,0 +1,44 @@
+import { Placement } from "../../common/enums";
+
+export interface IModalConfig {
+    size?: string; // xl|l|md|sm|xsm
+    title?: string;
+    message?: string;
+    buttons?: IModalButtonComponent[];
+    testId?: string;
+    type?: string; // 'info|error|alert';
+}
+
+export interface IButtonComponent {
+    text: string;
+    disabled?: boolean;
+    type?: string;
+    testId?: string;
+    preventDoubleClick?: boolean;
+    icon_name?: string;
+    icon_position?: string;
+    show_spinner?: boolean;
+    spinner_position?: Placement;
+    size?: string;
+}
+
+export interface IModalButtonComponent extends IButtonComponent{
+    id?: string;
+    callback?: Function;
+    closeModal?: boolean;
+}
+
+export enum ModalType {
+    alert = "alert",
+    error = "error",
+    standard = "info",
+    custom = "custom"
+}
+
+export enum ModalSize {
+    xlarge = "xl",
+    large = "l",
+    medium = "md",
+    small = "sm",
+    xsmall = "xsm"
+}