1 files changed, 96 insertions, 0 deletions
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');
+    }
+}