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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import { experimentOn } from '@islavi/ng2-component-lab';
const sourceStyles:string =`
.example-source {
background: #eeeeee;
padding: 10px;
border: 1px solid #999999;
margin-top:30px;
}
.example-source pre {
overflow: hidden;
background: #dddddd;
margin-top: 5px;
padding: 5px;
user-select: text;
}
.example-source pre .comment{
color:#666;
opacity:0.4;
font-style:italic;
transition: opacity 400ms ease-in;
}
.example-source pre:hover .comment {
opacity:1;
}
`;
export default experimentOn('Modals')
.group("Modals", [
{
id: 'standardModal',
showSource: false,
title: 'Standard modal',
description: 'Opens a modal with a custom title, message, and confirm button with a callback.',
template: `
<modal-consumer [action]="'openActionModal'"></modal-consumer>
<div class="example-source">Source Code:
<pre>
const MODAL_CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,' +
'pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra';
this.modalService.openActionModal('Standard Modal', MODAL_CONTENT, "OK", this.onConfirmAction, "sampleTestId");
private onConfirmAction = ():void => {{ '{' }}
alert("Action has been confirmed");
{{ '}' }};
</pre></div>`,
styles: [sourceStyles]
},
{
id: 'alertModal',
showSource: false,
title: 'Alert modal',
description: 'Opens a standard alert modal with a custom title and message.',
template: `
<modal-consumer [action]="'openAlertModal'"></modal-consumer>
<div class="example-source">Source Code:
<pre>
const MODAL_CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,' +
'pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra';
this.modalService.openAlertModal("Alert Title", MODAL_CONTENT, "Continue", this.onConfirmAction, "sampleTestId");
</pre></div>`,
styles: [sourceStyles]
},
{
id: 'errorModal',
showSource: false,
title: 'Error modal',
description: `Opens a standard error modal with a custom message.`,
template: `<modal-consumer [action]="'openErrorModal'"></modal-consumer>
<div class="example-source">Source Code:
<pre>
this.modalService.openErrorModal("An error has occurred!", "sampleTestId");
</pre></div>`,
styles: [sourceStyles]
},
{
id: 'customModal1',
showSource: false,
title: 'Custom modal 1',
description: 'Opens a modal with dynamic inner content and customizable title, buttons, and callbacks.',
template: `
<modal-consumer [action]="'openCustomModal1'"></modal-consumer>
<div class="example-source">Source Code:
<pre>
<span class="comment">//create modal config object </span>
let modalConfig:IModalConfig = {{ '{' }}
size: ModalSize.small,
title: 'Title',
type: ModalType.standard,
buttons: [
{{ '{' }}text:"Save", size:"'x-small'", callback:this.customModalOnSave, closeModal:false{{ '}' }},
{{ '{' }}text:"Cancel", size:"'x-small'", closeModal:true{{ '}' }}]
{{ '}' }};
<span class="comment">//open modal with dynamically created 'modalInnerContent' example component. Send data object with input 'name'. </span>
this.modalService.openCustomModal(modalConfig, ModalInnerContent, {{ '{' }}name: "Sample Content"{{ '}' }});
private customModalOnDone = ():void => {{ '{' }}
let currentInstance:any = this.modalService.getCurrentInstance();
alert("Save with result: " + currentInstance.innerModalContent.instance.name);
{{ '}' }};
private customModalOnSave = ():void => {{ '{' }}
let currentInstance:any = this.modalService.getCurrentInstance();
alert("Save with result: " + currentInstance.innerModalContent.instance.name);
{{ '}' }};
</pre></div>`,
styles: [sourceStyles]
},
{
id: 'customModal2',
showSource: false,
title: 'Custom modal 2',
description: 'Opens a modal with, and change his buttons and title',
template: `
<modal-consumer [action]="'openCustomModal2'"></modal-consumer>
`,
styles: [sourceStyles]
}
]);
|
