1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
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');
}
}
|
